CSS其他属性:

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{
                text-decoration: none;
            }
            
            
            /*--------背景相关的------*/
            #d1{
                background-color: navajowhite;
                height: 300px;
                width: 800px;
                
                /*1.背景图
                 * 如果背景图大于盒子的大小，背景图能显示多少就显示多少
                 * 如果背景图小于盒子的大小，就会平铺（重复显示）
                */
                background-image: url(img/logo.png);
                
                /*2.是否平铺*
                 * 
                 */
                background-repeat: no-repeat;
                
                /*3.设置背景图的位置
                 * background-position:x  y;
                 * x: letf/center/right/坐标值
                 * y: top/center/bottom/坐标值
                 */
                /*background-position: 100px 100px ;*/
                background-position: center;
                
                /*4.同时设值
                 * background: 图片地址 是否重复 x y
                 * background: 图片地址 是否重复 x y 背景颜色
                 */
                background: url(img/icon.ico) no-repeat center top chartreuse;      
            }
                
            /*----------列表-----------*/
            li{
                background-color: saddlebrown;
                float: left;
                margin-right: 20px;
            }
            /*选择器为列表/li都可以*/
            ul{
                float: left;
                background-color: royalblue;
                /*1.设置符号样式
                 * disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)
                 */
                list-style-type:disc;
                
                /*2.设置图片的符号*/
                list-style-image: url(img/icon.ico);
                
                /*3.设置符号的位置
                 * outside(li标签的外边), inside(li标签的里面)
                 */
                list-style-position: outside;
                
            }

            /*--------文字相关----------*/
            p{
                /*1.文字大小*/
                font-size: 20px;
                
                /*2.文字颜色*/
                color: blueviolet;
                
                /*3.设置字体名*/
                font-family: "book antiqua";
                
                /*4.设置字体粗细*/
                /*取值:100-900,normal, bold,bolder*/
                font-weight:900;
                
                /*5.字体倾斜*/
                font-style: italic; 
                
                /*6.内容的对齐方式*/
                /*center,left,right*/
                text-align: left;
                
                background-color: yellow;
                /*7.设置行高
                 * 文字一行的高度（当文字只有一行的时候设置行高和标签的高度一样，可以让文字垂直居中）
                 */
                height: 500px;
                line-height: 40px;
                
                /*8.文字修饰*/
                /*
                 * none：去掉文字修饰
                 * underline: 添加下划线
                 * line-through: 添加删除线
                 * overline: 添加上划线
                 */
                text-decoration: underline;
                
                /*9.首行缩进
                 * 注意单位是em -- 空格
                 */
                text-indent: 4em;
                
                /*10.字间距*/
                letter-spacing: 1px;

            }

        </style>
    </head>
    <body>
        
        <div id="d1">
            <!--<img src="img/bg.png" style="width: 100%; height: 300px;"/>-->
        </div>
        
        <ul>
            <li id="l1">Python</li>
            <li><a href="">H5</a></li>
            <li>JAVA</li>
            <li>测试</li>
        </ul>
        
        <p>
            已矣乎！寓形宇内复几时？<br />曷不委心任去留？胡为乎遑遑欲何之？<br />富贵非吾愿，帝乡不可期。<br />怀良辰以孤往，或植杖而耘耔。<br />登东皋以舒啸，临清流而赋诗。<br />聊乘化以归尽，乐夫天命复奚疑！
        </p>
        
    </body>

京东登陆
jd.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东-欢迎登录</title>
    <link rel="stylesheet" href="./css/jd.css">
     <link rel="icon" href="img/ic.ico" > 
<!--    <link href="//www.baidu.com/img/baidu.svg" rel="icon" mask="" sizes="any">-->
</head>

<body>
    <div id="header">
        <div class="h-top">
            <div class="icon" id="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 id="h-bottom" class="h-bottom">
            <div class="h-inner">
                <img src="./img/warning.png">
                <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
            </div>
        </div>
    </div>
    <div id="content">
        <div id="loginBox">
            <form action="case.html">
                <img id="./img/qrImg" src="./img/qr.png">
                <h2>密码登录</h2>
                <div class="inputDiv"><img class="inputImg" src="./img/act.png"><input class="inputBox" type="text" placeholder="请输入用户名/手机号/邮箱">                    </div>
                <div class="inputDiv"><img class="inputImg" src="./img/pwd.png"><input type="password" class="inputBox" placeholder="请输入密码"></div>
                <div><input id="loginBtn" type="button" value="登 录"></div>
                <div id="wbLogin"><img class="lgImg" src="./img/wb.png"><span>微博登陆</span></div>
                <div id="zhiLogin"><img class="lgImg" src="./img/zhi.png"><span>支付宝登陆</span></div>
                <div id="otherSelect">
                    <a href="case.html">忘记密码</a>
                    <a href="case.html">忘记会员名</a>
                    <a href="case.html">免费注册</a>
                </div>
            </form>
        </div>
    </div>
    <div id="footer"> 
        <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>Copyright © 2004-2018  京东JD.com 版权所有 </p>
    </div>
</body>

</html>

jd.css:


/* =================0.commen================== */
* {
    margin: 0;
    padding: 0;
    position: relative;
}
a {
    text-decoration: none;
}
/* =================1.header================== */
#header {
    width: 100%;
    height: 103px;
    background-color: rgb(255,248,240)
}
#header .h-top {
    width: 100%;
    height: 80px;
    background-color: rgb(255,248,240)
}
#header .h-top .icon {
    height: 60px;
    position: absolute;
    /*  垂直居中*/
    left: 142px;
    top: 50%;
    line-height: 50px;
    margin-top: -30px;
}
#header .h-top a {
    /*布局*/
    position: absolute;
    right: 40px;
    bottom: 10px;
    /*字体*/
    font-size: 12px;
    color: rgba(154,154,154,1.00);
    /*背景图*/
    background: url(../img/q-icon.png) no-repeat;
    padding-left: 20px;
}
#header .h-top a:hover{
    color: red;
    text-decoration: underline;
}
#header .h-bottom {
    width: 100%;
    height: 23px;
    background-color: rgb(255,248,240);
}
#header .h-bottom div{
    margin: 0 auto;
    width: 1060px;
}
#header .h-bottom div img{
    float: left;
}
#header .h-bottom p {
    font-size: 13px;
    padding-top: 3px;
    color: rgb(121, 121, 121);
}
#header .h-bottom p a{
    color: rgb(121, 121, 121);
}
#header .h-bottom p a:hover{
    color: red;
    text-decoration: underline;
}
/* =================2.content================== */
#content {
    width: 100%;
    height: 598px;
    background:url(../img/bg.png) center no-repeat;
}

#content #loginBox {
    position: relative;
    top: 80px;
    margin-left: 65%;
    height: 400px;
    width: 360px;
    background-color: rgba(255, 255, 255, 0.83);
}

#content #qrImg {
    float: right;
}

#content h2 {
    float: left;
    margin-top: 30px;
    margin-left: 40px;
    margin-right: 18px;
}

#content .inputDiv {
    float: left;
    background-color: rgb(221, 221, 221);
    margin-top: 25px;
    margin-left: 12%;
    margin-right: 10%;
    width: 270px;
    height: 54px;
}

#content .inputBox {
    float: right;
    border: none;
    margin: 2px 2px 2px 0px;
    width: 220px;
    height: 48px;
    font-size: 16px;
}

#content .inputImg {
    margin: 14px 10px 0px 15px;
}

#content #loginBtn {
    border: none;
    border-radius: 8px;
    background-color: rgb(250, 82, 21);
    font-size: 18px;
    color: whitesmoke;
    margin-top: 25px;
    margin-left: 12%;
    width: 270px;
    height: 48px;
    cursor: pointer;
}

#content #loginBtn:hover{
    background-color: rgb(238, 55, 10)
}

#content #wbLogin {
    float: left;
    margin: 20px 10px 0px 11%;
}
#content #zhiLogin{
    margin: 20px 10px 0px 0px;
}
#content .lgImg{
    margin-bottom:-3px; 
}
#content span{
    margin-left:3px;
    font-size: 13px;
    color: grey;
}
#content #otherSelect a{
    text-decoration: none;
    font-size: 13px;
    color: grey;
    float: right;
    margin: 15px 10px 20px 0px;
}
#content #otherSelect{
    margin-right: 35px;
}
/* =================3.footer================== */
#footer {
    font-size: 15px;
    width: 100%;
    padding-top: 10px;
    height: 86px;
    text-align: center;
}
#footer a{
    margin:0px 8px 0px 5px; 
    text-decoration: none;
    color: rgb(87, 87, 87);
}
#footer a:hover{
    color: red;
    text-decoration: underline;
}
#footer p{
    padding-top: 18px;
    color: rgb(87, 87, 87);
}

最终效果

image.png

2018-08-16 day04 京东登录

2018-08-16 day04 京东登录

最终效果

相关阅读更多精彩内容

友情链接更多精彩内容