DIV+CSS页面布局中注意的问题以及常用的CSS使用方法【转】

DIV布局整理:
   
    1、对于布局要使用DIV+CSS,使页面中的结构与表现完全分离，结构位于html文件中，表现位于css文件中

    2、对于要显示数据，特别是表格的列表形状数据的地方可以使用表格,此时用DIV可能更不好.

    3、CSS里多使用Class少使用id(对于特定元素可以使用ID)

    4.对于门户型(163.com)，访问量大的地方(比如首页)CSS直接写在页面上(JS脚本也如此),而不是包含一个CSS文件。

    5.对于CSS文件的大小要控制,不能太大.可以对页面进行分类,来选择要包含的.CSS文件.

    6.DIV布局,宽度如果设置了百分比而不是绝对值,那要考虑页面被人为变小的时候,布局是否会发生混乱.

    7.DIV布局要考虑浏览器兼容的问题,要保证主流浏览器都支持,比如ie6和firefox

    CSS使用整理:

    (1).AA{}表示伪类,使用的时候使用class="AA"

    (2)Table{} 表示为表格设置默认样式

    (3)table.table1{} 表格样式使用的时候,在<table>元素里 class="table1" 在其他HTML标签里不可用.

    (4)div#Search 表示为ID为Search的div设置样式 使用的时候该DIV不需要设置class属性

    (5)div#HeadTop li 表示为id为HeadTop的DIV里的<li>元素设置样式,该元素无须设置class属性

    (6)div#HeadTop li.left表示为id为HeadTop的DIV里的class="left"的<li>元素设置样式

    (7).rightContent li a,.rightContent h3 a {color:#1f3a87; } 表示为CLASS="rightContent"的元素里的<li>里面的<a>设置颜色属性; class="rightContent"元素的<h3>元素里的<a>的颜色属性亦如此.

    (8).rightContent .theTip{ clear:both; padding:9px 0 0;} 表示为calss="rightContent" 里的子元素中class="theTip"设置样式.

    (9)div#Head ul#GlobalNav div.NavAll li a:hover{}表示为id为Head的DIV元素里的id为GlobalNav里的UL元素里的id为NavAll的div元素里的的Li元素设置a的样式.

    (10)#ListPathLinks ul{float:left;} 表示为id为ListPathLinks里的ul元素设置样式.

    (11)#dl_centerlist {}表示为ID="dl_centerlist"的元素设置样式

    (12)div#dl_centerlist和#dl_centerlist的区别:DIV元素指定了id="dl_centerlis";如果存在"div#dl_centerlist" 则该样式起作用,否则#dl_centerlist的样式将起作用.

    (13)标签潜套层次不能很深

    (14)显示大文本块的话使用P

    (15)使用CSS简写.

    如:

    border-width:1px;
    border-style:solid;
    border-color:#000;

    可简写为

    border:1px solid #000;

    (16)CSS元素是支持继承的,所以要减少CSS里的冗余样式.减少CSS文件的大小.

    如body里面的样式在很多HTML标签里是默认被继承的.

    (17)使用子选择器和组选择器,这样可以减少Class的定义原来的冗余:

    <div id="subnav">
    <ul>
    <li class="subnavitem"> <a href="http://gss:7000/pages/editpage.action#" class="subnavitem">Item 1</a></li>>
    <li class="subnavitemselected"> <a href="http://gss:7000/pages/editpage.action#" class="subnavitemselected"> Item 1</a> </li>
    <li class="subnavitem"> <a href="http://gss:7000/pages/editpage.action#" class="subnavitem"> Item 1</a> </li>
    </ul>
    </div>
    CSS定义是：
    div#subnav ul { /* Some styling */ }
    div#subnav ul li.subnavitem { /* Some styling */ }
    div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
    div#subnav ul li.subnavitemselected { /* Some styling */ }
    div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 新的:
    <ul id="subnav">
    <li> <a href="http://gss:7000/pages/editpage.action#"> Item 1</a> </li>
    <li class="sel"> <a href="http://gss:7000/pages/editpage.action#"> Item 1</a> </li>
    <li> <a href="http://gss:7000/pages/editpage.action#"> Item 1</a> </li>
    </ul>
    CSS定义是：
    #subnav { /* Some styling */ }
    #subnav li { /* Some styling */ }
    #subnav a { /* Some styling */ }
    #subnav .sel { /* Some styling */ }
    #subnav .sel a { /* Some styling */ }