一、HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 設(shè)置網(wǎng)頁標題 -->
<title>京東-歡迎登錄</title>
<!-- 設(shè)置網(wǎng)頁圖標 -->
<link rel="icon" type="img/ico" href="img/jd_logo.ico"/>
<link rel="stylesheet" type="text/css" href="css/loginstyle.css"/>
</head>
<body>
<!-- ========================頭部========================= -->
<div id="header">
<!-- =======頂部的頂部========= -->
<div id="top">
<div>
<a ><img src="img/logo.png" ></a>
<a href=""><img src="img/l-icon.png" ></a>
</div>
<a id="survey" target="_blank">登錄頁面沼撕，調(diào)查問卷</a>
</div>
<!-- =======頂部的底部========= -->
<div id="bottom">
<p><img src="img/warning.png" >   依據(jù)《網(wǎng)絡(luò)安全法》宋雏，為保障您的賬戶安全和正常使用，請盡快完成手機號驗證务豺！ 新版<a target="_blank">《京東隱私政策》</a>上線磨总，將更有利于保護您的個人隱私。</p>
</div>
</div>
<!-- =======================中間內(nèi)容部分============================== -->
<div id="content">
<!-- 登錄框 -->
<div id="login_page">
<!-- 提示塊 -->
<div id="div1">
<p><img src="img/xx.png">  京東不會以任何理由要求您轉(zhuǎn)賬匯款笼沥，謹防詐騙蚪燕。</p>
</div>
<!-- 按鈕塊 -->
<div id="div2">
<button type="button" id="btn1">掃碼登錄</button>|
<button type="button" id="btn2">賬號登錄</button>
</div>
<!-- 信息塊 -->
<div id="div3">
<!-- 用戶名 -->
<div id="username">
<img src="img/pygame.png" >
<input type="text" name="username" id="user" value="" placeholder="郵箱/用戶名/已驗證手機"/>
</div>
<!-- 密碼 -->
<div id="password">
<img src="img/password_icon.png" >
<input type="password" name="password" id="pwd" value="" placeholder="密碼"/>
</div>
<a href="">忘記密碼</a>
<button type="button">登 錄</button>
</div>
<!-- 注冊和第三方登錄 -->
<div id="div4">
<!-- 第三方登錄 -->
<a id="a1" class="a1" >QQ</a>|
<a id="a2" class="a1" >微信</a>
<!-- 立即注冊 -->
<a id="a3" >立即注冊</a>
</div>
</div>
</div>
<!-- ========================底部===================== -->
<div id="footer">
<div>
<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>
</div>
<p>Copyright ? 2004-2018 京東JD.com 版權(quán)所有</p>
</div>
</body>
</html>
二、css樣式
/* =========================通用============================ */
*{
/* 消除默認的margin值 */
margin: 0;
/* 消除默認的padding值 */
padding: 0;
/* 讓所有的標簽的字標簽都相對自己定位 */
position: relative;
}
/* =========================頂部布局============================= */
#header{
/* background-color: seagreen; */
height: 130px;
}
/* <!-- =======頂部的頂部========= --> */
#header #top{
height: 80px;
background-color: white;
}
#header #top div{
width: 292px;
height: 60px;
/* background-color: green; */
/* 相對定位會讓標簽脫流 */
position: absolute;
left: 188px;
/* 垂直居中 */
top: 50%;
margin-top: -30px;
/* 標簽高度 */
line-height: 60px;
}
#header #top #survey{
/* 布局 */
position: absolute;
right: 187px;
bottom: 10px;
color: rgb(180, 180, 180);
font-size: 12px;
text-decoration: none;
/* 添加背景圖
background:url(圖片地址) repeat/no-repeat(是否平鋪) x坐標 y坐標 背景顏色;
x敬拓，y：兩個坐標對應(yīng)的值邻薯，除了可以設(shè)置數(shù)字以外，還可以設(shè)置center乘凸，讓背景圖在x或y坐標方向上居中
*/
padding-left: 22px;
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: #FFF8F0;
}
#header #bottom{
/* 文字垂直方向居中 */
height: 100%;
line-height: 50px;
/* 水方向居中 */
text-align: center;
/* 設(shè)置字體大小 */
font-size: 10px;
color: rgb(180, 180, 180);
}
#header #bottom p img{
/* 標簽垂直居中 */
height: 25px;
position: absolute;
top: 50%;
margin-top: -12px;
line-height: 25px;
}
#header #bottom a{
/* 去掉下劃線 */
text-decoration: none;
/* 改變字體顏色 */
color: rgb(70,70,70);
}
#header #bottom a:hover{
/* 鼠標懸停加上下劃線 */
text-decoration: underline;
}
/* ========================中間部分布局============================= */
#content{
height: 470px;
background: url(../img/bg.png) no-repeat 15% center rgb(233,56,84);
}
/* =====================登錄界面=========== */
#content #login_page{
width: 350px;
height: 400px;
background-color: white;
/* 定位 */
position: absolute;
top: 2%;
right: 10%;
}
/* =====提示塊====== */
#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;
font-size: 12px;
/* 水平方向居中 */
text-align: center;
color: rgb(180, 180, 180);
}
/* =================選擇登錄方式塊============ */
#content #login_page #div2{
height: 60px;
/* background-color: white; */
color: rgba(220, 220,220, 0.6);
/* 設(shè)置字體粗細厕诡，取值范圍在100到900依次增大 */
font-weight: 100;
}
#content #login_page #div2 button{
width: 48%;
height: 100%;
background-color: white;
/* 去掉邊框 */
border: 0;
font-size: 18px;
color: rgb(60, 60, 60);
}
/* 設(shè)置按鈕成為焦點的狀態(tài) */
#content #login_page #div2 button:focus{
color: #FF0000;
/* 按鈕成為焦點時的默認效果outline */
outline: none;
}
/* ===================信息收集塊============== */
#content #login_page #div3{
height: 250px;
/* background-color: rgb(255, 0, 236); */
/* 設(shè)置邊框 */
border-top: solid rgba(230, 230, 230, 0.4) 1px;
border-bottom: solid rgba(230, 230, 230, 0.4) 1px;
}
/* 選中3里面的全部div */
#content #login_page #div3 div{
width: 300px;
height: 40px;
/* background-color: #DEB887; */
/* 設(shè)置輸入框的的位置 */
margin-left: 8%;
margin-top: 23px;
/* 設(shè)置輸入框的邊框 */
border: solid rgb(200, 200, 200) 1px;
}
/* 設(shè)置username的上邊距 */
#content #login_page #div3 #username{
margin-top: 35px;
}
/* 設(shè)置圖片大小 */
#content #login_page #div3 div img{
width: 40px;
height: 40px;
float: left;
border-right: solid rgb(200, 200, 200) 1px;
}
/* 設(shè)置輸入框大小大小 */
#content #login_page #div3 div input{
width: 245px;
height: 40px;
/* 設(shè)置輸入框的位置 */
border: 0;
float: left;
/* 設(shè)置輸入框中的光標位置 */
padding-left: 10px;
/* 設(shè)置字體大小 */
font-size: 14px;
}
/* 設(shè)置輸入框成為焦點時的狀態(tài) */
#content #login_page #div3 div input:focus{
/* color: #FF0000; */
/* 按鈕成為焦點時的默認效果outline */
outline: none;
}
/* 設(shè)置忘記密碼的位置 */
#content #login_page #div3 a{
position: absolute;
right: 25px;
margin-top: 20px;
font-size: 12px;
color: rgb(80, 80, 80);
text-decoration: none;
}
/* 設(shè)置a標簽的焦點狀態(tài) */
#content #login_page #div3 a:hover{
color: red;
text-decoration: underline;
}
/* 設(shè)置登錄按鈕位置和布局 */
#content #login_page #div3 button{
width: 300px;
height: 35px;
margin-left: 30px;
/* 定位登錄按鈕 */
position: absolute;
bottom: 20px;
background-color: rgb(219, 34, 46);
border: none;
color: white;
font-size: 20px;
}
/* 設(shè)置第三方登錄 */
#content #login_page #div4{
height: 50px;
/* 設(shè)置a標簽的行高為父標簽高度來實現(xiàn)垂直居中 */
line-height: 50px;
font-size: 10px;
color: rgba(200, 200, 200, 0.9);
}
/* 設(shè)置a1標簽的的布局 */
#content #login_page #div4 #a1{
margin-left: 30px;
margin-right: 15px;
color: rgb(89, 89, 89);
font-size: 13px;
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: 13px;
text-decoration: none;
padding-left: 25px;
background: url(../img/weixin.png) no-repeat 0, center white;
}
#content #login_page #div4 #a3{
position: absolute;
right: 20px;
color: rgb(165, 19, 23);
font-size: 13px;
text-decoration: none;
padding-left: 25px;
background: url(../img/right.png) no-repeat 0, center 0;
}
/* 設(shè)置三個a標簽的初始狀態(tài)值 */
#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;
}
/* 設(shè)置footer里面的布局 */
#footer div{
height: 50px;
/* 設(shè)置垂直方向居中 */
line-height: 50px;
/* 設(shè)置水平方向居中 */
text-align: center;
font-size: 13px;
color: rgba(89, 89, 89, 0.6);
}
#footer div a{
margin-left: 10px;
margin-right: 10px;
color: rgb(89, 89, 89);
text-decoration: none;
}
/* 設(shè)置a標簽鼠標懸停狀態(tài) */
#footer div a:hover{
color: red;
text-decoration: underline;
}
#footer p{
color: rgb(89, 89, 89);
font-size: 12px;
text-align: center;
}
三、知識點總結(jié)
注意：不管寫任何代碼要勤寫注釋营勤，不同的部分要分塊灵嫌，怎么樣可以讓后器代碼優(yōu)化更加簡單。
1葛作、通配符
{
/ 消除默認的margin值 /
margin: 0;
/ 消除默認的padding值 /
padding: 0;
/ 讓所有的標簽的字標簽都相對自己定位 /
position: relative;
}
利用通配符來設(shè)置所有標簽的margin和padding屬性寿羞，position屬性用于定位。
2赂蠢、相對定位會讓標簽脫流
3绪穆、內(nèi)容垂直居中
#header #top div{
width: 292px;
height: 60px;
/* background-color: green; /
/ 相對定位會讓標簽脫流 /
position: absolute;
left: 188px;
/ 垂直居中 /
top: 50%;
margin-top: -30px;
/ 標簽高度 */
line-height: 60px;
}
4、設(shè)置背景圖片
添加背景圖
background:url(圖片地址) repeat/no-repeat(是否平鋪) x坐標 y坐標 背景顏色;
x虱岂，y：兩個坐標對應(yīng)的值玖院，除了可以設(shè)置數(shù)字以外，還可以設(shè)置center第岖，讓背景圖在x或y坐標方向上居中*/
padding-left: 22px;
background: url(../img/q-icon.png) no-repeat 0 center white;
5难菌、標簽中是文字，一般都可以用text-align: center;讓文字在標簽中居中
6蔑滓、去掉a標簽的下劃線
#header #bottom a{
/* 去掉下劃線 /
text-decoration: none;
/ 改變字體顏色 */
color: rgb(70,70,70);
}
7郊酒、設(shè)置字體大小
#content #login_page #div2{
height: 60px;
/* background-color: white; /
color: rgba(220, 220,220, 0.6);
/ 設(shè)置字體粗細，取值范圍在100到900依次增大 */
font-weight: 100;
}
8键袱、改變標簽成為焦點時的狀態(tài)
/* 設(shè)置按鈕成為焦點的狀態(tài) /
#content #login_page #div2 button:focus{
color: #FF0000;
/ 按鈕成為焦點時的默認效果outline */
outline: none;
}
9燎窘、使用偽類選擇器設(shè)置鼠標懸停在鼠標上時的初始狀態(tài)
#header #bottom a:hover{
/* 鼠標懸停加上下劃線 */
text-decoration: underline;
}
