html第三次作业

最新推荐文章于 2024-08-21 20:15:01 发布
xency
最新推荐文章于 2024-08-21 20:15:01 发布
阅读量100
点赞数 2
文章标签： html 前端 css
本文链接：https://blog.csdn.net/xency/article/details/140608678
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东登录页面</title>
     <style>
        .top{
            width: 1400px;
            margin: 0;
        }
 
        .logo{
            margin-left: 30px;
        }
        .upper{
            width: 1400px;
            height: 40px;
            background-color: antiquewhite;
            text-align: center;
            font-size: 15px;
            margin-top: 20px;
            font-family: "微软雅黑";
            padding-top: 17px;
        }
 
        .main{
            width: 1400px;
            height: 400px;
            background-color:#e93854;
           
        }
 
        .login{
            width: 200px;
            height: 240px;
            float: right;
            background-color:white;
            margin-top: 100xp;
            border: 1px solid gray;
            padding: 40px 40px 40px 40px;
            border-radius: 10px;
            box-shadow: 2px 2px 2px;
            vertical-align: center;
            margin-top: 40px;
            margin-right: 270px;
        }
 
        .index{
            list-style-type: none;
            display: inline-block;
        }
 
        .bottom ul{
            text-align: center;
            margin-top: 20px;
        }

       .bottom ul li{
            display: inline-block;
            list-style: none;
            text-align: center;
            font-size: 12px;
            margin-top: 10px;
            
        }
 
        a{  
            text-decoration: none;
            color: #666;
            text-align: center;
        }

         .main img{
            margin-left: 20%;
        }

        *{
            margin: 0;
            padding: 0;
        }

        .login ul li{
            list-style: none;
            display: inline-block;
            font-size:14px ;
            color: #666;
            margin-top: 30px;
        }

        .forg{
            text-align: right;
            font-size: 12px;
            color: #666;
            margin-top: 10px;
        }

        .input{
            width: 200px;
            height: 30px;
 
            border: 1px solid #bbddbb;
            margin-top: 20px;
            text-align: center;
        }

        .input input{
            outline: none;
            border: none;
            margin-top: 10px;
            text-align: left;
        }

        .signin{
            background-color: rgb(229, 112, 112);
            width: 200px;
            height: 25px;
            border-radius: 5px;
            margin-top: 20px;
        }
 
        p{
            font-size: 12px;
            text-align: center;
            color: #666;
        }
        input:focus{
            width: 180px;
            height: 30px;
        }
 
        .login .r1{
            color: red;
        }
     </style>
</head>
<body>
        <div class="top">
            <div class="logo"><img src="logo.jpg" width="200px" height="150px" alt=""></div>
           
        </div>
        <div class="upper">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</div>
        
        <div class="main">
            <img src="登录界面.jpg"  width="400px" height="400px" alt="">
            <div class="login">
                <span class="r1" >密码登录</span>&nbsp;&nbsp;
                <span class="r2">短信登录</span>
                <div class="input"> <input type="text" placeholder="账号名/手机号/邮箱" name="username"></div>
                <div class="input"><input type="password" placeholder="密码" name="password" required></div>
                <div class="forg">忘记密码</div>
                <button type="submit" class="signin"><a href="https://www.baidu.com">登&nbsp;&nbsp;录</a></button>
                <ul>
                    <li class="qq">QQ</li>&nbsp;&nbsp;
                    <li class="vx">微信</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <li class="zhuce">立即注册</li>
                </ul>
        </div>
        </div>
 
        <div class="bottom">
            <ul>
                <li><a href="#">关于我们&nbsp;<span>|</span></a></li>
                <li><a href="#">联系我们&nbsp;<span>|</span></a></li>
                <li><a href="#">人才招聘&nbsp;<span>|</span></a></li>
                <li><a href="#">商家入驻&nbsp;<span>|</span></a></li>
                <li><a href="#">广告服务&nbsp;<span>|</span></a></li>
                <li><a href="#">手机京东&nbsp;<span>|</span></a></li>
                <li><a href="#">友情链接&nbsp;<span>|</span></a></li>
                <li><a href="#">销售联盟&nbsp;<span>|</span></a></li>
                <li><a href="#">京东社区&nbsp;<span>|</span></a></li>
                <li><a href="#">京东公益</a></li>
            </ul>
            <p>Copyright&copy;2004-2024&nbsp;&nbsp;  京东JD.com 版权所有</p>
        </div>
</body>
</html>