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的边框颜色为蓝色。

　　此至，编码全部完成。

　　最终的效果如图所示：