用css写一个页面《京东购物登录页面》

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <style>
                    /* 样式初始化 */
        body,html,h1,h2,h3,h4,h5,h6,input,dl,dt,dd,ul,ol,li,p{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 14px;
        }
        ul,
        ol{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            color:#e4393c;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .clear{
            display: block;
            line-height: 0;
            height: 0;
            opacity: 0;
            clear: both;
        }
        .inner{
            width: 990px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        /* 页头位置的样式的书写 */
        header>.inner{
            height: 80px;
            border: none;
        }
        header>.inner>.logo{
            height: 60px;
            margin-top: 10px;
        }
        header>.inner .welcome{
            margin-top: 15px;
            margin-left: 15px;
        }
        header>.inner>a.right{
            margin-top: 55px;
        }
        header>.inner>a.right>em{
            display: inline-block;
            width: 18px;
            height: 14px;
            background: url('../image/3.png') no-repeat;
            vertical-align: -3px;

        }
        /* 警告框位置样式搭建 */
        #warn{
            background-color: #fff8f0;
        }
        nav>.inner{
            border: none;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color:#999;
        }
        nav>.inner>a{
            color:#333;
        }
        nav>.inner>em{
            display: inline-block;
            width: 16px;
            height: 16px;
            background:url(./image/4.png) no-repeat;
            vertical-align: -3px;
        }
        /* 页脚部分样式 */
        footer{
            color: #999;
            text-align: center;
            margin-top: 10px;
        }
        footer>.inner{
            border: none;
        }
        footer>.inner>p{
            height: 30px;
            line-height: 30px;
        }
        footer>.inner>p>a{
            color: #999;
            margin:0 5px
        }
        /* 主体内容的样式搭建 */
        main{
            background-color: #e93854;
        }
        main>.inner{
            height: 475px;
            border: none;
            background: url(./image/13.png) no-repeat;
        }
        main>.inner>#loginBox{
            width: 346px;
            height: 400px;
            background-color: #fff;
            margin-top: 10px;
        }
        #loginBox>header{
            height: 40px;
            line-height: 40px;
            color: #999;
            text-align: center;
            background:#fff8f0 url(./image/4.png) no-repeat 5px;
        }
        #loginBox>nav{
            height: 54px;
            line-height: 54px;
            border-bottom: 1px solid #f4f4f4;
            position: relative;
        }
        #loginBox>nav>div{
            width: 50%;
            height: 100%;
            text-align: center;
            font-size: 20px;
            color: #666;
            cursor: pointer;
        }
        #loginBox>nav>div:hover,
        #loginBox>nav>div.current{
            font-weight: 900;
            color: #e4393c;
        }
        #loginBox>nav>span{
            position: absolute;
            width: 1px;
            height: 20px;
            background-color: #f4f4f4;
            top:50%;
            margin-top: -10px;
        }
        #loginBox>form{
            padding: 13px 20px;
        }
        #loginBox>form>p{
            margin-top: 20px;
            width: 306px;
            height: 40px;
            position: relative;

        }
        #loginBox>form>p>input{
            width: 306px;
            height: 40px;
            border: 1px solid #000;
            outline: none;
            box-sizing: border-box;
            padding-left: 45px;
        }
        #loginBox>form>p>label{
            width: 38px;
            height: 38px;
            position: absolute;
            background: url(./image/5.png) no-repeat 0 -48px;
            left: 1px;
            top:1px
        }
        #loginBox>form>p.password>label{
            background-position: -48px -48px;
        }
        #loginBox .forget_password{
            text-align: right;
        }
        #loginBox .submit{
            height: 34px;
        }
        #loginBox .submit button{
            width: 100%;
            height: 100%;
            color: #fff;
            background-color: #e4393c;
            border: 1px solid #e4393c;
            font-size: 20px;
            /* 字符间距 */
            letter-spacing: 20px;
            padding-left: 20px;
        }
        #loginBox>footer{
            height: 50px;
            line-height: 50px;
            background-color: #fcfcfc;
            border-top: 1px solid #f4f4f4;
            margin-top: 20px;
            padding: 0 20px;
        }
        #loginBox>footer .left em{
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url(./image/12.png) no-repeat -1px 0px;
            vertical-align: -4px;
        }
        #loginBox footer .left span{
            margin: 0 7px;
        }
        #loginBox .left .wechat em{
            background-position: -20px 0;
        }
        #loginBox footer .right em{
            display: inline-block;
            width: 16px;
            height: 16px;
            background:url(./image/5.png) no-repeat -104px -75px;
            vertical-align: -3px;
        }

        </style>
</head>
<body>
       <!-- 页面头部 -->
       <header>
        <div class="inner">
            <div class="logo left">
                <img src="./image/1.png" alt="">
                <img src="./image/2.png" class="welcome" alt="">
            </div>
            <a href="" class="right">
                <em></em>
                登录页面,调查问卷
            </a>
        </div>
    </header>
    <!-- 警告部分 -->
    <nav id="warn">
        <div class="inner">
           <em></em>
           依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版
            <a href="#" class="privacy">《京东隐私政策》</a>
            已上线,将更有利于保护您的个人隐私。
        </div>
    </nav>
    <!-- 主体内容 -->
    <main>
        <div class="inner">
            <div id="loginBox" class="right">
                <header>
                    京东不会以任何理由要求您转账汇款,谨防诈骗
                </header>
                <!-- 登录方式 -->
                <nav>
                    <div class="left">扫码登录</div>
                    <span></span>
                    <div class="right current">账号登录</div>
                </nav>
                <form action="">
                    <p class="username">
                        <label for="username"></label>
                        <input type="text" id="username" name="username">
                    </p>
                    <p class="password">
                        <label for="password"></label>
                        <input type="password" id="password" name="password">
                        <!-- <label>
                            用户名:<input type="text">
                        </label> -->
                    </p>
                    <p class="forget_password">
                        <a href="">忘记密码</a>
                    </p>
                    <p class="submit">
                       <button>登录</button>
                    </p>
                </form>
                <footer>
                    <div class="left">
                        <a href="#" class="qq">
                            <em></em>
                            QQ
                        </a>
                        <span>|</span>
                        <a href="#" class="wechat">
                            <em></em>
                            微信
                        </a>
                    </div>
                    <a href="" class="right">
                        <em></em>
                        立即注册                    
                    </a>
                </footer>
            </div>
        </div>
    </main>
    <!-- 页脚部分 -->
    <footer>
        <div class="inner">
            <p class="links">
                <a href="#">关于我们</a> |
                <a href="#">联系我们</a> |
                <a href="#">人才招聘</a> |
                <a href="#">商家入驻</a> |
                <a href="#">广告服务</a> |
                <a href="#">手机京东</a> |
                <a href="#">友情链接</a> |
                <a href="#">销售联盟</a> |
                <a href="#">京东社区</a> |
                <a href="#">京东公益</a> |
                <a href="#">English Site</a>
            </p>
            <p class="copy">
                Copyright © 2004-2022  京东JD.com 版权所有
            </p>
        </div>
    </footer>
</body>
</html>

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值