一、效果图
页面展示
二、代码展示
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="#">关于我们|</a>
<a href="#">关于我们|</a>
<a href="#">关于我们|</a>
<a href="#">关于我们|</a>
<a href="#">关于我们|</a>
<a href="#">关于我们|</a>
<a href="#">关于我们|</a>
</div>
<div class="b1">
Copyright©2004-2017 京东JD.com 版权所有
</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
二、实现思路
1.布局方式
布局
2.用到的主要知识
（1）页面布局分析
（2）选择器
（3）html标签
（4）css样式
（5）浮动布局
3.遇到的问题分析
效果.png
举例来说，如果要在一个边框里放一个正方形图片，假如图片的大小为60px×60px，边框的宽度为1px，正常思维来就是设置边框宽高都为60px，再把图片放进去，按照这种思维是放不进去的，因为边框宽度，所以边框能容纳的内容大小实际上是58p×58px，下面画图举例。
内容大小和border大小的关系举例
（2）浮动的要点
float的主要功能是让网页中的内容脱离文档流，然后移动到你所在块中最上方，由left和right来决定是浮动到左边还是右边。但float在使用完之后是需要清除的，一旦忘记清除浮动，那么整个网页的排版都会变得混乱。
清除浮动推荐用父级添加伪类after来实现，虽然写法较其他方法较为复杂，但没有副作用，下面代码具体示例：
.clear:after{
content: ''; /*在clear类后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
(3)背景设置
页面背景图是这样设置的：用取色器取出图片边缘附近的颜色，设置和背景图片一样的高度再填充整个屏幕。
.s1 {
background: #E93854;
height: 476px;
}
效果
三、总结
页面虽然简单，但是用到了很多html和css的知识，也慢慢了解到一些布局小技巧，也学到了一些做事的方法：先理清思路，再动手做。思路没有理清楚，就做事，往往南辕北辙，适得其反。
