二階段day4-京東登錄界面2

京東登錄界面效果圖

HTML文件代碼

<!--index.html是網(wǎng)站首頁(yè)對(duì)應(yīng)html文件-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--設(shè)置網(wǎng)頁(yè)標(biāo)題-->
        <title>京東-歡迎登錄</title>
        <!--設(shè)置網(wǎng)頁(yè)圖標(biāo)-->
        <link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
        <!--導(dǎo)入樣式表-->
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    
    <body>
        
        <!--===================頂部====================-->
        <div id="header">
            <!--====頂部的頂部====-->
            <div id="top">
                <div>
                    <img src="img/logo.png"/>
                    <img src="img/l-icon.png"/>
                </div>
                <a id="survey" target="_blank" >登錄頁(yè)面秀仲,調(diào)查問卷</a>
            </div>
            <!--====頂部的底部====-->
            <div id="bottom">
                <p><img src="img/warning.png"/>&nbsp;&emsp;&emsp;依據(jù)《網(wǎng)絡(luò)安全法》,為保障您的賬戶安全和正常使用壶笼,請(qǐng)盡快完成手機(jī)號(hào)驗(yàn)證神僵! 新版<a target="_blank" >《京東隱私政策》</a>已上線,將更有利于保護(hù)您的個(gè)人隱私覆劈。</p>
            </div>
            
        </div>
        <!--===================中間=====================-->
        <div id="content">
            <!--登錄框-->
            <div id="login_page">
                <!--提示塊-->
                <div id="div1">
                    <p><img src="img/xx.png"/>&emsp;&emsp;京東不會(huì)以任何理由要求您轉(zhuǎn)賬匯款保礼,謹(jǐn)防詐騙。</p>
                </div>
                <!--按鈕塊-->
                <div id="div2">
                    <button id="btn1">掃碼登錄</button>|
                    <button id="btn2">賬號(hào)登錄</button>
                </div>
                <!--信息收集塊-->
                <div id="div3">
                    <!--用戶名-->
                    <div id="username">
                        <img src="img/pygame.png"/>
                        <input type="text" name="uersname" placeholder="郵箱/用戶名/已驗(yàn)證手機(jī)" />
                    </div>
                    <!--密碼-->
                    <div id="password">
                        <img src="img/password_icon.png"/>
                        <input type="password" name="password" placeholder="密碼" />
                    </div>
                    <!--忘記密碼-->
                    <a >忘記密碼</a>
                    <!--登錄-->
                    <button>登&emsp;錄</button>
                </div>
                <!--注冊(cè)和第三方登錄-->
                <div id="div4">
                    <a id="a1" class="aa" href="">QQ</a>|
                    <a id="a2" class="aa" href="">微信</a>
                    <a id="a3" href="">立即注冊(cè)</a>
                </div>
            </div>
            
        </div>
        <!--===================底部=====================-->
        <div id="footer">
            <div>
                <a href="">關(guān)于我們</a>|
                <a href="">聯(lián)系我們</a>|
                <a href="">人才招聘</a>|
                <a href="">商家入駐</a>|
                <a href="">廣告服務(wù)</a>|
                <a href="">手機(jī)京東</a>|
                <a href="">友情鏈接</a>|
                <a href="">銷售聯(lián)盟</a>|
                <a href="">京東社區(qū)</a>|
                <a href="">京東公益</a>|
                <a href="">English Site</a>
            </div>
            <p>Copyright ? 2004-2018  京東JD.com 版權(quán)所有</p>
        </div>
        
    </body>
</html>

CSS文件代碼

/*==============(通用)================*/
*{
    /*消除默認(rèn)的margin*/
    margin: 0;   
    /*消除默認(rèn)padding*/
    padding: 0;
    /*讓所有標(biāo)簽的子標(biāo)簽都相對(duì)自己定位*/
    position: relative;  
}


/*===============頂部=================*/
#header{
    height: 130px;
    /*background-color: seagreen;*/
}
/*====頂部的頂部====*/
#header #top{
    height: 80px;
    background-color: white;
}
#header #top div{
    width: 292px;
    height: 60px;
    
    /*相對(duì)定位-會(huì)讓標(biāo)簽脫流*/
    position: absolute;
    left: 188px;
    
    /*垂直居中*/
    top: 50%;
    margin-top: -30px;
    line-height: 60px;  
    
}
#header #top #survey{
    /*布局*/
    position: absolute;
    right: 187px;
    bottom: 10px;
    
    /*設(shè)置字體*/
    color: rgb(180, 180, 180);
    font-size: 12px;
    /*去掉下劃線*/
    text-decoration: none;
    
    /*添加背景圖
     * background:url(圖片地址)  repeat/no-repeat x y 背景顏色
     * x,y: x坐標(biāo)和y坐標(biāo)對(duì)應(yīng)的值责语,除了可以設(shè)置數(shù)字值以外炮障,和可以設(shè)置center,讓背景圖在x方向和y方向居中
     */
    padding-left: 23px;
    background:url(../img/q-icon.png) no-repeat 0 center white;
}
#header #top #survey:hover{
    color: red;
    text-decoration: underline;
}




/*====頂部的底部====*/
#header #bottom{
    height: 50px;
    background-color: rgb(255, 246, 236);
}
#header #bottom p{
    /*垂直方向居中*/
    height: 50px;
    line-height: 50px;
    
    /*水平方向居中*/
    text-align: center;
    
    /*設(shè)置字體*/
    color: rgb(180, 180, 180);
    font-size: 12px;
}
#header #bottom p img{
    /*垂直居中*/
    height: 25px;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    line-height: 25px;
}
#header #bottom p a{
    color: rgb(30, 30, 30);
    /*去掉下劃線*/
    text-decoration: none;
}
#header #bottom p a:hover{
    /*添加下劃線*/
    text-decoration: underline;
}


/*===============中間=================*/
#content{
    height: 470px;
    /*<!--77,157坤候,254-->*/
    background: url(../img/bg2.png) no-repeat 15% center rgb(77, 157, 254);
    
}
/*====登錄界面=======*/
#content #login_page{
    width: 350px;
    height: 400px;
    background-color: white;
    
    /*定位*/
    position: absolute;
    right:200px;
    top: 15px;
}
/*--提示塊--*/
#content #login_page #div1{
    height: 40px;
    background-color: rgb(255, 246,236);
}
#content #login_page #div1 img{
    height: 16px;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    line-height: 16px;
}
#content #login_page #div1 p{
    /*垂直方向居中*/
    height: 40px;
    line-height: 40px;
    
    /*水平方向居中*/
    text-align: center;
    
    font-size: 12px;
    color: rgb(180, 180, 180);
}


/*--選中登錄方式--*/
#content #login_page #div2{
    height: 60px;
    /*background-color: chartreuse;*/
    
    color: rgba(220, 220, 220, 0.6);
    /*設(shè)置字體粗細(xì):取值范圍是100-900*/
    font-weight: 100;
}
#content #login_page #div2 button{
    width: 48%;
    height: 100%;
    
    border: 0;
    
    font-size: 18px;
    color: rgb(60, 60, 60);
}
/*設(shè)置按鈕成為焦點(diǎn)的狀態(tài)*/
#content #login_page #div2 button:focus{
    color: red;
    /*按鈕成為焦點(diǎn)默認(rèn)的邊框效果是outline*/
    outline: 0;
}

/*--信息收集塊--*/
#content #login_page #div3{
    height: 250px;
    /*設(shè)置邊框*/
    border-top: solid rgba(220, 220, 220, 0.6) 1px;
    border-bottom: solid rgba(220, 220, 220, 0.6) 1px;

}
#content #login_page #div3 div{
    width: 300px;
    height: 40px;
    
    margin-left: 25px;
    margin-top: 23px;
    
    border: solid rgb(170, 170, 170) 1px;
}
#content #login_page #div3 #username{
    margin-top: 35px;
}
/*圖片*/
#content #login_page #div3 div img{
    width: 40px;
    height: 40px;
    float: left;
    
    border-right: solid rgb(170, 170, 170) 1px;
}
/*輸入框*/
#content #login_page #div3 div input{
    height: 40px;
    width: 245px;
    
    border: 0;
    float: left;
    
    padding-left: 10px;
    
    font-size: 14px;
}
#content #login_page #div3 div input:focus{
    outline: 0;
}

/*忘記密碼*/
#content #login_page #div3 a{
    position: absolute;
    right: 25px;
    margin-top: 20px;
    
    color: rgb(89, 89, 89);
    font-size: 12px;
    text-decoration: none;
}
#content #login_page #div3 a:hover{
    color: red;
    text-decoration: underline;
}

/*登錄按鈕*/
#content #login_page #div3 button{
    width: 300px;
    margin-left: 25px;
    height: 35px;
    
    position: absolute;
    bottom: 20px;
    
    background-color: rgb(219, 34, 46);
    border: none;
    
    color: white;
    font-size: 20px;
}


#content #login_page #div4{
    /*垂直方向居中*/
    height: 50px;
    line-height: 50px;
    
    font-size: 10px;
    color: rgba(220,220,220,0.8);
    
    
}
#content #login_page #div4 #a1{
    margin-left: 25px;
    margin-right: 15px;
    
    color: rgb(89,89,89);
    font-size: 12px;
    text-decoration: none;
    
    padding-left: 25px;
    background: url(../img/qq.png) no-repeat 0 center white;
    
}
#content #login_page #div4 #a2{
    margin-left: 5px;
    
    color: rgb(89,89,89);
    font-size: 12px;
    text-decoration: none;
    
    padding-left: 25px;
    background: url(../img/weixin.png) no-repeat 0 center white;
}

#content #login_page #div4 #a3{
    position: absolute;
    right: 25px;
    
    color: rgb(165,19,23);
    font-size: 12px;
    text-decoration: none;
    
    padding-left: 25px;
    background: url(../img/right.png) no-repeat 0 center rgba(0,0,0,0);
}

#content #login_page #div4 #a1:hover{
    color: red;
    text-decoration: underline;
}
#content #login_page #div4 #a2:hover{
    color: red;
    text-decoration: underline;
}
#content #login_page #div4 #a3:hover{
    text-decoration: underline;
}



/*===============底部=================*/
#footer{
    height: 105px;
}
#footer div{
    height: 50px;
    
    /*水平居中*/
    text-align: center;
    
    /*垂直居中*/
    line-height: 50px;
    
    font-size: 12px;
    color: rgb(89, 89, 89);
    
}

#footer div a{
    margin-left: 10px;
    margin-right: 10px;
    
    color: rgb(89, 89, 89);
    text-decoration: none;
}
#footer div a:hover{
    color: red;
    text-decoration: underline;
}
#footer p{
    color: rgb(89, 89, 89);
    font-size: 12px;
    
    /*水平居中*/
    text-align: center;
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末胁赢,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子白筹,更是在濱河造成了極大的恐慌智末,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件徒河,死亡現(xiàn)場(chǎng)離奇詭異系馆,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)顽照,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門由蘑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人棒厘,你說我怎么就攤上這事纵穿。” “怎么了奢人?”我有些...
    開封第一講書人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵谓媒,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我何乎,道長(zhǎng)句惯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任支救,我火速辦了婚禮抢野,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘各墨。我一直安慰自己指孤,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著恃轩,像睡著了一般结洼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上叉跛,一...
    開封第一講書人閱讀 49,929評(píng)論 1 290
  • 那天松忍,我揣著相機(jī)與錄音,去河邊找鬼筷厘。 笑死鸣峭,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的酥艳。 我是一名探鬼主播摊溶,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼充石!你這毒婦竟也來(lái)了更扁?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤赫冬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后溃列,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體劲厌,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年听隐,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了补鼻。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡雅任,死狀恐怖风范,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情沪么,我是刑警寧澤硼婿,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站禽车,受9級(jí)特大地震影響寇漫,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜殉摔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一州胳、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧逸月,春花似錦栓撞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)瓢颅。三九已至,卻和暖如春岭粤,著一層夾襖步出監(jiān)牢的瞬間惜索,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工剃浇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留巾兆,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓虎囚,卻偏偏與公主長(zhǎng)得像角塑,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子淘讥,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

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

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5圃伶? 答:HTML5是最新的HTML標(biāo)準(zhǔn)啃奴。 注意:講述HT...
    kismetajun閱讀 27,450評(píng)論 1 45
  • 1 Webpack 1.1 概念簡(jiǎn)介 1.1.1 WebPack是什么 1糟港、一個(gè)打包工具 2檬姥、一個(gè)模塊加載工具 3...
    Kevin_Junbaozi閱讀 6,645評(píng)論 0 16
  • 本文主要是起筆記的作用觅够,內(nèi)容來(lái)自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,630評(píng)論 0 30
  • 感恩父母養(yǎng)育之恩和關(guān)心慷嗜,感恩先生的關(guān)心和包容碉输,感謝你們秫筏,我愛你們隘冲。 感恩三寶加持有如此殊勝的機(jī)緣學(xué)習(xí)到金剛智慧抵赢、種...
    李柯潔閱讀 156評(píng)論 0 0
  • 一欺劳、求某地的地方時(shí) 二、從南北極點(diǎn)看地圖铅鲤,確認(rèn)某地到底屬于東半球還是西半球 沿著地球自轉(zhuǎn)方向看划提,0°——180°這...
    淺秋兒閱讀 1,055評(píng)論 1 7