关于html css 的部分细节处理的经验 网页布局分析

1 打开psd图，进行页面划分，先大体模块儿，再细节

3、html css中清除属性时，一般将值设置为none;但是在line-height中，设置为none非法，所以如果样式中继承了父类的属性影响正 常效果，则将该值设置为normal，

4、浏览器的兼容性问题

5、input  select 在浏览器中位置高度不一致，则通过修改

Select  与input 的height  line-height  实在不行，则通过相对定位（相对定位指的是相对于自己原来的位置进行改变）来修订

Input{

Position:relative;

Left|right|top|bottom;

}

 

6、结构伪类  常见：li:last-child    first-child  nth-of-

7、li中前方的小图标两种添加方式；

1、加图片标签image

2、背景定位  background: url(imgs/li.jpg) no-repeat x y;

8、网页加入样式的三种方式：

1、标签头中；

2、<style type="text/css"></style>

3、 <link rel="stylesheet" type="text/css" href="index.css">  (注：这里的index.css可以换名字，路径建议写和html相对路径)  

9、 .css样式 文件中，一般开头为：

 *{margin: 0;padding: 0}   表示清除一般元素的内外边距   

10、 先大块儿分区时，在布局时可以为各个块儿添加一个背景颜色，以示分区，便于观察

a)  body{

b)  font-family: Times,"Times New Roman","微软雅黑";

c)  font-size:12px; /*一般情况下，大小为12   14 等*/

d)  line-height: 20px; /*一般行高*/

e)  background: #EEE;

f)  color: #000;

g) }

h) a{

i)  text-decoration: none;

j)  color: #000;

k)  display: inline-block;/*可以设置高度和宽度的行内元素*/

l) }

m) 

n) a:hover{

o)  text-decoration: underline;

p)  color: red;

q) }

r) ul{

s)  list-style: none;

t) }

11、/*动态新增子元素，并设置清除浮动，这样div Ul dl的子元素浮动时候，

就不会出现无法包裹的问题

*/

div:after ul:after,dl{

content: '';

display: block;/*空的块级元素，清除浮动*/

clear: both;

}

12、background: linear-gradient(#fff,#efefef,#fff);/*表示渐变色 从白色到灰色再到白*/ 

13、Height  和 line-height 同时使用，可以使得div中的文字居中

14、Vertical-align: middle   该属性可以使得图片和文字垂直居中

15、Line-height:normal  可以屏蔽继承而来的一些不必要的高度

16、text-align:center;    可以使div中的文字等居中

17、Text-indent:  2em;   表示文本缩进2个子的宽度

18、Overflow；hidden；  在div中设置后，可以避免因为子元素浮动等造成div变形 

19、 background: linear-gradient(#ffefe5,#fff);  用css做渐变色的设置/*表示从粉色到白色的渐变，这里可以多添加几个颜色，设置多个颜色的渐变*/        

20、 font-weight: bold;  表示字体加粗