day32-京東登錄頁

實現(xiàn)了點不同的登錄方式顯示不同的登錄畫面，使用了一點js剂娄，感興趣的可以看看怎么使用的
添加了一個遮蓋層的方式窘问，后期也是很有用的，感興趣的可以看看怎么寫的
代碼如下：

/*--- jd.css ---*/
/*=============0.通用=============*/
* {
    margin: 0;
    padding: 0;
    position: relative;
}

a {
    text-decoration: none;  
}


/*=============1.header===========*/
#header {
    width: 100%;
    height: 120px;
    /*background-color: red;*/
}
#header .h-top{
    width: 100%;
    height: 80px;
    /*background-color: hotpink;*/
}
#header .h-top .icon {
    position: absolute;
    left: 142px;
    height: 60px;
    top: 50%;
    line-height: 60px;
    margin: -30px 0 0 0;
}
#header .h-top .a1 {
    /*布局*/
    position: absolute;
    right: 40px;
    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 {
    text-decoration: underline;
    color: red;
}
#header .h-bottom{
    width: 100%;
    height: 40px;
    background-color: rgb(255,248,240);
    color: rgb(153,153,153);
    text-align: center;
}
#header .h-bottom img {
    top: 7.5px;
    margin-right: 5px;
}
#header .h-bottom p {
    font-size: 12px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
}

/*=============2.content==========*/
#content {
    width: 100%;
    height: 514px;
    background: url(../img/zjm.png) no-repeat 20% center;
    background-color: rgb(11,142,212);
}
#content .iuput_div {
    position: absolute;
    width: 360px;
    height: 438px;
    background-color: white;
    right: 160px;
    top: 10px;
}
#content .iuput_div .info-top {
    height: 100px;
    text-align: center;
}
#content .iuput_div .info-top .top-top{
    height: 40px;
    background-color: rgb(255,248,240);
    text-align: center;
}
#content .iuput_div .info-top .top-top p {
    font-size: 12px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    color: rgb(153,153,153);
}
#content .iuput_div .info-top .top-top img {
top: 7.5px;
}
#content .iuput_div .info-top .top-bottom{
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid rgb(240,240,240);
}
#content .iuput_div .info-top .top-bottom button {
    border: 0;
    width: 160px;
    height: 60px;
    font-size: 25px;
    text-align: center;
    background-color: white;
}
#content .iuput_div .info-top .top-bottom button:hover {
    outline: none;
    color: red;
    font-weight: bolder;
}
#content .iuput_div .info-top .top-bottom button:focus {
    outline: none;
    color: red;
    font-weight: bolder;
}
#content .iuput_div .info-middle1, #content .iuput_div .info-middle2 {
    height: 288px;
    text-align: center;
}
/*=============賬號登錄==============*/
#content .iuput_div .info-middle1 .username, #content .iuput_div .info-middle1 .password {
    height: 40px;
    width: auto;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 40px;
}
#content .iuput_div .info-middle1 .password {
    top: 110px;
}
#content .iuput_div .info-middle1 img{
    float: left;
    height: 100%;
    border: 1px solid rgb(200,200,200);
}
#content .iuput_div .info-middle1 input{
    border: 0;
    float: left;
    height: 100%;
    width: 84.5%;
    padding-left: 5px;
    font-size: 20px;
    border-bottom: 1px solid rgb(200,200,200);
    border-top: 1px solid rgb(200,200,200);
    border-right: 1px solid rgb(200,200,200);
}
#content .iuput_div .info-middle1 a {
    position: absolute;
    top: 180px;
    right: 20px;
    font-size: 12px;
    color: rgb(120,120,120);
}
#content .iuput_div .info-middle1 a:hover {
    color: red;
    text-decoration: underline;
}
#content .iuput_div .info-middle1 button{
    border: 0;
    background-color: red;
    color: white;
    font-size: 20px;
    left: 20px;
    right: 20px;
    width: 88%;
    height: 40px;
    position: absolute;
    bottom: 25px;
}
/*=============掃碼登錄==============*/
#content .iuput_div .info-middle2 .erwei{
    top: 30px;
    height: 175px;
}
#content .iuput_div .info-middle2 .message{
    font-size: 10px;
    height: 20px;
    top: 30px;
}
#content .iuput_div .info-middle2 .td{
    top: 40px;
    height: 35px;
}
#content .iuput_div .info-bottom {
    height: 50px;
    border-top: 1px solid rgb(240,240,240);
    line-height: 50px;
}
#content .iuput_div .info-bottom .left-bottom {
    position: absolute;
    left: 20px;
    float: left;
}
#content .iuput_div .info-bottom .left-bottom img {
    float: left;
    top: 12.5px;
}
#content .iuput_div .info-bottom .left-bottom p {
    display: inline-block;
    font-family: "arial narrow";
    padding-left: 3px;
    padding-right: 6px;
    float: left;
}
#content .iuput_div .info-bottom .left-bottom a {
    color: black;
}
#content .iuput_div .info-bottom .left-bottom a:hover {
    text-decoration: underline;
    color: red;
}
#content .iuput_div .info-bottom .left-bottom font {
    float: left;
    padding-right: 10px;
}
#content .iuput_div .info-bottom .right-bottom {
    position: absolute;
    right: 20px;
    float: left;
}
#content .iuput_div .info-bottom .right-bottom img {
    float: left;
    top: 12.5px;
}
#content .iuput_div .info-bottom .right-bottom p {
    display: inline-block;
    font-size: 18px;
    color: red;
    padding-left: 3px;
    padding-right: 5px;
    float: left;
}
#content .iuput_div .info-bottom .right-bottom a {
    color: red;
}
#content .iuput_div .info-bottom .right-bottom a:hover {
    text-decoration: underline;
}
/*=============3.footer============*/
#footer {
    width: 100%;
    height: 86px;
    text-align: center;
}
#footer p {
    font-size: 12px;
    margin-top: 15px;
    color: rgb(80,80,80);
}
#footer a {
    font-size: 12px;
    color: rgb(80,80,80);
    text-decoration: none;
    margin-left: 15px;
    margin-right: 15px;
}
#footer a:hover {
    color: red;
    text-decoration: underline;
}

/*==============4.懸浮窗===========*/
.xf {
    text-align: center;
    font-size: 12px;
    color: white;
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 90px;
    height: 40px;
    line-height: 40px;
    background-color: darkred;
    border-radius: 10px;
    z-index: 2;
}

/* --- jdjm.html --- */
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>京東-歡迎登陸</title>
        <!-- 設(shè)置網(wǎng)頁圖標(biāo)
            rel：icon（設(shè)置圖標(biāo)）
            type：文件類型 image/圖片類型
        -->
        <link rel="icon" type="image/icon" href="img/icon.ico"/>
        <link rel="stylesheet" type="text/css" href="css/jd.css"/>
        <script type="text/javascript">
            function zhegai(){
                document.getElementById("yc").style.display = "block"
            }
            
            function huihuan(){
                document.getElementById("yc").style.display = "none"
            }
            function sm(){
                document.getElementById("m1").style.display = "none"
                document.getElementById("m2").style.display = "block"
                
            }
            function zh(){
                document.getElementById("m1").style.display = "block"
                document.getElementById("m2").style.display = "none"
            }
            function sjk(){
                document.getElementById("sj").style.display = "inline"
            }
            function sjg(){
                document.getElementById("sj").style.display = "none"
            }
        </script>
    </head>
    <body>
        <div style="position:relative; width: 100%;">
            <div id="yc" style="position: absolute; z-index: 999; width: 100%; height: 720px; background-color: rgba(160,160,160,0.5); display: none;">
                <img src="img/warning.png" style="position: absolute; top: 10px; right: 10px;" onclick="huihuan()"/>
            </div>
            <div style="position: absolute; z-index: 1; width: 100%;">
                <!--=====1.頂部=====-->
                <div id="header">
                    <div class="h-top">
                        <!-- 頂部圖標(biāo) -->
                        <div class="icon">
                            <a ><img src="img/logo.png" /></a>
                            <img src="img/l-icon.png" />
                        </div>
                        <!--問卷-->
                        <a class="a1" >登錄頁面宜咒，調(diào)查問卷</a>
                    </div>
                    <div class="h-bottom">
                        <img src="img/warning.png" /><p>依據(jù)《網(wǎng)絡(luò)安全法》惠赫，為保障您的賬戶安全和正常使用，請盡快完成手機號驗證故黑！ 新版《京東隱私政策》已上線儿咱，將更有利于保護您的個人隱私庭砍。</p>
                    </div>
                </div>
                <!--=====2.中間內(nèi)容=====-->
                <div id="content">
                    <div class="iuput_div">
                        <div class="info-top">
                            <div class="top-top">
                                <img src="img/warning.png" />
                                <p>京東不會以任何理由要求您轉(zhuǎn)賬匯款，謹(jǐn)防詐騙混埠。</p>
                            </div>
                            <div class="top-bottom">
                                <button onfocus="sm()">掃碼登錄</button>&nbsp;<font style="color: rgb(230,230,230);">|</font>
                                <button onfocus="zh()">賬戶登錄</button>
                            </div>
                        </div>
                        <div class="info-middle1" id="m1" style="display: block;">
                            <div class="username">
                                <img src="img/pygame.png"/>
                                <input type="text" name="username" id="username" placeholder="郵箱/用戶名/已驗證手機" />
                            </div>
                            <div class="password">
                                <img src="img/password_icon.png"/>
                                <input type="password" name="password" id="password" placeholder="密碼" />
                            </div>
                            <a >忘記密碼</a>
                            <button>登&nbsp;&nbsp;錄</button>
                        </div>
                        <div class="info-middle2" id="m2" style="display: none;">
                            <div class="erwei">
                                <img src="img/二維碼.png" onmouseover="sjk()" onmouseout="sjg()"/>
                                <img id="sj" src="img/sj.png" style="display: none;"/>
                            </div>
                            <div class="message">
                                打開<font style="color: red;">手機京東</font>&nbsp;&nbsp;&nbsp;掃碼二維碼
                            </div>
                            <div class="td">
                                <img src="img/tb_看圖王.png" />
                            </div>
                        </div>
                        <div class="info-bottom">
                            <div class="left-bottom">
                                <img src="img/qq.png"/><p><a >QQ</a></p>
                                <font style="color: rgb(200,200,200);">|</font>
                                <img src="img/weixin.png"/><p><a >微信</a></p>
                            </div>
                            <div class="right-bottom">
                                <img src="img/right.png"/><p><a >立即注冊</a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--=====3.底部=====-->
                <div id="footer">
                    <p><a >關(guān)于我們</a> | 
                        <a >聯(lián)系我們</a> | 
                        <a >人才招聘</a> | 
                        <a >商家入駐</a> | 
                        <a >廣告服務(wù)</a> | 
                        <a >手機京東</a> | 
                        <a >友情鏈接</a> | 
                        <a >銷售聯(lián)盟</a> | 
                        <a >京東社區(qū)</a> | 
                        <a >京東公益</a> | 
                        <a >English Site</a></p>
                    <p>Copyright ? 2004-2018  京東JD.com 版權(quán)所有</p>
                </div>  
            </div>
            <div class="xf" onclick="zhegai()">遮蓋層</div>
        </div>
    </body>
</html>

效果：

Video_2018-08-16_212446 00_00_04-00_00_11.gif

大圖：

image.png

遮蓋層的應(yīng)用：是其他網(wǎng)頁元素處于無法操作的情況

image.png

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末怠缸，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子钳宪，更是在濱河造成了極大的恐慌揭北，老刑警劉巖，帶你破解...
沈念sama閱讀 206,839評論 6贊 482
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件吏颖，死亡現(xiàn)場離奇詭異搔体，居然都是意外死亡，警方通過查閱死者的電腦和手機半醉，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,543評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門疚俱，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人缩多，你說我怎么就攤上這事呆奕。” “怎么了衬吆？”我有些...
開封第一講書人閱讀 153,116評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵梁钾，是天一觀的道長。經(jīng)常有香客問我逊抡，道長姆泻，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,371評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任秦忿，我火速辦了婚禮麦射，結(jié)果婚禮上蛾娶，老公的妹妹穿的比我還像新娘灯谣。我一直安慰自己，他們只是感情好蛔琅，可當(dāng)我...
茶點故事閱讀 64,384評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布胎许。她就那樣靜靜地躺著，像睡著了一般罗售。火紅的嫁衣襯著肌膚如雪辜窑。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,111評論 1贊 285
城市分裂傳說
那天寨躁，我揣著相機與錄音穆碎，去河邊找鬼。笑死职恳，一個胖子當(dāng)著我的面吹牛所禀，可吹牛的內(nèi)容都是我干的方面。我是一名探鬼主播，決...
沈念sama閱讀 38,416評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼色徘，長吁一口氣：“原來是場噩夢啊……” “哼恭金！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起褂策，我...
開封第一講書人閱讀 37,053評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤横腿，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后斤寂，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耿焊，經(jīng)...
沈念sama閱讀 43,558評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,007評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年扬蕊，在試婚紗的時候發(fā)現(xiàn)自己被綠了搀别。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,117評論 1贊 334
活死人
序言：一個原本活蹦亂跳的男人離奇死亡尾抑，死狀恐怖歇父，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情再愈，我是刑警寧澤榜苫，帶...
沈念sama閱讀 33,756評論 4贊 324
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站翎冲，受9級特大地震影響垂睬，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜抗悍，卻給世界環(huán)境...
茶點故事閱讀 39,324評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一驹饺、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧缴渊，春花似錦赏壹、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,315評論 0贊 19
一樁弒父案蝌借，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至指蚁，卻和暖如春菩佑，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背凝化。一陣腳步聲響...
開封第一講書人閱讀 31,539評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工稍坯，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人搓劫。一個月前我還...
沈念sama閱讀 45,578評論 2贊 355
代替公主和親
正文我出身青樓瞧哟，卻偏偏與公主長得像袜蚕，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子绢涡，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,877評論 2贊 345

day32-京東登錄頁

推薦閱讀更多精彩內(nèi)容