html5实战

<!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="#">网易公司版权所有  &copy; 2015-2018</a>
    </footer>
    </body>
</html>
View Code

 标准板;

<!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="#">网易公司版权所有  &copy; 2015-2018</a>
    </footer>
</body>
</html>
View Code

排版后;

<!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="#">网易公司版权所有  &copy; 2015-2018</a>
    </footer>
</body>
</html>
View Code

 

table用于定义表格，tr定义表格的行，td定义数据

实现步骤:

1.将网页划分结构，该网页大概分成三部分上中下结构、

header分为两部分，左边放logo右边放文字

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/helloworld2019/p/10883415.html