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;

              }