美文网首页
京东登录页面

京东登录页面

作者: 蘑菇plus | 来源:发表于2018-08-18 11:01 被阅读0次

CSS其他一些简单属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{
                
            }
            /*背景相关*/
            #d1{
                height: 300px;
                /*1.背景图*/
                /*如果背景图大于盒子的大小,背景图能显示多少就显示多少
                如果背景图小于盒子的大小,就会平铺(重复显示)*/
                background-image: url(img/bg.png);
                /*2.是否平铺*/
                background-repeat: no-repeat;/*不平铺*/
                /*3.背景图固定*/
                /*4.设置背景图的位置*/
                /*background-position: x y;
                x:left/center/right/坐标值;
                y:top/center/bottom/坐标值;*/
                
                background-position: center;
                
                5.同时设置
                background: url(img/bg.png) no-repeat center top char;
                
            }
            ul{
                
                /*列表*/
                /*1.设置符号样式
                disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号);*/
                list-style-type: disc;
                font-size: 30px;
                float: left;
                margin-right: 20px;
                
                2.设置图片符号
                
                list-style-image:url()
            }
            p{  
                /*文字相关*/
                /*1.设置字体大小*/
                font-size: 50px;
                /*2.设置字体颜色*/
                color: plum;
                /*3.设置字体名*/
                font-family:"book antiqua";
                /*4.设置字体粗细  100-900;*/
                font-weight: 700;
                /*5.字体倾斜*/
                /*font-style: italic;*/
                /*6.内容居中*/
                text-align: center;
                /*7.设置行高*/
                background-color: lightseagreen;
                height: 600px;
                /*文字一行的高度(当文字只有一行时,设置行高和标签的高度一样,可以让文字垂直居中)*/
                line-height: 80px;          
                /*8.文字修饰*/
                /*none:去掉文字修饰;
                underline:添加下划线;
                line-through:添加删除线 ;
                overline: 添加上划线;*/
                text-decoration: underline;
                9.首行缩进
                text-indent: 4em;
                /*10.字间距*/
                letter-spacing: 1px;
                
                
            }
        </style>
    </head>
    <body>
        <p>二十四桥明月夜<br>
        昨夜西风凋碧树</p>
        <a href="">
        </a>
        <ul>
            <li>王国维</li>
            <li>王阳明</li>
        </ul>
        <div id="d1">
            <!--<img src="img/bg.png" style="width: 100px; height: 300px;"/>-->
        </div>
    </body>
</html>

京东HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>京东-欢迎登录</title>
        <!--设置网页图标-->
            <!--rel:icon(设置图标)
                type:文件类型 image/图片类型 image/图片类型(png,ico,x-icon)
            -->
        <link rel="icon" type="image/x-icon" href="img/icon.ico"/>
        <link rel="stylesheet" type="text/css" href="css/JD.css"/>
        
    </head>
    <body>
        <!-----------顶部-------------->
        <div id="header">
            <div class="h-top">
                <!--图标-->
                <div  class="icon">
                    <img src="img/logo.png"/>
                    <img src="img/l-icon.png"/>
                </div>
                <!--问卷-->
                <a href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans">登录页面,调查问卷</a>
            </div>
            <div  class="h-bottom">
                <div id="">
                    <img src="img/warning.png"/>
                    <p >依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="https://about.jd.com/privacy/" target="_blank">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
                </div>
                
            </div>
        </div>
        <!-----------中间部分----------->
        <div id="content">
            <div class="input_div">
                <div class="info-top">
                    <div class="top-top">
                        <img src="img/warning.png"/>
                        <p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
                    </div>
                    <div class="top-bottom">
                        <button>扫码登录</button>|
                        <button>账号登录</button>
                    </div>
                </div>
                    <hr color="#E0E0E0"></hr>
                    <div class="info-middle">
                        <div class="username">
                            <img src="img/pygame.png"/>
                            <input type="text" name="uaername" id="" value="" placeholder="邮箱/用户名/已验证手机" />
                        </div>
                        <div class="password">
                            <img src="img/password_icon.png"/>
                            <input type="password" name="password" id="" value="" placeholder="密码" />
                        </div>
                        <!--忘记密码-->
                        <a href="https://safe.jd.com/findPwd/index.action">忘记密码</a>
                        <input type="button" name="" class="log-in" value="登&nbsp;&nbsp;&nbsp;&nbsp录" />    
                    </div>
                <hr color="#E0E0E0"></hr>
                <div class="info-bottom">
                <!--QQ登录 微信登录-->
                    <a class="a2" href="">QQ</a>
                    <span class="sp1">|</span>
                    <a class="a4" href="">微信</a>
                    <a class="a6" href="https://reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com" target="_blank">立即注册</a>
                </div>
            </div>
            </div>
        </div>
        <!------------底部-------------->
        <div id="footer">
            <a href="">关于我们</a>&nbsp;&nbsp;
            <span>|</span>
            &nbsp;&nbsp;<a href="">联系我们</a>&nbsp;&nbsp;
            <span>|</span>
            &nbsp;&nbsp;<a href="">人才招聘</a>&nbsp;&nbsp;
            <span>|</span>
            &nbsp;&nbsp;<a href="">商家入驻</a>&nbsp;&nbsp;
            <span>|</span>
            &nbsp;&nbsp;<a href="">广告服务</a>&nbsp;&nbsp;
            <span>|</span>
            &nbsp;&nbsp;<a href="">手机京东</a>&nbsp;&nbsp;
            <span>|</span>
            &nbsp;&nbsp;<a href="">友情链接</a>&nbsp;&nbsp;
            <span>|</span>
            &nbsp;&nbsp;<a href="">销售联盟</a>&nbsp;&nbsp;
            <span>|</span>
            &nbsp;&nbsp;<a href="">京东社区</a>&nbsp;&nbsp;
            <span>|</span>
            &nbsp;&nbsp;<a href="">京东公益</a>&nbsp;&nbsp;
            <span>|</span>
            &nbsp;&nbsp;<a href="">English Site</a>
            <p>Copyright © 2004-2018  京东JD.com 版权所有</p>
        </div>
    </body>
</html>

京东CSS

*{
    margin: 0;
    padding: 0;
    position: relative;
}
a{
    text-decoration: none;
}
/*head*/
#header{
    width: 100%;
    height: 120px;
    background-color: red;
}

#header .h-top{
    width: 100%;
    height: 80px;
    background-color: white;
}
#header .h-top .icon{
    position: absolute;
    left: 142px;
    /*垂直居中*/
    height: 60px;
    top: 50%;
    line-height: 60px;
    margin:-30px 0 0 0 ;
}
#header .h-top a{
    /*布局*/
    position: absolute;
    right: 35px;
    bottom: 10px;
    
    font-size: 12px;
    color: rgb(153,153,153);
    
    background: url(../img/q-icon.png) no-repeat 0 center ;
    padding-left: 20px;
}
#header .h-top a:hover{
    color: red;
    text-decoration: underline;
}

#header .h-bottom{
    width: 100%;
    height: 40px;
    background-color: rgb(255,248,240);
    text-align: center;
}
#header .h-bottom div,.top-top{
    /*background-color: chartreuse;*/
    display: inline;
    
}
/*用图片标签做*/
#header .h-bottom div p,.top-top p{
    font-size: 12px;
    color: rgb(153,153,153);
    
    display: inline;
}
#header .h-bottom div img,.top-top img{
    top: 8px;
}
/*用背景图的时候*/
/*#header .h-bottom p{
    text-align: center;
    line-height: 40px;
    height: 40px;
    
    color: rgb(153,153,153);
    font-size: 12px;
    
    background: url(../img/warning.png) no-repeat 358px center;
}
#header .h-bottom p a{
    color: rgb(40,40,40);
}
#header .h-bottom p a:hover{
    text-decoration: underline;
}*/
/*content*/
#content{
    width: 100%;
    height: 514px;
     
    background: url(../img/bg2.png) no-repeat 23% center;
    background-color:rgb(11,142,212);
}
#content .input_div{
    width: 344px;
    height: 438px;
    background-color: white;
    position: absolute;
    right: 160px;
    top: 10px;
}
/*登录框的顶部*/
#content .input_div .info-top{
    height: 100px;
    background-color: rgb(255,248,240);
    
    text-align: center;
}
#content .input_div .info-top .top-bottom{
    height: 55px;
    width: 100%;
    background-color:white;
    
    position: absolute;
    bottom: 0px;
    /*设置竖线颜色*/
    color:rgb(200,200,200);
    /*设置分割线*/
    border-bottom: 1px 
}
#content .input_div .info-top .top-bottom button{
    width: 160px;
    height: 55px;   
    /*去掉按钮的边框和背景*/
    border: 0;
    background-color:rgba(0,0,0,0);
    font-size:20px;
    color: rgb(53,53,53);
}
#content .input_div .info-top .top-bottom button:hover{
    color: red;
}
#content .input_div .info-top .top-bottom button:focus{
    color: red;
    /*按钮和输入框成为焦点后默认的边框,是outline*/
    outline: none;
}
/*按钮和输入框成为焦点后默认的边框*/




/*登录框的中部*/
#content .input_div .info-middle{
    height: 288px;
    background-color: white;
}
/*用户名和密码输入*/
#content .input_div .info-middle .username, #content .input_div .info-middle .password{
    background-color: white;
    width:auto;
    height: 40px;
    
    position: absolute;
    left: 20px;
    right: 20px;
    top: 40px;
    border: 1px solid rgb(180,180,180);
}
#content .input_div .info-middle .password{
    top: 110px;
}
#content .input_div .info-middle img{
    float: left;
    height: 100%;
    border-right: 1px solid rgb(180,180,180);
}
#content .input_div .info-middle input{
    border: 0; 
    float: left;
    
    height: 100%;
    width: 80%;
    padding-left: 15px;
}
/*设置成为焦点的时候的状态*/
#content .input_div .info-middle input:focus{
    outline: none;
}

#content .input_div .info-middle a:hover{
    color: red;
    text-decoration: underline;
        }
#content .input_div .info-middle a{
    font-size: 12px;
    position: absolute;
    right: 20px;
    bottom: 95px;
}
#content .input_div .info-middle .log-in{
    color: white;
    font-size: 20px;
    border: 1px solid rgb(180,180,180);
    background-color: #E4393C;
    width: 304px;
    height: 40px;
    
    position: absolute;
    left: 20px;
    bottom: 35px;
    
/*QQ,微信*/   
#content .input_div .info-bottom{
    height: 50px;
    width: 100%;
    background-color:white;
    
    position: absolute;
    bottom: 0px;
    /*设置竖线颜色*/
    color:rgb(200,200,200);
    /*设置分割线*/
    border-bottom: 1px 
}   
}

#content .input_div .info-bottom .a2{
    float: left;
    top: 17px;
    left: 20px;
    background: url(../img/qq.png) no-repeat 0 center;
    font-size: 12px;
    line-height: 20px;
    border: 0;
    padding-left: 25px;
}
#content .input_div .info-bottom .a4{
    float: left;
    top: 18px;
    left: 30px;
    background:url(../img/weixin.png) no-repeat 0 center;
    font-size: 12px;
    line-height: 20px;
    padding-left: 25px;
}

#content .input_div .info-bottom .a6{
    float: left;
    position: absolute;
    top: 18px;
    right:20px;
    padding-left: 25px;
    background:url(../img/right.png) no-repeat 0 center;
    font-size: 15px;
    line-height: 20px;
}
#content .input_div .info-bottom .sp1{
    float: left;
    position: absolute;
    top: 14px;
    left:70px;
    color:rgb(180,180,180) ;
    border: 1px;
    
}
#content .input_div .info-bottom .a4:hover{
    color: red;
    text-decoration: underline;
}
#content .input_div .info-bottom .a6:hover{
    color: red;
    text-decoration: underline;
}
#content .input_div .info-bottom .a2:hover{
    color: red;
    text-decoration: underline;
}
/*登录框的底部*/
#content .input_div .info-bottom{
    height: 50px;
}
/*footer*/  

#footer{
    padding-top: 18px;
    width: 100%;
    height:86px ;
    background-color: white;
    font-size: 14px;
    color: rgb(180,180,180);
    text-align: center;
    
}
#footer a{
    font-size: 14px;
    color: rgb(180,180,180);
    
}
#footer p{
    padding-top: 12px;
}
#footer a:hover{
    color: red;
    text-decoration: underline;
        
}
image.png

相关文章

网友评论

      本文标题：京东登录页面

      本文链接：https://www.haomeiwen.com/subject/wctfiftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|京东登录页面|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！