参考韩顺平老师的视频,用HTML写一个静态网页的邮箱

最新推荐文章于 2021-06-05 03:25:42 发布

jun2016425

最新推荐文章于 2021-06-05 03:25:42 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签：表单 frameset 邮箱表格 form

本文链接：https://blog.youkuaiyun.com/jun2016425/article/details/51932811

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于HTML框架集的邮箱系统网页布局方案，包括主页面、收件箱、发件箱及废件箱等核心功能页面的设计与实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现的效果图

1.1 邮箱主页如下

1.2 收件箱页如下

1.3 发件箱页如下

1.4 废件箱页如下

2.代码实现如下

2.1 主框架mailbox.html

mailbox.html主框架的代码实现的功能主页是，将窗口分成3个行，上面一行占20%,中间那行的占70%，下面那行占10%，(这里的行只是我个人意识里面的并不是真的行，因为觉得这么说比较容易理解，所以才说成行的)。

2.1.1 第一行我用了mailbox_top.html来填充

2.1.2 第二行我将它分成一个小的框架<frameset></frameset>,我讲这小的框架分成左右两边，左边占20%，右边占70%；左边用mailbox_left.html来填充，右边用mailbox_right.html来填充。

2.1.2 第三行我又将它分成一个小的框架<frameset></frameset>,我也将这个小框架分成左右两边，左边占50%，右边也占50%；左边用mailbox_bottom_ads.html来填充，右边用mailbox_bottom_copyRight来填充。

2.1.3 代码如下：

<span style="font-size:18px;"><!--
将窗口分成3个行，上面一行占20%,中间那行的占70%，下面那行占10%
-->
<frameset rows="20%,70%,10%">

	<frame src="mailbox_top.html" scrolling="no" frameborder="0"/>
	
	<!--
	将窗口分成2列左边的那列占百分20，剩下的给右边占
	-->
	<frameset cols="20%,*">
	<!--
	noresize设置窗口大小固定不可以改变，frameborder设置边框
	的边线为0
	-->
	<frame src="mailbox_left.html" noresize frameborder="0"/>
	<!--
	设置名字name="mailbox_frame"在点击链接的时候(比如点收件箱)，才能用name来替换掉这个窗口
	-->
	<frame src="mailbox_right.html" name="mailbox_frame" frameborder="0"/>
	</frameset>
	
	
	<frameset cols="50%,*">
	<!--广告窗口-->
	<frame src="mailbox_bottom_ads.html" name="mailbox_ads"frameborder="0"/>
	<!--CopyRright窗口-->
	<frame src="mailbox_bottom_copyRight.html" 
	frameborder="0"/>
	</frameset>
	
</frameset></span>

2.2 mailbox_top.html代码

<span style="font-size:18px;"><img src="mailbox_top.png" width="100%" height="100%"/></span>

2.3 mailbox_left.html代码

这里也就定义了四个超链接分别链接到(1).邮箱主页：mailbox_right.html，(2).收件箱：mailbox_receive.html，(3).发件箱：mailbox_send.html，(4).废件箱：mailbox_trash.html

<span style="font-size:18px;"><body bgcolor="pink">
<ul>
	<li><a href="mailbox_right.html" target="mailbox_frame">邮箱主页</a></li>
	<li><a href="mailbox_receive.html" target="mailbox_frame">收件箱</a></li>
	<li><a href="mailbox_send.html" target="mailbox_frame">发件箱</a></li>
	<li><a href="mailbox_trash.html" target="mailbox_frame">废件箱</a></li>
</ul>
</body></span>

2.3.1 mailbox_receive.html代码

<body >
<h1><u>收件箱</u></h1>
<form>

<table width="600px"border="1" align="center" cellspace="2px"><caption>您有 2 封新邮件</caption>

<tr bgcolor="#BFC1C0">
<!--<th></th>修饰表头,默认会加粗，而且字体会居中对齐-->
<td><input type="checkbox" name="receive_checkbox"/></td>
<th>重要度</th>
<th>附件</th>
<th>新邮件</th>
<th>发件人</th>
<th>主题</th>
<th>接受时间</th>
</tr>

<tr>
<td><input type="checkbox" name="receive_checkbox"/></td>
<td> </td>
<td>no</td>
<td><img src="get_email.png"></td>
<td>Scien Wu</td>
<td>Hello</td>
<td>2016-3-7 10:40</td>
</tr>

<tr>
<td><input type="checkbox" name="receive_checkbox"/></td>
<td>重要</td>
<td>yes</td>
<td><img src="get_email.png"></td>
<td>Mxy</td>
<td>作业</td>
<td>2016-3-7 11:00</td>
</tr>

<tr>
<td><input type="checkbox" name="receive_checkbox"/></td>
<td> </td>
<td>no</td>
<td> </td>
<td>SconeOne</td>
<td>无聊的广告</td>
<td>2016-3-6 00:30</td>
</tr>
</table>
<input type="button" value="删除选中邮件"/> <!--如果没有以/>结尾的话，很多属性都会影响到后面的-->
</form><br/>
<hr/>
邮件预览<br/>
这里是邮件预览窗口!
</body>

2.3.2 mailbox_send.html代码

<body>
<form>
<h1><U>发件箱</U></h1>

收件人:<input type="text" name="receive_person"/><br/>
抄  送:<input type="text" name="copy_to"/><br/>
主  题:<input type="text" name="theme"/><br/>

<font face="微软雅黑">信件等级</font>

<select name="level">
<option value="high_level">高级</option>
<option value="mid_level">中级</option>
<option value="low_level">低级</option>
</select>

<!--文件上传控件-->
附件:<input type="file" name="attachment"/><br>

<!--文本域-->
<textarea name="send_textarea" cols="80" rows="20">
</textarea><br>

<input type="submit" value="发送"/>
<input type="button" value="重写"/>
</form>
</body>

2.3.3 mailbox_trash.html代码

<th>附件</th>
<th>新邮件</th>
<th>发件人</th>
<th>主题</th>
<th>接受时间</th>
</tr>

<tr>
<td><input type="checkbox" name="receive_checkbox"/></td>
<td> </td>
<td>no</td>
<td><img src="get_email.png"></td>
<td>Bill</td>
<td>About Microsoft Windows 2008</td>
<td>2016-3-6 10:20</td>
</tr>

<tr>
<td><input type="checkbox" name="receive_checkbox"/></td>
<td>一般</td>
<td>yes</td>
<td><img src="get_email.png"></td>
<td>MJ</td>
<td>乔丹的照片</td>
<td>2016-3-7 11:00</td>
</tr>

<tr>
<td><input type="checkbox" name="receive_checkbox"/></td>
<td> </td>
<td>no</td>
<td> </td>
<td>SconeOne</td>
<td>无聊的广告</td>
<td>2016-3-6 00:30</td>
</tr>
</table>
<input type="button" value="全部选中"/> 
<input type="button" value="取消选定"/> 
<input type="button" value="删除选中邮件"/> <!--如果没有以/>结尾的话，很多属性都会影响到后面的-->
</form>

</body>

2.4 mailbox_right.html代码

<span style="font-size:18px;"><body bgcolor="silver">
欢迎来到军军的邮箱主页
</body></span>

2.5 mailbox_bottom_ads.html代码

<span style="font-size:18px;"><body bgcolor="#5BC648">
这是永远存在的广告窗口<br>
<!--
marquee设置滚动窗口，direction设置方向是向左，
scrollamount设置滚动速度，值越大，速度越快
bihavior定义滚动的方式
-->
<marquee direction=left bihavior=alternate scrollamount=5 > 
<img src="humor1.jpeg" width="50px">
<img src="humor1.jpeg" width="50px">
<img src="humor1.jpeg" width="50px">
<img src="humor1.jpeg" width="50px">
</marquee>
</body></span>

2.6 mailbox_bottom_copyRight.html代码

<span style="font-size:18px;"><body bgcolor="#A2A3A8">
CopyRight by Jun
</body></span>