图文列表信息的表现方式是将列表内容以图片的形式在页面中体现，简单的说就是图片列表信息附带简短的文字说明，基本这种列表的xhtml结构都是最外层一个列表整体容器div，然后里面一个列表内容容器div，最里面是列表区域ul这样的。这样的结构不仅仅在xhtml代码中能很好的体现页面的层次感，而且方便后期通过css对其的利用。图文列表的排列方式最讲究的是宽度属性的计算，横向排列的列表当整体列表横向空间不足以将所有列表元素横向排列时候，浏览器会将列表元素换行显示，只有将宽度计算正确，才能将所有列表元素不换行的横向排列显示。下面是本实例的xhtml代码：
<div class="pic_list">
 <h3>网站制作成功案例</h3>
 <div class="content">
  <ul>
   <li><a href="#"><img src="images/1245043772194_7521.jpg" />成功案例</a></li>
   <li><a href="#"><img src="images/1245043843485_8207.jpg"/>成功案例</a></li>
   <li><a href="#"><img src="images/1245134073454_9288.jpg" />成功案例</a></li>
   <li><a href="#"><img src="images/1245134177473_9822.jpg" />成功案例</a></li>
   <li><a href="#"><img src="images/1245200548148_5487.jpg" />成功案例</a></li>
   <li><a href="#"><img src="images/1245201554383_4640.jpg" />成功案例</a></li>
  </ul>
 </div>
</div>
在这个例子中，每张图片宽度属性为134px，左右内补丁为3px,左右边框为1px，图片与图片的间距为15px，根据盒模型的计算方式，最终列表li标签的盒模型宽度值为

1px+3px+134px+3px+1px+15px=157px，图文列表的总区域为157px*6=942px。那么我们就可以将图文列表区域的相关区域css样式如下表示：
.pic_list .content {
 width:942px;
 height:150px;
 overflow:hidden; /* 设置图文列表内容区域的宽度和高度，超过部分隐藏 */
 padding:22px 0 0 15px; /* 利用内补丁增加图文列表内容区域与其他元素之间的间距 */
}
.pic_list .content li {
 float:left;
 width:142px;
 margin-right:15px; /* 列表li标签设置浮动后，所有列表将根据盒模型的计算方式计算列表宽度，并且并排显示 */
 display:inline; /* 设置浮动后并且增加了左右外补丁，IE6会产生双倍间距的bug，利用该属性解决 */
}
.pic_list .content 作为图文列表内容区域，增加相应的内补丁使其与整体之间有空间感，这是视觉效果中必然会处理的一个问题。
.pic_list .content li 因为其具有浮动属性，并且左右外补丁中其中一个的属性，所以在ie6中会出现双倍边距的问题，所以用display:inline来解决这个bug
主要内容设置成功后就可以对图文列表的整体效果做css样式的修饰，例如设置图文列表的背景和边框，以及图文列表标题的高度，文字样式和背景等；
.pic_list {
 width:960px; /* 设置图文列表整体的宽度 */
 border:1px solid #D9E5F5; /* 添加图文列表的边框 */
 background:url(images/wrap.jpg) repeat-x 0 0; /* 添加图文列表整体的背景图片 */
}
.pic_list * {
 margin:0;
 padding:0;
 list-style:none;
 font:normal 12px/1.5em "宋体", Verdana,Lucida, Arial, Helvetica, sans-serif;
} /* 重置图文列表内部所有基本样式 */
.pic_list h3 {
 height:34px;
 line-height:34px;
 font-size:14px;
 text-indent:12px;
 font-weight:bold;
 color:#223A6D;
 background:url(images/h3bg.jpg) no-repeat 0 0;
} /* 设置图文列表的标题的高度，行高，文字样式和背景图片 */

最后根据需要进行的工作室对图文列表信息细节及用户体验的把握，例如设置图片的边框，背景和文字颜色，并且还要考虑当鼠标经过图片时候，为了更好的体现视觉效果，给用户一个全新的体验，我

们还要添加当鼠标讲过图片列表信息时图片及文字的样式变化。
.pic_list .content li a {
 display:block; /* 将内联元素a标签转换为块元素使其具备宽高属性 */
 width:142px; /* 设置转换为块元素后的a标签的宽度 */
 text-align:center; /* 文本居中显示 */
 text-decoration:none; /* 文本下划线 */
 color:#333333; /* 文本的颜色 */
}
.pic_list .content li a img {
 display:block; /* 当图片设置为块元素时，可以解决IE6中图片底部几个空白像素的bug */
 width:134px;
 height:101px;
 padding:3px; /* 设置图片的宽高属性以及内补丁属性 */
 margin-bottom:8px; /* 将图片的底部外补丁设置8px，使其与文字之间产生一定间距 */
 border:1px solid #CCCCCC;
 background-color:#FFFFFF; /* 背景颜色将通过内补丁的空间显示 */
}
.pic_list .content li a:hover {
 text-decoration:underline;
 color:#CC0000; /* 当鼠标经过图文列表时，文字有下划线并且改变颜色 */
}
.pic_list .content li a:hover img {
 background-color:#22407E; /* 当鼠标经过图文列表时，图片的背景颜色改变 */
}
至此，大功告成，漂亮的图文列表信息经过简单的css样式处理后就此诞生于你的手中，天下星网站的首页成功案例以及栏目页客户案例里的图文列表都是用这种方法制作的，有兴趣的朋友可以看一下我

们网站的源码，此外将本文里面的xhtml和css代码粘贴到网页编辑软件后在浏览器中浏览也能看到相应效果。并且这些代码可以在制作图文列表的时候改改css参数直接使用。