冰剑'blog

今天做页面遇到一个这样的图！


以前都是左边图片一个容器，右边一个容器，但是现在了解了语义化之后，觉得以前做的很不规范，为了更加的规范化，就将上面的图发到群里和朋友们一起讨论了一下。收获还真不小。
下面我就来说一下这个图的html结构，这里不讨论样式，结构出来了，样式怎么写都可以的。

首先我决定把这个用一个定义列表来表示。
群里的朋友们给我了这个结构：

<br/><dl><br/>    <dt><img src="图片url">我是标题</dt><br/>    <dd>我是内容</dd><br/></dl><br/>

因为图片和标题应该都算是这个表现的主题，我采取了这样的结构。
还有朋友认为要用这个结构：

<br/><dl><br/>    <dt>我是标题</dt><br/>    <dd><img src="图片url">我是内容</dd><br/></dl><br/>

最后我采取的是第一种结构。

我觉得这个都没有任何的错误，其实这个主要看自己怎么理解了。

结构：

<br/><dl><br/>        <dt class="redlink"><a href="#"><img src="index/images/06.jpg" /><b>这里是小沈阳的表演</b></a></dt><br/>        <dd>这个小沈阳啊真是太坏了，快透了 </dd>                      <br/></dl><br/>

样式：

<br/> dl {height:60px; overflow:hidden; margin:0px; padding:0px; padding-left:90px;}<br/> dl img {height:50px; width:80px; padding:2px; background:#FFF; border:#DCDCDC solid 1px; float:left; margin-left:-90px;}<br/> dl dt b {width:210px; display:block; height:20px; padding-top:5px; font-size:12px;}<br/> dl dd {width:210px; height:35px; line-height:17px; font-size:12px; margin:0px; padding:0px; color:#999; overflow:hidden;}<br/>