div+css html列表

1） 列表前有图标

ul为无序列表，ol为有序列表。如果将列表前改成图片，实现如下：

#layout ul { list-style: none;}//layout为div的id

#layout ul li { background:url(/upload/2010-08/17/icon.gif) no-repeat 0px 4px;padding-left: 20px; }

2） 横向图文列表：如qq的相册

body { margin:0 auto;font-size:12px; font-family:Verdana; line-height:1.5;}

ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form{ padding:0; margin:0;}

ul { list-style:none;}

img { border:0px;}

a { color:#05a; text-decoration:none;}

a:hover { color:#f00;}

#layout ul li { width:72px;float:left; margin:20px 0 0px 20px; display:inline;text-align:center;}

#layout ul li a {display:block;}

#layout ul li a img {padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}

#layout ul li a:hover img {padding:0px; border:2px solid #f98510;}

 

<divid="layout">

<ul>

<li><ahref="#"><img src="c.gif" width="68"height="54"/>三亚</a></li>

<li><ahref="#"><img src="p.gif" width="68"height="54" />三亚</a></li>

</ul>

</div>

    此时父容器的高度没有被子元素的高度而撑高，为解决此问题，让高度自适应overflow:auto；zoom：1是为了解决IE6不兼容的问题。