<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网易邮箱</title>
</head>
<body>
<img src="img/163logo.gif" /><br/>
<a href="#">免费邮</a>
<a href="#">企业邮</a>
<a href="#">VIP邮</a>
<a href="#">帮助</a><br/>
<img src="img/imap.jpg"/><br/>
·163/126/yeah三大免费邮箱均默认开放<br/>
·全面支持Iphone/IPad及Android等系统<br/>
·客户端、手机网页、实现发送、阅读邮件<br/>
<a href="#">立即同步</a>
<a href="#">普通登录</a>
<a href="#">手机号登录</a>
<form>
<p>用户名:
<input type="text"/>@163.com
密码:
<input type="password"/><br/>
版本:
<select name="">
<option value="0">默认</option>
<option value="0">2019</option>
<option value="0">2018</option>
<option value="0">2017</option>
<option value="0">2016</option>
</select>
</p>
<p>
<input type="checkbox" value="自动登录"/>自动登录
<input type="checkbox" value="SSL" checked=""/>SSL
<input type="submit" value="自动登录"/>
</p>
</input>
<!--底部-->
<footer>
<img src="" alt=""/>
<a href="#">关于网易</a>
<a href="#">免费邮 </a>
<a href="#">官方博客</a>
<a href="#">客户服务 </a>
<a href="#">隐私政策</a>|
<a href="#">网易公司版权所有 © 2015-2018</a>
</footer>
</body>
</html>
标准板;
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>网易邮箱登录</title> </head> <body> <!--第一步，先把网页划分结构 该网页大概分为三部分，上中下结构--> <!--header头部里面分为两部分，左右，左边放logo，右边是文字--> <header> <!--左边logo--> <h1><a href="#"><img src="images/163logo.gif" alt="logo"/></a></h1> <!--右边超链接--> <p> <a href="#">免费邮</a> <a href="#"> 企业邮</a> <a href="#">VIP邮箱</a> <a href="#">帮助</a> </p> </header> <!--中间的section部分又分为左右结构，左边是图片和无序列表，右边是表单--> <section> <!--左边--> <div> <img src="images/imap.jpg" alt=""/> <ul> <li>163/126/yeah三大免费邮箱均默认开放</li> <li>全面支持iPhone/iPad及Android等系统</li> <li>客户端、手机与网页，实现发送、阅读邮件</li> </ul> <a href="#">立即同步普通登录手机号登录</a> </div> <!--右边--> <form action="#" method="get"> <p> 用户名： <input type="text" name="userName"/> @163.com </p> <p> 密码： <input type="password" name="psw"/> </p> <p> 版本： <select name=""version id=""> <option value="">默认</option> <option value="2018">2018</option> <option value="2017">2017</option> <option value="2016">2016</option> <option value="2015">2015</option> </select> </p> <p> <input type="checkbox" value="autoLogin"/>自动登录 <input type="checkbox" value="ssl" checked/>SSL </p> <input type="submit" value="登录"/> <input type="submit" value="注册"/> </form> </section> <!--底部--> <footer> <img src="images/netease_logo.gif" alt=""/> <a href="#">关于网易</a> <a href="#">免费邮 </a> <a href="#">官方博客</a> <a href="#">客户服务 </a> <a href="#">隐私政策</a>| <a href="#">网易公司版权所有 © 2015-2018</a> </footer> </body> </html>
排版后;
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>网易邮箱登录</title> </head> <body> <!--第一步，先把网页划分结构 该网页大概分为三部分，上中下结构--> <!--header头部里面分为两部分，左右，左边放logo，右边是文字--> <header> <table> <tr> <td> <!--左边logo--> <h1><a href="#"><img src="images/163logo.gif" alt="logo"/></a></h1> </td> <td> <!--右边超链接--> <p> <a href="#">免费邮</a> <a href="#"> 企业邮</a> <a href="#">VIP邮箱</a> <a href="#">帮助</a> </p> </td> <tr> </table> </header> <!--中间的section部分又分为左右结构，左边是图片和无序列表，右边是表单--> <section> <table> <tr> <td> <!--左边--> <div> <img src="images/imap.jpg" alt=""/> <ul> <li>163/126/yeah三大免费邮箱均默认开放</li> <li>全面支持iPhone/iPad及Android等系统</li> <li>客户端、手机与网页，实现发送、阅读邮件</li> </ul> <a href="#">立即同步普通登录手机号登录</a> </div> </td> <td> <!--右边--> <form action="#" method="get"> <p> 用户名： <input type="text" name="userName"/> @163.com </p> <p> 密码： <input type="password" name="psw"/> </p> <p> 版本： <select name=""version id=""> <option value="">默认</option> <option value="2018">2018</option> <option value="2017">2017</option> <option value="2016">2016</option> <option value="2015">2015</option> </select> </p> <p> <input type="checkbox" value="autoLogin"/>自动登录 <input type="checkbox" value="ssl" checked/>SSL </p> <input type="submit" value="登录"/> <input type="submit" value="注册"/> </form> </td> <tr> </table> </section> <!--底部--> <footer> <img src="images/netease_logo.gif" alt=""/> <a href="#">关于网易</a> <a href="#">免费邮 </a> <a href="#">官方博客</a> <a href="#">客户服务 </a> <a href="#">隐私政策</a>| <a href="#">网易公司版权所有 © 2015-2018</a> </footer> </body> </html>
table用于定义表格，tr定义表格的行，td定义数据
实现步骤:
1.将网页划分结构，该网页大概分成三部分上中下结构、
header分为两部分，左边放logo右边放文字