Day_4-京东登录

京东购物车代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>京东-欢迎登录</title>
        <!--设置图标-->
        <link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
        <!--通用样式-->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
        
    </head>
    <body>
        
        <!--1.====================网页顶部样式=======================-->
        <style type="text/css">
            .top{
                /*background-color: hotpink;*/
                height: 120px;  
            }
            /*========logo==========*/
            .top .logo{
                /*background-color: wheat;*/
                height: 80px;
                
                position: relative;
            }
            .top .logo div{
                /*定位*/
                position: absolute;
                left: 185px;
                /*在父标签上垂直方向居中*/
                top:50%;
                margin-top: -30px;
            }
            .top .logo .a2{ 
                /*定位*/
                position: absolute;
                right: 185px;
                bottom: 10px;
                
                /*字体*/
                font-size: 12px;
                color: rgb(142,142,142);
                text-decoration: none;
                
                /*背景*/
                background: url(img/q-icon.png) no-repeat 0 center #ffffff;
                padding-left: 20px;
            }
            /*鼠标悬停*/
            .top .logo .a2:hover{
                color: rgb(216,36,50);
                text-decoration: underline;
            }
            
            /*========message=========*/
            .top .message{
                background-color: rgb(255,246,236);
                height: 40px;
                
                /*子标签水平方向居中*/
                text-align: center;
                /*子标签垂直方向居中*/
                line-height: 40px;
            }
            .top .message p{
                /*字体*/
                font-size: 12px;
                color: rgb(142,142,142);
                        
                /*背景*/
                background: url(img/xx.png) no-repeat 212px center raba(0,0,0,0);
                
            }
            .top .message a{
                /*字体*/
                color: rgb(50,50,50);
                text-decoration: none;
            }
            .top .message a:hover{
                text-decoration: underline;
            }
            
            
        </style>
        <!--1.====================网页顶部=======================-->
        <div class="top">
            <!--顶部的顶部-->
            <div class="logo">
                <div>
                    <a class="a1" href=""><img src="img/logo.png"/></a>
                    <img src="img/l-icon.png"/>
                </div>
                <a class="a2" href="">
                    登录页面,调查问卷

                </a>
            </div>
            <!--顶部的底部-->
            <div class="message">
                <p>
                    依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证!
                     新版<a href="">《京东隐私政策》</a>已上线,将更有利于保护您的个人隐私。

                </p>
            </div>
        </div>
        
        <!--2.======================网页内容样式=============================-->
        <style type="text/css">
            .content{
                background-color: rgb(81,158,220);
                height: 475px;
                position: relative;
            }
        
            .content .bg_img{
                position: absolute;
                top: 50%;
                margin-top: -237px;
                
                left: 100px;
            }
            /*登录框*/
            .content .login_div{
                background-color: white;
                width: 350px;
                height: 400px;
                
                /*定位*/
                position: absolute;
                top: 10px;
                right:185px;
            }
            /*顶部*/
            .content .login_div .div1{
                background-color: rgb(255,246,236)
                height: 40px;
                /*居中*/
                text-align: center;
                line-height: 40px;
            }
            .content .login_div .div1 font{
                font-size: 12px;
                color: rgb(142,142,142);
                /*背景*/
                background: url(img/xx.png) no-repeat 0 center rgba(0,0,0,0);
                padding: 20px;
            }
            /*中间*/
            .content .login_div .div2{
                /*background-color: lightblue;*/
                height: 310px;
            }
            .content .login_div .div2 .btn{
                height: 55px;
                background-color: white;
                color: #dddddd;
                font-weight: 100;
            }
            .content .login_div .div2 .btn button{
                width: 170px;
                height: 100%;
                background-color: rgba(0,0,0,0);
                border: none;
                font-size: 20px;
                color: rgb(83,83,83);
            }
            /*鼠标悬停状态*/
            .content .login_div .div2 .btn button:hover{
                color: rgb(217,48,60);
            }
            /*成为焦点的状态*/
            .content .login_div .div2 .btn button:focus{
                outline: none;
                
            }
            /*输入*/
            .content .login_div .div2 .input{
                height: 255px;
                
                border-top: 1px solid #DDDDDD;
                border-bottom: 1px solid #DDDDDD;
                
                position: relative;
            }
            /*输入框*/
            .content .login_div .div2 .input div{
                width: 310px;
                height: 40px;
                border: 1px solid #999999;
                margin: 20px;
            
            }
            .content .login_div .div2 .input .un_div{
                margin-top: 40px;
                
            }
            /*输入框*/
            .content .login_div .div2 .input div input{
                height: 100%;
                width: 250px;
                vertical-align: top;
                border: none;
                
                font-size: 15px;
                
            }
            .content .login_div .div2 .input div input:focus{
                outline: none;
            }
            
            /*图标*/
            .content .login_div .div2 .input div img{
                height: 100%;
                width: 40px;
                
                border-right: 1px solid #999999;
            }
            
            
            
            /*忘记密码*/
            .content .login_div .div2 .input a{
                position: absolute;
                right: 20px;
                
                font-size: 13px;
                color: rgb(53,53,53);
                text-decoration: none;
            }
            .content .login_div .div2 .input a:hover{
                color: rgb(217,48,60);
                text-decoration: underline;
                
            }
            /*登录按钮*/
            .content .login_div .div2 .input .lg_btn{
                width: 310px;
                height: 35px;
                /*定位*/
                position: absolute;
                bottom: 30px;
                left: 20px;
                
                font-size: 20px;
                /*设置背景颜色*/
                background-color: red;
                /*设置内容颜色*/
                color: white;
            }
            /*取消焦点状态*/
            .content .login_div .div2 .input .lg_btn:focus{
                outline: none;
            }
            
            
            
            /*底部*/
            .content .login_div .div3{
                height: 50px;
                
            }
            .content .login_div .div3 ul{
                list-style-type: none;  
                
            }
            /*左边*/
            .content .login_div .div3 .bt_1 li{
                float: left;
                line-height: 50px;
                padding-left: 20px;
                font-size: 14px;
            }
            /*QQ*/
            .content .login_div .div3 .bt_1 .bt_qq{
                /*背景*/
                background: url(img/qq.png) no-repeat 0 center rgba(0,0,0,0);
                padding-left: 25px;
                /*去掉下划线*/
                text-decoration: none;
                color: black;
                padding-right: 20px;
                border-right: 1px solid gray;
            }
            .content .login_div .div3 .bt_1 .bt_qq:hover{
                color: red;
                text-decoration: underline;
            }
            /*微信*/
            .content .login_div .div3 .bt_1 .bt_wx{
                /*背景*/
                background: url(img/weixin.png) no-repeat 0 center rgba(0,0,0,0);
                padding-left: 25px;
                /*去掉下划线*/
                text-decoration: none;
                color: black;
            }
            .content .login_div .div3 .bt_1 .bt_wx:hover{
                color: red;
                text-decoration: underline;
            }
            /*右边*/
            .content .login_div .div3 .bt_2 a{
                float: right;
                /*垂直居中*/
                line-height: 50px;
                margin-right: 20px;
                
                /*背景*/
                background: url(img/right.png) no-repeat 0 center rgba(0,0,0,0);
                padding-left: 25px;
                color: red;
                
                /*去掉下划线*/
                text-decoration: none;
                font-size: 18px;
            }
            .content .login_div .div3 .bt_2 a:hover{
                color: gray;
                text-decoration: underline;
            }
            
        </style>
        <!--2.======================网页内容=====================-->
        <div class="content">
            <img class="bg_img" src="img/bg2.png"/>
            <!--登录框-->
            <div class="login_div" id="">
                <!--顶部-->
                <div class="div1">
                    <font>
                        京东不会以任何理由要求您转账汇款,谨防诈骗。
                    </font>
                </div>
                <!--中间-->
                <div class="div2">
                    <div class="btn">
                        <button class="btn1">
                            扫码登录
                        </button>|
                        <button class="btn2">
                            账号登录
                        </button>
                    </div>
                    <!--输入框-->
                    <div class="input">
                        <form action="#">
                            <div class="un_div">
                                <label for="username"><img src="img/pygame.png"/></label>
                                <input placeholder="邮箱/用户名/已验证手机" type="text" name="username" id="username" value="" />
                            </div>
                            <div class="pw_div">
                                <label for="password"><img src="img/password_icon.png"/></label>
                                <input placeholder="密码" type="password" name="password" id="password" value="" />
                                
                            </div>
                            <a href="">忘记密码</a>
                            <input class="lg_btn" type="submit" value="登&emsp;录"/>
                        </form>
                    </div>
                    
                </div>
                <!--底部-->
                <div class="div3">
                    <ul class="bt_1">
                        <li><a class="bt_qq" href="">QQ</a></li>
                        <li><a class="bt_wx" href="">微信</a></li>
                    </ul>
                    <ul class="bt_2">
                        <li><a href="">立即注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!--3.=====================网页底部样式=====================-->
        <style type="text/css">
            .bottom{
                background-color: darkgray;
                height: 110px;
            }
            .bottom .bo_div1{
                background-color: white;
                height: 70px;
                /*水平方向居中*/
                text-align: center;
                /*竖直方向居中*/
                line-height: 70px;
                font-size: 12px;
                color: gray;
            }
            /*所有链接*/
            .bottom .bo_div1 a{
                text-decoration: none;
                color: black;
                font-size: 15px;
                padding-right: 10px;
                padding-left: 10px;
            }
            .bottom .bo_div1 a:hover{
                color: red;
                text-decoration: underline;
            }
            
            
            /*底部的底部文字*/
            .bottom .bo_div2{
                background-color: white;
                height: 40px;
                /*内容水平居中*/
                text-align: center;
                /*内容垂直居中*/
                line-height: 40px;
                font-size: 12px;
            }
        </style>
        <!--3.======================网页底部========================-->
        <div class="bottom">
            <div class="bo_div1">
                <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&nbsp;Site</a>
            </div>
            <div class="bo_div2">
                <font>
                    Copyright © 2004-2019  京东JD.com 版权所有
                </font>
            </div>
        </div>
    </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342