CSS執行個體：定義列表dl頁面元素 注重語義建立良好結構（轉載52css）

　　大家都在學習CSS網頁布局，研究著CSS定位、浮動，以及各種CSS屬性的應用與設定技巧。這本身並沒有什麼問題。也值得大家去研究學習。但往往忽視了一個重要的領域，那就是HTML。我在52CSS.com的文章中，不止一次的強調，語義和結構。大家可能也看得煩了。認為這沒有什麼，認為這並不重要。

　　沒有良好的HTML文檔作為基礎，我們的CSS網頁布局往往困難重重。如同是，一幛建築，本身就有品質問題。你去裝修，怎麼弄都會有問題，除了消耗更多的材料、精力，還會讓最終的裝修效果大打折扣。CSS網頁布局同樣如此，如果HTML文檔，本身結構不合理，沒有注重語義，我們除了要編寫更多的CSS樣式去定義，還會讓HTML代碼繁瑣。這與WEB標準本身的理念是背道而馳的。

　　我們52CSS.com今天繼續與大家討論這方面的內容。或許您看了下面的案例，你對HTML將會有新的認識。同時也希望能引起你學習的慾望，能意識到，CSS網頁布局，不止是學習CSS。

　　一、引子

　　在52CSS.com的論壇，有網友提出這樣一個問題，說是頁面元素在FF中出現了錯位的現象。

　　原貼：

　　開啟他的頁面，我們看到如下效果：

　　

 

　　查看HTML源檔案，得到了如下的代碼：　　

 

  

  
<div id=product> 
  

  
 
  

  
<span><a href="/product/Stainless_Steel_runching_hole_mesh/">Stainless Steel runching hole mesh</a></span><br /> 
  

  
<div id=list align="left"> 
  

  
<a href="/product/Stainless_Steel_runching_hole_mesh/"><img src="/up_files/image/article/2009/02/20/TN/34812561_70_80.jpg" alt="Stainless Steel runching hole mesh" border=0 /></a> <em>We can provide perforated metals for decoration, screening, separation, sifting,..</em> 
  

  
</div> 
  

  
 
  

  
<span><a href="/product/aluminim_plate_runching_hole_mesh/">aluminim plate runching hole mesh</a></span><br /> 
  

  
<div id=list align="left"> 
  

  
<a href="/product/aluminim_plate_runching_hole_mesh/"><img src="/up_files/image/article/2009/02/20/TN/33976161_70_80.jpg" alt="aluminim plate runching hole mesh" border=0 /></a> <em>Weaving and Characteridtic :it is punched to mesh ,including:aluminim plate mesh..</em> 
  

  
</div> 
  

  
 
  

  
<span><a href="/product/Expanded_Metal_Mesh/">Expanded Metal Mesh</a></span><br /> 
  

  
<div id=list align="left"> 
  

  
<a href="/product/Expanded_Metal_Mesh/"><img src="/up_files/image/article/2009/02/19/TN/60598081_70_80.jpg" alt="Expanded Metal Mesh" border=0 /></a> <em>Material: Superior steel material Processing: Expanded with steel or other meta..</em> 
  

  
</div> 
  

  
 
  

  
<span><a href="/product/crimped_wire_mesh/">crimped wire mesh</a></span><br /> 
  

  
<div id=list align="left"> 
  

  
<a href="/product/crimped_wire_mesh/"><img src="/up_files/image/article/2009/02/19/TN/60198941_70_80.jpg" alt="crimped wire mesh" border=0 /></a> <em>Material: Stainless steel wire 301 ,302 ,304, 304L ,316 ,316L, 321 Iron Wire Red..</em> 
  

  
</div> 
  

  
 
  

  
<span><a href="/product/Punching_Hole_Mesh/">Punching Hole Mesh</a></span><br /> 
  

  
<div id=list align="left"> 
  

  
<a href="/product/Punching_Hole_Mesh/"><img src="/up_files/image/article/2009/02/19/TN/34749721_70_80.jpg" alt="Punching Hole Mesh" border=0 /></a> <em>Also named mine screen mesh, mechanic screen mesh. It can be supplied in folded ..</em> 
  

  
</div> 
  

  
 
  

  
</div> 
 

　　相關CSS代碼：　　

 

  

  
#product{  
  

  
margin: 2px;  
  

  
}  
  

  
#product a{  
  

  
color: #1A9CCE;  
  

  
}  
  

  
#product a:hover{  
  

  
color: #EF8D3D;  
  

  
}  
  

  
#product span{  
  

  
font-family: Arial, Helvetica, sans-serif;  
  

  
font-size: 13px;  
  

  
line-height: 25px;  
  

  
font-weight: bold;  
  

  
color: #5199DB;  
  

  
float: left;  
  

  
margin-left: 2px;  
  

  
width: 250px;  
  

  
text-align: left;  
  

  
display: block;  
  

  
}  
  

  
.list{}  
  

  
.list img{  
  

  
float: left;  
  

  
height: 50px;  
  

  
width: 50px;  
  

  
border: 1px solid #CCCCCC;  
  

  
padding: 2px;  
  

  
margin: 2px;  
  

  
}  
  

  
.list em{  
  

  
clear: none;  
  

  
float: left;  
  

  
height: 50px;  
  

  
font-family: Arial, Helvetica, sans-serif;  
  

  
font-size: 12px;  
  

  
line-height: normal;  
  

  
color: #3587B3;  
  

  
padding: 2px;  
  

  
margin: 2px;  
  

  
font-style: normal;  
  

  
} 
 

　　對上面的代碼，作一下簡要的評述，可能並不全面。

　　1、id的定義需要用引號。如，div id=product，應為，div id="product"

　　2、同一個頁面中id具有唯一性，樓主將多個div的id設定為list

　　3、將樣式徹底分離到CSS中，而不是在HTML檔案內，align="left"類似這樣的代碼都要去除。

　　4、未重視HTML結構語義。HTML標籤應用不規範，如，標題用span，描述性圖片與文字用div。

　　5、再談語義，這個頁面元素本身的結構就是列表。可以用無序列表，也可以用定義列表。而不是樓主所理解的標籤組織方式。

　　6、頁面存在的問題可能是id為list的CSS定義，選取器是.list，樣式未產生作用。也可能是寬度理解差異造成的。

　　二、思考

　　上面的代碼編寫思路，在初學的時候往往認為是非常正確、無可厚非。只要用標籤將內容組織起來，然後應用CSS樣式進行定義，使HTML文檔在瀏覽器中顯示出想要的效果，即是進行了CSS網頁布局，不再是table布局而符合WEB標準了。

　　本文作者：52CSS.com 如需轉載請建立本站連結(http://www.52css.com/)，並且不得隨意改動文章內容、保留此著作權聲明文本!

　　其實不然，CSS網頁布局本身需要設定的對象就是HTML標籤與頁面元素。如果這些沒有組織好，再強大的CSS知識可能也無能為力。如上面的編碼，CSS設定繁瑣，更容易出錯。樣式本身不易於管理，等等。

　　那我們該如何對這樣的頁面元素進行定義呢?

　　或許您會想到無序列表ul，將每一組單元，看成是一個清單項目li，清單項目li中，再包括標題，縮圖和標題文字。。

　　

 

　　我們的HTML代碼可以是這樣：　　

 

  

  
<ul> 
  

  
    <li> 
  

  
    <strong><a href="">CSS執行個體：一個簡單的form搜尋表單</a></strong> 
  

  
    <p><a href=""><img src="01.jpg" alt="01" /></a></p> 
  

  
    CSS網頁布局中不可避免的會遇到表單元素。有網友提出了這樣的問題。對錶單...  
  

  
    </li> 
  

  
</ul> 
 

　　然而這樣應用也並不貼切。在XHTML中還有另外一種列表形式，定義列表dl。

　　可以參考這裡：

　　dt——代表HTML自訂欄表標題

　　可以將標題視為定義列表中列表組的標題dt。

　　dd——代表HTML自訂欄表描述

　　可以將縮圖和標題文字視為列表組中對標題的描述與釋義dd。

　　。

　　

 

　　我們的編碼可以是這樣的:　　

 

  

  
<dl> 
  

  
    <dt><a href="">CSS執行個體：一個簡單的form搜尋表單</a></dt> 
  

  
    <dd><a href=""><img src="01.jpg" alt="01" /></a>CSS網頁布局中不可避免的會遇到表單元素。有網友提出了這樣的問題。對錶單...</dd> 
  

  
</dl> 
 

　　三、解決

　　以上面的思考為基礎，開始對這個頁面元素重新編寫。HTML編碼。　　

 

  

  
<dl id="product"> 
  

  
    <dt><a href="">CSS執行個體：一個簡單的form搜尋表單</a></dt> 
  

  
    <dd><a href=""><img src="01.jpg" alt="01" /></a>CSS網頁布局中不可避免的會遇到表單元素。有網友提出了這樣的問題。對錶單...</dd> 
  

  
    <dt><a href="">用ul+li打造圖書目錄效果</a></dt> 
  

  
    <dd><a href=""><img src="02.jpg" alt="02" /></a>ul無序列表是一個非常重要的HTML標籤，頁面中許多元素都用它來組織。圖書目錄...</dd> 
  

  
    <dt><a href="">CSS經典技巧：text-indent隱藏文字</a></dt> 
  

  
    <dd><a href=""><img src="03.jpg" alt="03" /></a>以圖換字是CSS布局中非常常用的一種手段，因為圖片文字有時候比可選的文字的...</dd> 
  

  
    <dt><a href="">製作CSS半透明效果的浮動層</a></dt> 
  

  
    <dd><a href=""><img src="04.jpg" alt="04" /></a>CSS網頁布局中常常會遇到各種各樣的問題，由於產品和項目的需要，往往引出...</dd> 
  

  
    <dt><a href="">純CSS實現中英文雙語 導覽功能表</a></dt> 
  

  
    <dd><a href=""><img src="05.jpg" alt="05" /></a>CSS導覽功能表一直是大家所關心的問題。52CSS推出的執行個體也很多，今天向大家介...</dd> 
  

  
</dl> 
 

　　對上面的編碼進行CSS樣式定義.

　　

　　重設CSS樣式。

 

  

  
* {  
  

  
    margin:0;  
  

  
    padding:0;  
  

  
} 
 

　　定義整個dl的寬度，設定外邊距、內邊距和邊框。　

 

  

  
#product {  
  

  
    width:240px;  
  

  
    margin:30px auto;  
  

  
    padding:0 4px 8px 4px;  
  

  
    border:1px solid #ccc;  
  

  
} 
 

　　定義dt標題的樣式，設定寬度和高度，定義上外邊距、行距。強制在一行顯示，溢出隱藏。可以避免文字過多撐開dt的現象。　　

 

  

  
#product dt {  
  

  
    width:240px;  
  

  
    height:26px;  
  

  
    margin-top:8px;  
  

  
    line-height:26px;  
  

  
    white-space:nowrap;  
  

  
    overflow:hidden;  
  

  
} 
 

　　定義dt標題的連結樣式。　　

 

  

  
#product dt a {  
  

  
    font-size:14px;  
  

  
    color:#06f;  
  

  
    text-decoration:none;  
  

  
}  
  

  
#product dt a:hover {  
  

  
    color:#00f;  
  

  
    text-decoration:underline;  
  

  
} 
 

　　定義dd描述的CSS樣式，設定寬度和高度，定義文字大小與行距。設定溢出隱藏。這樣就將描述中的文字部分的CSS樣式編寫完畢了。　　

 

  

  
#product dd {  
  

  
    width:240px;  
  

  
    height:64px;  
  

  
    font-size:13px;  
  

  
    line-height:21px;  
  

  
    color:#333;  
  

  
    overflow:hidden;  
  

  
} 
 

　　定義dd描述中連結元素a的CSS樣式，向左浮動，定義邊框，右外邊距定義。使圖片與文字產生一定的距離。

　　定義縮圖的大小。使連結a元素的邊框與圖片有1px的距離，將外邊距設定為1px。設定邊框為0。

　　本文作者：52CSS.com 如需轉載請建立本站連結(http://www.52css.com/)，並且不得隨意改動文章內容、保留此著作權聲明文本!

　　在懸停狀態下，定義連結元素a的邊框顏色為藍色。

　　此至，編碼全部完成。

　　最終的效果：