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

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

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

之间)

HTML代码：

明月几时有

明月几时有，把酒问青天，不知天上宫阙，今夕是何年；我欲乘风归去，又恐琼楼玉宇，高处不胜寒。明月几时有，把酒问青天，不知天上宫阙，今夕是何年；我欲乘风归去，又恐琼楼玉宇，高处不胜寒。

时尚界一姐

范冰冰引领着中国时尚界的潮流，可谓是时尚界的一姐。就连早已成名的杨幂也在追随者范冰冰，诚然，范冰冰确实有着过人之处，她身上那种自然而然散发出来的气质不是常人所能匹及。人们说，气质是由内而外，从一个人的骨子里往外散发出来的，并不是学出来的，也不是装模作样就能装出来的。范冰冰就是这样一个人，她有着与众不同的气质，再加上她的天生丽质，为无数万千影迷拥护着。

人体肖像

这个人是谁已经忘了，因为没有网络只好随便找来一张图稍作修改就放在网页里了。只能用作网页的一个小小的点缀，为完成自定义列表的完美功能而临时找的一个素材罢了。

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

图片标题

图片描述

图片标题

图片描述

图片标题

图片描述

仅仅是一个外层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，这样的维护看起来多么方便；假如有一天这个页面中需要添加一条“文字在左、图片在右”的图文混排的文字和图片，那么在

的前面添加一个自定义列表就行了