div+css布局问题汇集

div+css布局，有很多的模型，但都遵循一定的规则。下方就是我的一些理解。

1、在css里边，首先会定义整体的，比如*{ }，body{ }，在这些里边，会定义如下内容，margin，padding，font-family，font-size，line-height，width，height，outline

2、网站的logo，一般会用两个css进行实现，

#logo{

width：；

float： }

#logo a{

height：；

display：；

background：}

3、横导航的，在li里边定义display：inline就可以实现，

4、对于一个div里边所包含的另一个div，完全可以在大的div里定义，padding：上 右 下 左，

li的宽度，不用定义了，直接使用padding-left：30px就可以实现

5、对于一个大的div里边有文字，可以用h3，h5等

h3{

top：30px；

left：

position：

letter-spacing：文字间的距离

}

6、链接的按钮，直接用<a class="" href=""/> 直接在css里边这样写

a.green-btn{

left:

top: width: height: text-align: color: line-height ,font-size,font-weight

}

7、对于大div里边的图片，也可以直接用<img width="" height="" class="" src="" ... />来表示

img.img-front{

left:

top:

z-index:

}

8、对于一个div里边的小元素都是绝对定位的，就可以使用下方的代码进行统一设定（注：所有小元素用绝对定位的时候，最好打的div有确定的长、宽，只有这样，小元素的绝对定位才不会因为浏览器、显示器的大小而改变）

#carousel div > * {

position:absolute;

}

9、对于一个想在已经声明的css再添加一些属性，可以如下操作：

.main .cols .col { width: 277px; float: left; }

.main .cols .col + .col { padding-left: 40px; }

10、对于如下图的footer，可以用ul li进行实现

#footer .footer-nav ul {

list-style: none;

list-style-position: outside;

line-height: 11px; }

#footer .footer-nav ul li {

float: left;

border-right: 1px solid #181818;

padding: 0 8px;

text-shadow: rgba(0,0,0,0.7) 0px 1px 1px;

}

#footer .footer-nav ul li:first-child {

padding-left: 0;

}