本文假定你瞭解基本的DIV+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 */ }
原文出處：http://www.cnblogs.com/adandelion/archive/2007/05/23/757141.html