大家都在学习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;
- 250px;
- text-align: left;
- display: block;
- }
- .list{}
- .list img{
- float: left;
- height: 50px;
- 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 {
- 240px;
- margin:30px auto;
- padding:0 4px 8px 4px;
- border:1px solid #ccc;
- }
定义dt标题的样式，设置宽度和高度，定义上外边距、行距。强制在一行显示，溢出隐藏。可以避免文字过多撑开dt的现象。
- #product dt {
- 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 {
- 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的边框颜色为蓝色。
此至，编码全部完成。
最终的效果如图所示：
