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图文列表实例在浏览器中效果截图