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

来源：互联网发布：mac里面xp升级win7 编辑：程序博客网时间：2024/05/22 11:29

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>

0 0