一、效果圖
二、代碼展示
1.html部分
<header>
<div>
<img src="image/logo (2).png" alt="">
<span>歡迎登錄</span>
</div>
</header>
<section>
<div class="s1">
<div class="s2">
<div class="s3">
<div class="s4">
<span>京東會(huì)員</span>
<a href="#">立即注冊(cè)</a>
</div>
<div>
<form action="#" method="POST">
<div class="form_label">
<label for="uid" class="uid"></label>
<input type="text" name="uid" id="uid" placeholder="請(qǐng)輸入手機(jī)號(hào)/名字">
</div>
<div class="form_label">
<label for="psw" class="psw"></label>
<input type="password" name="password" id="psw">
</div>
<br>
<div class="form_label1">
<input type="checkbox" name="autologin" />
<label>自動(dòng)登錄</label>
<a href="#">忘記密碼</a>
</div>
<a href="#" class="btn">登錄</a>
</form>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="f1">
<a href="#">關(guān)于我們|</a>
<a href="#">關(guān)于我們|</a>
<a href="#">關(guān)于我們|</a>
<a href="#">關(guān)于我們|</a>
<a href="#">關(guān)于我們|</a>
<a href="#">關(guān)于我們|</a>
<a href="#">關(guān)于我們|</a>
</div>
<div class="b1">
Copyright?2004-2017 京東JD.com 版權(quán)所有
</div>
</footer>
2.CSS部分
* {
margin: 0;
padding: 0;
}
header div {
margin-left: 400px;
}
div img,
span {
vertical-align: middle;
font-size: 18px;
color: gray;
padding-right: 10px;
}
.s1 {
background: #E93854;
height: 476px;
}
.s2 {
background-image: url(image/banner.png);
background-repeat: no-repeat;
height: 476px;
width: 990px;
margin: 0 auto;
}
.s3 {
height: 281px;
width: 346px;
background-color: white;
float: right;
margin-top: 80px;
}
.s4 {
margin: 20px;
}
.s4 a {
text-decoration: none;
color: red;
font-size: 15px;
float: right;
background-image: url(image/icon5.jpg);
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 20px;
}
.s4 span {
font-size: 20px;
font-weight: bold;
}
.form_label {
height: 38px;
width: 255px;
border: 1px solid gray;
margin-left: 40px;
margin-top: 20px;
}
.form_label label {
display: block;
float: left;
width: 40px;
height: 39px;
border-right: 1px solid gray;
}
.form_label input {
float: left;
height: 38px;
width: 204px;
border: 0 none;
padding-left: 10px;
}
.form_label .uid {
background-image: url(image/icon1.jpg);
background-repeat: no-repeat;
}
.form_label .psw {
background-image: url(image/icon2.jpg);
background-repeat: no-repeat;
}
.form_label1 input,
label {
font-size: 13px;
vertical-align: middle;
display: inline-block;
}
.form_label1 {
margin-left: 20px;
}
.form_label1 a {
float: right;
text-decoration: none;
color: gray;
font-size: 13px;
padding-right: 40px;
}
.btn {
display: block;
background: #E93854;
color: white;
line-height: 40px;
text-align: center;
margin: 20px 40px;
text-decoration: none;
}
.f1 a {
color: gray;
text-decoration: none;
}
.f1 a:hover {
text-decoration: underline;
color: blue;
}
.f1 {
width: 990px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
.b1 {
width: 990px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
font-size: 13px;
color: gray;
}
3.圖片資源
二、實(shí)現(xiàn)思路
1.布局方式
2.用到的主要知識(shí)
（1）頁(yè)面布局分析
（2）選擇器
（3）html標(biāo)簽
（4）css樣式
（5）浮動(dòng)布局
3.遇到的問(wèn)題分析
舉例來(lái)說(shuō)，如果要在一個(gè)邊框里放一個(gè)正方形圖片，假如圖片的大小為60px×60px，邊框的寬度為1px，正常思維來(lái)就是設(shè)置邊框?qū)捀叨紴?0px，再把圖片放進(jìn)去，按照這種思維是放不進(jìn)去的，因?yàn)檫吙驅(qū)挾龋赃吙蚰苋菁{的內(nèi)容大小實(shí)際上是58p×58px，下面畫圖舉例。
（2）浮動(dòng)的要點(diǎn)
float的主要功能是讓網(wǎng)頁(yè)中的內(nèi)容脫離文檔流，然后移動(dòng)到你所在塊中最上方，由left和right來(lái)決定是浮動(dòng)到左邊還是右邊。但float在使用完之后是需要清除的，一旦忘記清除浮動(dòng)，那么整個(gè)網(wǎng)頁(yè)的排版都會(huì)變得混亂。
清除浮動(dòng)推薦用父級(jí)添加偽類after來(lái)實(shí)現(xiàn)，雖然寫法較其他方法較為復(fù)雜，但沒(méi)有副作用，下面代碼具體示例：
.clear:after{
content: ''; /*在clear類后面添加內(nèi)容為空*/
display: block; /*把添加的內(nèi)容轉(zhuǎn)化為塊元素*/
clear: both; /*清除這個(gè)元素兩邊的浮動(dòng)*/
(3)背景設(shè)置
頁(yè)面背景圖是這樣設(shè)置的：用取色器取出圖片邊緣附近的顏色，設(shè)置和背景圖片一樣的高度再填充整個(gè)屏幕。
.s1 {
background: #E93854;
height: 476px;
}
三、總結(jié)
頁(yè)面雖然簡(jiǎn)單，但是用到了很多html和css的知識(shí)，也慢慢了解到一些布局小技巧，也學(xué)到了一些做事的方法：先理清思路，再動(dòng)手做。思路沒(méi)有理清楚，就做事，往往南轅北轍，適得其反。
