注册页面联系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        body{
            font-size: 12px;
        }
        body a {
            text-decoration:none;
            color: blue;
        }
        .header{
            width: 100%;
            height: 48px;
            /*background-color: darkgray;*/
        }
        .headerCon{
            width:70% ;
            height: 48px;
            background-color: white;
            margin: 0 auto;
            line-height: 48px;
        }
        .keep{
            margin-right: 900px;
            margin-left: 60px;
        }
        .headerCon a{
            text-decoration: none;
            color: black;
        }
         .headerCon a:hover{
             color: red;
             text-decoration: underline;
         }
        .action a{
            margin-left: 10px;
        }
        .content{
            width: 100%;
            position: relative;
        }
        .box{
            width: 70%;
            margin: 0 auto;
        }
        .bigBox{
            border: 1px solid lightgray;
            overflow: hidden;
        }
        .h1{
            margin-bottom: 50px;
            margin-left: -20px;
        }
        .form,.guangao{
            float: left;
        }
        .form{
            width: 60%;
            margin-left: 100px;
            margin-top: 30px;
        }
        .form_con{
            text-align: right;
            margin-right: 500px;
        }
        .guangao{
            width: 30%;
        }
        p{
            margin: 20px;
        }
        .form_con a{
            text-decoration:none;
            color: blue;
        }
        .button{
            margin-top: 30px;
            margin-right: 10px;
            margin-bottom: 80px;
            background-color: red;
            color: white;
            width: 190px;
            height:25px;
        }
        .guangao p{
            margin-left: 0;
            margin-top:70px;
        }
        .guangao img{
            margin-left: 0;
            margin-top: 20px;
        }
        .intro p{
            text-align: center;
        }
    </style>
</head>
<body>


<div class="header">
    <div class="headerCon">
        <span class="keep">
            <a href="">*收藏本站</a>
        </span>
        <span class="action">
            <a href="">登录</a>
            <a href="">注册</a>
            <a href="">我的订单</a>
            <a href="">VIP 会员俱乐部</a>
            <a href="">客户服务</a>
        </span>
    </div>
</div>
<div class="content">
    <div class="box">
        <div class="img">
            <img src="mei.png" alt="" width="220" height="140">
        </div>
        <div class="bigBox">
                <div class="form">
                    <h1 class="h1">注册新用户</h1>
                    <form class="form_con" action="">
                         <p>*用户名： <input type="text"></p>
                         <p>*手机号： <input type="text"></p>
                         <p>*登录密码： <input type="password"></p>
                         <p>*确认密码： <input type="password"></p>
                         <p>
                             *验证码： <input type="text" >
                             <!--<img src="a.png" alt="" width="20px" height="20px">-->
                         </p>
                        <input type="checkbox">我已阅读并同意
                        <a href="">《用户注册协议》</a>
                        <button class="button">同意以上协议并注册</button>
                    </form>



                </div>
                <div class="guangao">
                    <p>我已经注册，现在就 <a href="">登录</a></p>
                    <img src="2.png" alt="" width="300" height="100">
                </div>
        </div>
        <div class="intro">
            <p>@ 2004-2015 www.autohome.com.cn ALL Right Reserved.汽车之家 版权所有</p>
        </div>
    </div>
</div>



</body>
</html>
posted @ 2017-12-15 14:12 wangmo 阅读(193) 评论(0) 收藏举报
刷新页面返回顶部
注册页面联系

公告
