day24-京東登入

weixin_34253539發表於2018-08-16

其他簡單的CSS屬性：

<!DOCTYPE html>
<html>
    <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>
</html>

京東網頁：

  1. 主頁面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>京東登入</title>
        <!--小圖示-->
        <link rel="icon" href="img/favicon.ico"/>
        <link rel="stylesheet" type="text/css" href="css/content.css"/>
        <link rel="stylesheet" type="text/css" href="css/header.css"/>
        <link rel="stylesheet" type="text/css" href="css/footer.css"/>
    </head>
    <body>
        <!--header部分-->
        <div class="head_father">
            <div class="head_content">
                <a href=""><img src="img/logo.png"/></a>
                <span id="">歡迎登入</span>
                <div class="head_right">
                <img src="img/q-icon.png"/>
                <a href="">登入頁面，調查問卷</a>
                </div>
            </div>
        </div>
        <div class="head2">
            <div class="head2_content">
                <img src="img/warning.png"/>
                <span>
                    依據《網路安全法》，為保障您的賬戶安全和正常使用，請儘快完成手機號驗證！ 新版<a href="">《京東隱私政策》</a>已上線，將更有利於保護您的個人隱私。
                </span>
            </div>
        </div>
        <!--content部分-->
        <div class="log_father">
            <div class="login">
            <h2>密碼登入</h2>
            <img src="img/1.png" class="img1" />
            <div class="users">
                <img src="img/2.png" class="img2" />
                <input type="text" name="user" id="user" value="" placeholder="請輸入使用者名稱" />
            </div>
            <div class="pwd">
                <img src="img/3.png" class="img3" />
                <input type="password" name="password" id="password" value="" placeholder="請輸入密碼" />
            </div>
            <div class="logbutton">
                <input type="submit" name="log" id="log" value="登   錄" />
            </div>
            <div class="icon">
                <a href=""><img src="img/weibo.png" class="img4" /></a>
                <a href=""><img src="img/zhifubao.png" class="img5" /></a>
            </div>
            <div class="bottom">
                <a href="">忘記密碼</a>
                <a href="">忘記會員名</a>
                <a href="">免費註冊</a>
            </div>
            </div>
        </div>
        <!--footer部分-->
        <div class="footer_1">
            <a href="">關於我們</a>&nbsp;|&nbsp;
            <a href="">聯絡我們</a>&nbsp;|&nbsp;
            <a href="">人才招聘</a>&nbsp;|&nbsp;
            <a href="">商家入駐</a>&nbsp;|&nbsp;
            <a href="">廣告服務</a>&nbsp;|&nbsp;
            <a href="">手機京東</a>&nbsp;|&nbsp;
            <a href="">友情連結</a>&nbsp;|&nbsp;
            <a href="">銷售聯盟</a>&nbsp;|&nbsp;
            <a href="">京東社群</a>&nbsp;|&nbsp;
            <a href="">京東公益</a>&nbsp;|&nbsp;
            <a href="">English Site</a>
        </div>
        <div class="footer_2">
            <span>Copyright © 2004-2018  京東JD.com 版權所有</span>
        </div>
    </body>
</html>
  1. header.css
.head_father{
    width: 100%;
    height: 115px;
}
.head_content{
    height: 115px;
    width: 70%;
    margin: 0 auto;
}
.head_content img{
    position: absolute;
    height: 60px;
    margin-top: 28px;
    float: left;
}
.head_content span{
    /*float: left;*/
    font-size: 20px;
    position: absolute;
    font-size: 25px;
    margin-top: 50px;
    margin-left: 200px;
}
.head_right{
    width: 200px;
    height: 30px;
    float: right;
}
.head_right img{
    width: 20px;
    height: 15px;
    position: absolute;
    margin-top: 95px;
}
.head_right a{
    position: absolute;
    margin-top: 90px;
    margin-left: 25px;
    text-decoration: none;
}
.head_right a:hover{
    text-decoration: underline;
    color: red;
}
.head2{
    background-color: #FFF8F0;
    width: 100%;
    height: 40px;
}
.head2_content{
    width: 1050px;
    margin: 0 auto;
}
.head2_content img{
    position: absolute;
    margin-top: 10px;
}
.head2_content span{
    position: absolute;
    margin-top: 10px;
    margin-left: 30px;
    color: lightslategray;
}
.head2_content span a{
    text-decoration: none;
    color: red;
}
.head2_content span a:hover{
    text-decoration: underline;
}
  1. content.css
*{
                margin: 0px;
                padding: 0px;
            }
            /*body{
                background: url(../img/background.jpg) no-repeat;
                background-position: center;
                background-attachment: fixed;
            }*/
            .log_father{
                height: 600px;
                background: url(../img/background.jpg) no-repeat center;
                position: relative;
            }
            .login{
                height: 500px;
                width: 500px;
                background-color: rgb(233,233,242);
                position: absolute;
                left: 50%;
                margin-left:200px ;
                top: 50%;
                margin-top:-250px ;
            }
            h2{
                margin-left: 30px;
                margin-top: 40px;
                float: left;
            }
            .img1{
                float: right;
            }
            .users{
                position: absolute;
                float: left;
                left: 50%;
                margin-left: -182px;
                margin-top: 110px;
            }
            .img2{
                float: left;
            }
            #user{
                height: 60px;
                width: 300px;
                font-size: 20px;
                border: none;
            }
            
            .pwd{
                position: absolute;
                left: 50%;
                margin-left: -182px;
                margin-top: 210px;
            }
            .img3{
                float: left;
            }
            #password{
                height: 58px;
                width: 300px;
                font-size: 20px;
                border: none;
            }
            
            .logbutton{
                position: absolute;
                left: 50%;
                margin-left: -182px;
                margin-top: 310px;
            }
            #log{
                width: 360px;
                height: 55px;
                border: none;
                cursor: pointer;
                color: white;
                font-size: 20px;
                background-color: red;
            }
            #log:hover{
                background-color: royalblue;
            }
            
            .icon{
                position: absolute;
                left: 50%;
                margin-left: -182px;
                margin-top: 410px;
                width: 200px;
            }
            .img5{
                float: right;
            }
            
            .bottom{
                position: absolute;
                left: 50%;
                margin-left: -32px;
                margin-top: 450px;
                width: 300px;
            }
            .bottom a{
                float: left;
                padding-right: 20px; 
                font-size: 13px;
                text-decoration: none;
            }
  1. footer.css
.footer_1{
    text-align: center;
    padding-top:10px ;
}
.footer_1 a{
    text-decoration: none;
    color: black;
    font-size: 15px;
}
.footer_1 a:hover{
    text-decoration: underline;
    color: red;
}
.footer_2{
    text-align: center;
    padding-top:20px ;
    font-size: 13px;
}

網頁效果：


13183156-697537d291d9ea5d.png
1.png

相關文章