div css图片列表实例

来源：互联网发布：java自定义泛型类编辑：程序博客网时间：2024/04/28 16:05

1、DIVCSS5初始化模板
为了兼容各大浏览器，开发案例或项目建议下载使用。使用前先修改预先设置的样式（DIVCSS5初始化模板）。

2、图片素材
主要是使用PS切出所需内容图片素材。（已经放入images文件夹）

三、案例详细代码与效果截图 - TOP

1、CSS代码

ul.imglist{ margin:0 auto; width:536px; overflow:hidden} 
ul.imglist li{ float:left; padding:4px 8px; width:160px} 
ul.imglist li img{ display:block; width:160px; height:90px} 
ul.imglist li span{ display:block; width:100%; height:30px; line-height:30px; background:#F6F6F6}

2、主要HTML代码

<ul class="imglist"> 
    <li>
        <a href="#" target="_blank">
           <img src="images/i160x90.jpg" />
           <span>自制快手糟黄瓜 吃完整个</span>
        </a>
    </li> 
 
    <li>
        <a href="#" target="_blank">
           <img src="images/i160x90-2.jpg" />
           <span>标题内容 吃完整个</span>
        </a>
    </li> 
    <li>
        <a href="#" target="_blank">
           <img src="images/i160x90-3.jpg" />
           <span>自制快手糟黄瓜 吃完整个</span>
        </a>
    </li> 
    <li>
        <a href="#" target="_blank">
           <img src="images/i160x90-2.jpg" />
           <span>自制快手糟黄瓜 吃完整个</span>
        </a>
    </li> 
    <li>
        <a href="#" target="_blank">
           <img src="images/i160x90.jpg" />
           <span>自制快手糟黄瓜 吃完整个</span>
        </a>
    </li> 
    <li>
        <a href="#" target="_blank">
           <img src="images/i160x90-2.jpg" />
           <span>自制快手糟黄瓜 吃完整个</span>
        </a>
    </li> 
</ul>

3、效果截图

实际CSS图文列表实例在浏览器中效果截图

0 0