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>
时间： 2024-11-05 20:48:30