Div+CSS布局实例:用dl dt dd来制作列表

关于用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;}

 

以上就是Div+CSS布局实例:用dl dt dd来制作列表的详细内容，更多关于Div+CSS布局实例:用dl dt dd来制作列表的资料请关注九品源码其它相关文章！