Home > Developer > Web Develop

Refer to Hanshunping Teacher's video, write a static web mailbox in HTML

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. The implementation of

1.1 Email Page below



1.2 Inbox page Below


1.3 Outbox pages are as follows



1.4 Scrap Box page is as follows



2. The code is implemented as follows

2.1 Main Frame mailbox.html

Mailbox.html main framework code implementation of the Function home page is, the window is divided into 3 lines, the top row accounted for 20%, the middle of the row accounted for 70%, the following line accounted for 10%, (here the line is only my personal consciousness inside is not the real line, because it is easier to say that it is easy to understand, so only say the row).

2.1.1 First line I used a mailbox_top.html to fill

2.1.2 The second line I divide it into a small frame <frameset></frameset> I say the small frame is divided into left and right sides, the left is 20%, and 70% on the left. Mailbox_ Left.html to fill, the right with mailbox_right.html to fill.

2.1.2 The third line I divided it into a small frame <frameset></frameset> I also divide this small frame into left and right sides, 50% on the left, and 50% on the left. Mailbox_bottom_ Ads.html to fill, the right with mailbox_bottom_copyright to fill.

The 2.1.3 code is as follows:

<span style= "FONT-SIZE:18PX;" ><!--divided the window into 3 rows, the top row accounted for 20%, the middle row accounted for 70%, the following line accounted for 10%--><frameset rows= "20%,70%,10%" ><frame src= "Mailbox_ Top.html "scrolling=" no "frameborder=" 0 "/><!--divide the window into 2 columns to the left of the column accounted for 20, the left to the right of--><frameset cols=" 20%,* "> <!--noresize Set window size fixed can not be changed, frameborder set border edge is 0--><frame src= "mailbox_left.html" noresize frameborder= "0" /><!--Set the name name= "Mailbox_frame" When you click on the link (such as the registration box), you can use the name to replace the window--><frame src= "mailbox_right.html" Name= "Mailbox_frame" frameborder= "0"/></frameset><frameset cols= "50%,*" ><!--Advertising window-->< Frame src= "mailbox_bottom_ads.html" name= "mailbox_ads" frameborder= "0"/><!--copyrright window--><frame src= "mailbox_bottom_copyright.html" frameborder= "0"/></frameset></frameset></span>


2.2 mailbox_top.html Code 

<span style= "FONT-SIZE:18PX;" ></span>

2.3 mailbox_left.html Code

It also defines four hyperlinks that are linked to (1). Email Home: mailbox_right.html, (2). Inbox: Mailbox_receive.html, (3). Outbox: Mailbox_send.html, (4). Scrap Box: mailbox_trash.html

<span style= "FONT-SIZE:18PX;" ><body bgcolor= "Pink" ><ul><li><a href= "mailbox_right.html" target= "mailbox_frame" > Email Home </a></li><li><a href= "mailbox_receive.html" target= "Mailbox_frame" > Inbox </a></li ><li><a href= "mailbox_send.html" target= "Mailbox_frame" > Outbox </a></li><li><a href= "mailbox_trash.html" target= "mailbox_frame" > Scrap box </a></li></ul></body></span >
2.3.1 mailbox_receive.html Code 

<body >2.3.2 mailbox_send.html Code
<body><form>

2.3.3 mailbox_trash.html Code
<th> Accessories </th><th> new messages </th><th> Senders </th><th> Themes </th><th> Accept Time </th></tr><tr><td><input type= "checkbox" Name= "Receive_checkbox"/></td>< Td> </td><td>no</td><td></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> General &LT;/TD&GT;&LT;TD Photos of >yes</td><td></td><td>MJ</td><td> Jordan </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> Boring ads </td><td>2016-3-6 00:30</td></tr></table ><inpUT type= "button" value= "All selected"/> <input type= "button" value= "deselect"/> <input type= "button" value= "Delete selected messages"/ > <!--If you don't end up with/>, a lot of properties will affect the back--></form></body>.




2.4 mailbox_right.html Code
<span style= "FONT-SIZE:18PX;" ><body bgcolor= "Silver" > Welcome to the Army's email home </body></span>

2.5 mailbox_bottom_ads.html Code
<span style= "FONT-SIZE:18PX;" ><body bgcolor= "#5BC648" > this is a permanent ad window <br><!--Marquee Set scrolling window, direction set direction is left, ScrollAmount set scrolling speed , the higher the value, the faster Bihavior defines how scrolling is--><marquee direction=left bihavior=alternate scrollamount=5 >  </marquee></body></span>

2.6 mailbox_bottom_copyright.html Code
<span style= "FONT-SIZE:18PX;" ><body bgcolor= "#A2A3A8" >copyright by jun</body></span>





Refer to Hanshunping Teacher's video, write a static web mailbox in HTML

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More