WEB前端设计完美的自定义列表dl，dt，dd

悟静 2012-11-05

展开全文

经常会在网页上看见类似这样的页面效果：

下面就应用无懈可击的WEB设计方案来实现它：（HTML代码添加在BODY之中，CSS代码添加在<style></style>之间，<style></style>一定要编辑在<head></head>之间）

HTML代码：

<div id="box">
<dl class="box-left">
      <dt><a href="images/moon1.jpg" target="_blank"><img src="images/suo-moon1.jpg" width="200" height="200" /></a></dt>
      <dd class="box-text">明月几时有</dd>
      <dd class="box-shuoming">明月几时有，把酒问青天，不知天上宫阙，今夕是何年；我欲乘风归去，又恐琼楼玉宇，高处不胜寒。明月几时有，把酒问青天，不知天上宫阙，今夕是何年；我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</dd>
    </dl>
    <dl class="box-right">
      <dt><a href="images/fanbb.jpg" target="_blank"><img src="images/suo-fanbb.jpg" width="200" height="200" /></a></dt>
      <dd class="box-text">时尚界一姐</dd>
      <dd class="box-shuoming">范冰冰引领着中国时尚界的潮流，可谓是时尚界的一姐。就连早已成名的杨幂也在追随者范冰冰，诚然，范冰冰确实有着过人之处，她身上那种自然而然散发出来的气质不是常人所能匹及。人们说，气质是由内而外，从一个人的骨子里往外散发出来的，并不是学出来的，也不是装模作样就能装出来的。范冰冰就是这样一个人，她有着与众不同的气质，再加上她的天生丽质，为无数万千影迷拥护着。</dd>
    </dl>
    <dl class="box-left">
      <dt><a href="images/renxiang.jpg" target="_blank"><img src="images/suo-renxiang.jpg" width="200" height="200" /></a></dt>
      <dd class="box-text">人体肖像</dd>
      <dd class="box-shuoming">这个人是谁已经忘了，因为没有网络只好随便找来一张图稍作修改就放在网页里了。只能用作网页的一个小小的点缀，为完成自定义列表的完美功能而临时找的一个素材罢了。</dd>
    </dl>
</div>

其实上面的文档结构非常简单：

仅仅是一个外层DIV包围了三个自定义列表，如果没有CSS，这篇文档结构一样具有可读性，不存在文档内容的缺失，这是无懈可击方案之一；

来看CSS样式：（下面的红色字是对每一行CSS语句的解释，也叫“注释”，在运行代码时要将其注释，应用

用这个注释把所有的红字都注释掉，浏览器就不会解释执行这些文字了；或者将这些文字干脆删除）

* { 这个声明初始化了页面中所有元素的外边界和内边界同意为“0”
margin:0;
padding:0;
}
#box { 初始化“盒模型”，设置宽度，因为不确定高度所以不设高度

width: 500px;
border: 2px solid #E6E6E6;
font-size:15px;
font-family:"微软雅黑";
color:#414141;
margin:20px;
display:inline; 这条声明可以处理IE6浏览器双倍MARGIN的问题（BUG）,“例如：同时存在MARGIN-LEFT:20PX;FLOAT:LEFT; ，那么IE6浏览器会出现左侧外边距40px而不是20px”
float:left; 这条能够使外层的DIV不脱离内层元素浮动后的文档流
}
.box-text { 图片标题样式
font-size:150%;
font-weight:bold;
color:#689EE8;
padding-bottom:10px;  图片标题和图片描述之间的间距
}
.box-shuoming {    图片描述样式
text-indent:2em;   首行缩进
line-height:1.5em;   行高
font-family:"宋体";
color:#707881;
}
#box dl {   对每个自定义列表的总体样式
width:480px;   宽度+两个外边距=外层DIV的总宽度500px
margin:10px;   缩写，表示上下左右外边距都为10px
margin-bottom:20px;   单独定义向下外边距
display:inline;  处理IE6浏览器双倍MARGIN的BUG
float:left;
}
#box dt img {    定义图片样式
padding:4px;    内边距和边框结合会产生相框的效果
border:1px solid #DCDCDE;    边框的缩写，宽度1px，实线，颜色#DCDCDE
border-bottom-color:#7F7F7F; 右侧和下边边框颜色加深形成阴影效果
border-right-color:#7F7F7F;
}
#box .box-left dt {    设置图片在左、文字在右的样式
float:left;
width:210px;    设置浮动时通常要定义宽度，以免出错，图片宽200+内边距4*2+边框1*2=210
margin-right:20px;    设置图片与右侧文本之间的间距
}
#box .box-left dd {    设置图片在左、文字在右的样式
float:left;
width:250px;    文本宽度：480-210-20（margin-right:20px）=250
}
#box .box-right dt {    设置图片在右、文字在左的样式
float:right;
width:210px;
}
#box .box-right dd {    设置图片在右、文字在左的样式
float:left;
width:250px;
margin-right:20px;
}

为什么说他是无懈可击的呢？

1、W3C标准最首要的就是文档的结构、表现和行为相分离，在这个例子中文档的结构和表现完全分离，符合W3C标准；

2、文档结构一定要以最简洁的代码来实现，这里的HTML代码可谓非常简单；

3、文档结构要具有语义化，使人能够读懂，这里的结构每一行都具有语义化

4、巧妙的应用浮动元素实现了不同的“分栏式”效果；

5、最关键的就是这一点，上述事情都做到之后，这里的HTML代码和CSS代码都非常利于以后的维护。比如说，我想调整图片的大小为100*100像素的大小。那么我不需要改动任何HTML代码，只需要改动其中的CSS代码就OK了，将#box .box-left dt {width:210px;}其中的宽度改为110px，同时将#box .box-left dd{width:250px;}其中的宽度改为350px，这样的维护看起来多么方便；假如有一天这个页面中需要添加一条“文字在左、图片在右”的图文混排的文字和图片，那么在</div>的前面添加一个自定义列表就行了

<dl class="box-right">
<dt><img src="一张新图片" width="" height="" /></dt>
<dd class="box-text">图片标题</dd>
<dd class="box-shuoming">图片描述</dd>
</dl>
甚至我们都不需要修改任何CSS样式表。

6、兼容IE6、IE7、IE8、IE9、FIREFOX、OPERA、SAFARI等等所有世界主流浏览器。

这就是无懈可击的WEB设计。