一、效果圖
頁面展示
二、代碼展示
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>京東會員</span>
<a href="#">立即注冊</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="請輸入手機號/名字">
</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>自動登錄</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.圖片資源
banner.png
icon1.jpg
icon2.jpg
icon5.jpg
logo (2).png
二、實現(xiàn)思路
1.布局方式
布局
2.用到的主要知識
（1）頁面布局分析
（2）選擇器
（3）html標簽
（4）css樣式
（5）浮動布局
3.遇到的問題分析
效果.png
舉例來說，如果要在一個邊框里放一個正方形圖片，假如圖片的大小為60px×60px，邊框的寬度為1px，正常思維來就是設(shè)置邊框?qū)捀叨紴?0px，再把圖片放進去，按照這種思維是放不進去的，因為邊框?qū)挾龋赃吙蚰苋菁{的內(nèi)容大小實際上是58p×58px，下面畫圖舉例。
內(nèi)容大小和border大小的關(guān)系舉例
（2）浮動的要點
float的主要功能是讓網(wǎng)頁中的內(nèi)容脫離文檔流，然后移動到你所在塊中最上方，由left和right來決定是浮動到左邊還是右邊。但float在使用完之后是需要清除的，一旦忘記清除浮動，那么整個網(wǎng)頁的排版都會變得混亂。
清除浮動推薦用父級添加偽類after來實現(xiàn)，雖然寫法較其他方法較為復雜，但沒有副作用，下面代碼具體示例：
.clear:after{
content: ''; /*在clear類后面添加內(nèi)容為空*/
display: block; /*把添加的內(nèi)容轉(zhuǎn)化為塊元素*/
clear: both; /*清除這個元素兩邊的浮動*/
(3)背景設(shè)置
頁面背景圖是這樣設(shè)置的：用取色器取出圖片邊緣附近的顏色，設(shè)置和背景圖片一樣的高度再填充整個屏幕。
.s1 {
background: #E93854;
height: 476px;
}
效果
三、總結(jié)
頁面雖然簡單，但是用到了很多html和css的知識，也慢慢了解到一些布局小技巧，也學到了一些做事的方法：先理清思路，再動手做。思路沒有理清楚，就做事，往往南轅北轍，適得其反。
