- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
一个CSS布局实例，介绍的是一个横向排列的图片列表，这也是大家在从事网页布局时候最常见的一种布局实例，有必要掌握，本代码已经过了优化，个别细节你需根据你的网站主CSS风格进行调整，才能完美搭配。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>CSS 图片列表，横向</title> <style type="text/css"> <!-- * { margin:0; padding:0; font-size:12px; text-decoration:none; } #products { width:560px; margin:50px auto; } #products li { width:110px; height:154px; float:left; margin-left:30px; display:inline; } #products li a { display:block; } #products li a img { border:1px solid #666; padding:1px; } #products li span a { width:110px; height:30px; line-height:24px; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; } --> </style> </head> <body> <ul id="products"> <li><a href="#"><img src="http://www.mb5u.com/jscss/demoimg/wall_s2.jpg" alt="" width="100" height="75"/></a> <span><a href="#">VB定时关机源码示例</a></span> </li> <li><a href="#"><img src="http://www.mb5u.com/jscss/demoimg/wall_s3.jpg" alt="" width="100" height="75"/></a><span><a href="#">一个好用的C++日志生成类</a></span> </li> <li><a href="#"><img src="http://www.mb5u.com/jscss/demoimg/wall_s6.jpg" alt="" width="100" height="75"/></a> <span><a href="#">JS+CSS联合打造图文结合动感菜单</a></span> </li> </ul> </body> </html>