android京东登录,仿京东登录页面实现分析

一、效果图

页面展示

二、代码展示

1.html部分

欢迎登录

京东会员

立即注册

自动登录

忘记密码

登录

关于我们|

关于我们|

关于我们|

关于我们|

关于我们|

关于我们|

关于我们|

Copyright©2004-2017 京东JD.com 版权所有

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.遇到的问题分析

(1)盒子模型的尺寸计算方式：

效果.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的知识，也慢慢了解到一些布局小技巧，也学到了一些做事的方法：先理清思路，再动手做。思路没有理清楚，就做事，往往南辕北辙，适得其反。