Div+CSS布局執行個體:用dl dt dd來製作列表

文章目錄

• Tags：

關於用DIV+CSS來製作列表的時候,大家最常用的是用ul和li來編寫,但是這樣用出現兩個比較麻煩的地方：

　　1、如果用UL還布局，右邊一欄比較麻煩；
　　2、文字外邊的邊框自適應比較麻煩；
　　3、很可能要定死高度；

　　所以，細細地看一看這個布局，想一想還是用DL.DT.DD作是合理的：

　　1、布局合理一些；
　　2、將來擴充很方便；
　　3、CSS一定很少；

 

　　試著寫了寫，看一看還行！在可控範圍內！

　　布局布分當然不用說了：

原始碼如下:

用DL、DT和DD來製作列表

<h1>標題</h1> <div>   <dl>     <dt><a href="32">·部落格裡的文章是我自己寫的！</a></dt>     <dd>作者：張三</dd>   </dl>   <dl>     <dt><a href="3232">·部落格裡的文章是我自己寫的！</a></dt>     <dd>作者：張三</dd>   </dl>   <dl>     <dt><a href="3232">·部落格裡的文章是我自己寫的！</a></dt>    <dd>作者：張三</dd>   </dl>........... </div>

 

CSS部分

*{ margin:0; padding:0;} body{ font-size:12px; line-height:1.8; padding:10px;} dl{clear:both; margin-bottom:5px;float:left;} dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF} dd{ position:absolute; right:5px;} h1{clear:both;font-size:14px;}

 

Tags：