1.成果圖
2.分析圖：
3.html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/sty.css"/>
</head>
<body>
<!--1.頭部分start-->
<div id="header">
<img src="./img/logo.jpg" >
<span class="line"></span>
<span class="wel-login">歡迎登錄</span>
</div><!-- 頭部分end -->
<!--2.主體內容開始 -->
<div id="middle">
<img src="./img/show.jpg" >
<form action="#">
<h1>登錄</h1>
<div class="err-msg">
賬戶名與密碼不匹配請重新輸入
</div>
<input type="text" name="user" placeholder="用戶名 / 已驗證手機"/>
<input type="password" name="password" placeholder="密碼"/>
<input type="submit" value="登 錄"/>
</form>
</div><!--主體內容結束 -->
<!--3.結尾部分開始-->
<div id="footer">
<p>
關於我們 |
聯繫我們 |
人才招聘 |
商家入駐 |
營銷中心 |
手機京淘 |
友情連接 |
銷售聯盟 |
京淘社區 |
京淘公益 |
English Site<br>
Copyright © 2015 - 2019 京淘jingtao.com 版權所有
</p>
</div>
<!--結尾部分結尾-->
</body>
</html>
4.css代碼：
/**0.初始化網頁屬性*/
body{
font-family:"微軟雅黑";
}
body,table,tr,td{
margin: 0;
padding: 0;
}
/* ****** 1.header start ****** */
#header{
background-color:pink;
width:1200px;
height:72px;
margin:42px auto 0;
}
#header img{/* logo */
margin-left: 50px;
margin-right: 33px;
vertical-align: middle;
}
#header span.line{/* 豎線 */
display: inline-block;
height: 68px;
margin-right: 22px;
border: 2px solid #676767;
vertical-align: middle;
}
#header span.wel-login{
font-size: 36px;
color:#676767;
vertical-align: middle;
}
/* ****** header end ****** */
/* ****** 2.main start ****** */
#middle{
width:1200px;
margin: 42px auto 0;
/*上下的灰色邊框是9px, 左右邊框是7px*/
border: 7px solid #f0f0f0;
border-width: 9px 7px;/*上下邊線是9px寬，左右7px寬*/
}
#middle form{
margin-left:110px;
width:385px;
/*background-color:cyan;*/
/*因爲form是塊元素,無法和其他元素同行顯示,
所以將form設置爲行內塊元素,這樣可以設置寬高,
還可以和其他行內塊元素同行顯示*/
display:inline-block;/**行內塊的作用：和span相同/
/*讓form的頂部和當前行內最高元素的頂部對齊*/
vertical-align: top;
}
#middle form h1{/*表單中的登錄文字*/
font-size: 26px;
color: 333333;
/*上右下左(左右一樣可以只寫左的值)*/
margin: 87px 0px 20px 0px;
text-align: center;
}
#middle form div.err-msg{/*登錄失敗後的錯誤提示*/
font-size: 16px;
color: #f00;
margin-bottom: 9px;
text-align: center;
}
#middle form input{/*所有輸入框*/
height: 49px;
width: 381px;
border: 2px solid #ededed;
font-size: 16px;
color: #999999;
text-indent: 46px;
margin-bottom: 32px;
}
#middle form input[name='user']{/* 用戶名輸入框 */
background-image: url('../img/u_ico.jpg');
background-repeat: no-repeat;
background-position: 14px 14px;
}
#middle form input[name='password']{/* 密碼輸入框 */
background-image: url('../img/p_ico.jpg');
background-repeat: no-repeat;
background-position: 14px 14px;
}
#middle form input[type='submit']{/* 提交按鈕 */
height: 52px;
background-color: #ff0000;
font-size: 20px;
color: #ffffff;
text-indent: 0px;
}
/*main end*/
/*3.footer start*/
#footer{
width: 1200px;
margin: 0 auto;
margin-top: 144px;
}
#footer p{
text-align: center;
line-height: 34px;
font-size: 14px;
color:#999999;
}
/*footer end*/