第七章 浮动（制作京东登录页面）

<div class="div01">
        <header>
            <nav>
                <img src="image/logo.png" alt="">
                <h1>欢迎登陆</h1>
            </nav>
        </header>
        <article>
            <div class="wrap">
                <div class="login-box">
                    <div class="login-form">
                        <h2>京东会员<a href="#"><img src="image/icon5.jpg">立即注册</a></h2>
                        <form action="" method="post" id="loginForm">
                            <div class="input">
                                <label for="nick" class="nick"></label>
                                <input type="text" name="nick" placeholder="邮箱/用户名/已验证手机">
                            </div>
                            <div class="input">
                                <label for="pwd" class="pwd"></label>
                                <input type="password" name="pwd">
                            </div>
                            <div class="input2">
                                <input type="checkbox" name="auto" id="auto">
                                <label for="auto">自动登录</label>
                                <a href="#">忘记密码？</a>
                            </div>
                            <div class="input3">
                                <a href="#" class="dl">登录</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </article>
        <footer>
            <div>
                <ul>
                    <li><a href="#">关于我们</a><span>|</span></li>
                    <li><a href="#">联系我们</a><span>|</span></li>
                    <li><a href="#">人才招聘</a><span>|</span></li>
                    <li><a href="#">商家入驻</a><span>|</span></li>
                    <li><a href="#">广告服务</a><span>|</span></li>
                    <li><a href="#">手机京东</a><span>|</span></li>
                    <li><a href="#">友情链接</a><span>|</span></li>
                    <li><a href="#">销售联盟</a><span>|</span></li>
                    <li><a href="#">京东社区</a><span>|</span></li>
                    <li><a href="#">京东公益</a><span>|</span></li>
                    <li><a href="#">English Site</a></li>
                </ul>
                <p>Copyright&copy;2004-2017 京东JD.com 版权所有</p>
            </div>
        </footer>
    </div>

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .div01 header{
            width: 990px;
            height: 60px;
            background: white;
            margin: 0px auto;
            overflow: hidden;
        }
        .div01 header img{
            display: inline-block;
            vertical-align: middle;
        }
        .div01 header nav h1{
            vertical-align: middle;
            display: inline-block;
            font-size: 24px;
            color: #808080;
            font-weight: normal;
            margin-left: 20px;
        }
        .div01 article {
            height: 475px;
            background-color: #e75858;
        }
        .div01 article .wrap{
            width: 990px;
            height: 475px;
            background: url(image/banner.png) no-repeat;
            margin: 0px auto;
        }
        .div01 article .login-box{
            display: block;
            border: 1px solid #808080;
            width: 306px;
            height: 238px;
            background: white;
            float: right;
            margin-top: 40px;
            padding: 23px 20px 20px 20px;
            box-sizing: border-box;
        }
        .div01 article .login-form h2{
            font-size: 16px;
            color: #808080;
            font-weight: normal;
        }
        .div01 article .login-form h2 a img{
            vertical-align: middle;
            margin-right: 4px;
        }
        .div01 article .login-form h2 a{
            display: block;
            float: right;
            color: #808080;
            font-size: 12px;
            text-decoration: none;
        }
        .div01 article .login-form h2 a:hover{
            color: red;
        }
        .div01 article .input{
            width: 260px;
            height: 38px;
            margin-top: 18px;
            border: 1px solid #BBDDBB;
        }
        .input label{
            overflow: hidden;
            float: left;
            width: 38px;
            height: 38px;
            border-right: 1px solid #BBDDBB;
        }
        .input input{
            width: 220px;
            height: 38px;
            float: right;
            border: 0px;
        }
        .input .nick{
            background: url(image/icon1.jpg);
        }
        .input .pwd{
            background: url(image/icon2.jpg);
        }
        .div01 article .login-form .input2{
            font-size: 12px;
            margin-top: 16px;            
        }
        .div01 article .login-form .input2 a{
            color: #808080;
            text-decoration: none;
            float: right;
        }
        .div01 article .login-form .input2 a:hover{
            color: orange;
        }
        .div01 article .login-form label,input{
            vertical-align: middle;
        }
        .div01 article .login-form .input3{
            width: 260px;
            height: 30px;
            background: red;
            font-size: 18px;
            margin: 7px 0px;
        }
        .div01 article .login-form .input3 a{
            color: white;
            text-align: center;
            text-decoration: none;
            display: block;
            line-height: 30px;
        }
        .div01 footer{
            width: 990px;
            margin: 0px auto;
        }
        .div01 footer div ul{
            list-style: none;
            font-size: 12px;
            margin-top: 22px;
            text-align: center;
        }
        .div01 footer ul li{
            display: inline-block;
        }
        .div01 footer ul li span{
            padding-left: 12px;
            padding-right: 8px;
        }
        .div01 footer div p{
            text-align: center;
            font-size: 12px;
            color: #808080;
            margin-top: 10px;
        }
        .div01 footer ul li a{
            color: #808080;
            text-decoration: none;
        }
        .div01 footer ul li a:hover{
            color: #e75858;
        }