Login登录页面的制作流程（摘要）

*****我的QQ号：1539832180。欢迎一起讨论学习。*****

 

第一步：拿到设计图，先别急着切，先分析。

因为切图不只是切图，设计不只是设计。你得考虑四方面的因素：

1. 合理的切图，语义准确，注释明了。

**写好注释是关键。

 

2. 切图的同时更要考虑程序嵌套问题。

 

因为你切完图的页面是交给程序员的，而程序员是看的不是设计视图，而是干干净净的代码。所以这时候考虑代码的缩进，合理的结构嵌套循环，无论是div还是table。就程序来说，它处理的是页面上有机的重复的html结构单元，而不只是为了得到浏览器里边最终效果。设计图里的内容是不可变的，而程序处理的内容是可变的。

 

**有时候要站在别人的角度来思考问题，你会有更意外的收获。

 

3. 合理的把握时间。

整个项目有总体的时间，到你这儿有单独的页面开发时间。这个时间要掌握好，因为时间是质量的灵魂。

 

4. http请求，浏览器最简单的执行原理，计算机最基础原理。

这个是最主要的，好多开发者，都不知道什么是http请求，浏览器执行原理是什么东东。

 

 

xhtml + css 布局就我个人来看有三种：

1. 一种是自然布局。

所谓自然者，就是顺其自然，不用其它布局元素的修饰。

<style type="text/css">
div{border:1px solid #ccc;width:100px;height:40px;margin:10px ;}
</style>
<div class="className_1"></div>
<div class="className_2"></div>
<div class="className_3"></div>
<div class="className_4"></div>
<div class="className_5"></div>

 

 

2.流动布局

流动布局可以这样理解，当页面像瀑布或你的思想一样从顶部流下来，没有任何阻挡没有任何改变，它的目的地是footer,copyright两个PLMM。但当遇到float 的时候它的流向就要改变，得先去看看MM的姐姐。如果left就先流向left然后在流向right，right则相反。而且会影响后边元素的定位，为了不让你整小三之类的事情，还得clear一下，不然会让你的灵魂净化到侏罗纪时代去找寻那失散已久的恐龙表妹。

 

 

3.绝对布局

一般用的就是把父元素定为：position:relative;子元素就会以这个父元素容器的左上角为布局参考点进行布局。形象的来说，父元素在金字塔底，子元素依次向塔尖走。这就不在一个平面内了。

 

部分CSS初始化：

html{color:#;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:;padding:;}
table{border-collapse:collapse;border-spacing:;}
fieldset,img{border:;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:%;}