图文列表

最终效果：

DIV结构如下：
│body {}　/*这是一个HTML元素*/
└# tab1 {}　/*页面层容器*/
├. tablist {}　/*标题栏目*/
├.tu{}　/*图文内容*/
├.tabcontent {}　/*列表内容*/

html代码如下：

<div id=”tab1″>
<div class=”tablist”>都市言情小说</span></div>
<dl class=”tu”>
<dt><img src=”images/preview.jpg” /></dt>
<dd><b><a href=”#”>斗天</a></b>
斗天别人修神，而他灭天。他一生所要完成的任务：竟是逆天而行，灭绝诸神！<a href=”#”>[阅读]</a></dd>
</dl>
<ul class=”tabcontent”>
<li>[异能]<a href=”#”> 纵横天下异能为尊：浩天风云录</a></li>
<li>[黑道]<a href=”#”> 斯文人混黑道：我当大哥的日子</a></li>
<li>[重生]<a href=”#”> 回到高中时代：重生之无悔一生</a></li>
<li>[异能]<a href=”#”> 中大奖遭横祸：都市风云之变脸</a></li>
<li>[黑道]<a href=”#”> 异能小子纵横黑社会：黑道修神</a></li>
</ul>
</div>

CSS样式如下：

*{margin:0px; padding:0px;}
body{ color:#333; line-height:22px; font-size:12px;}
ul,li{ list-style-type:none;}
a{ color:#333; text-decoration:none;}
a:hover{color:#FF0000;}
.fl{float:left;}
.fr{float:right;}
#tab1{ margin:20px auto; width:350px; overflow:hidden; border:solid 1px #6BB1DD;}
.tablist{float:right; background:url(images/tl.gif) repeat-x; width:350px; height:28px; line-height:28px;}
.tablist span{ float:left; color:#0065A5; font-weight:bold; padding-left:10px; font-size:14px;}
.tabcontent{ padding:3px 0px 5px 10px; float:left; width:340px;}
.tu dt img{float:left; width:83px; height:108px; padding:12px 0px 0px 10px; display:block;}
.tu dd{float:right; width:240px; padding-top:12px; padding:12px 8px 0px 8px;}

原文链接：https://www.novelrd.cn/banzhu/shuoming/87.html，转载请注明出处。