CSS如何实现图片列表?(代码实例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

CSS如何实现图片列表?相信有很多刚刚接触css的朋友都会有这样的疑问。本章就给大家介绍CSS如何实现图片列表?(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

CSS图片列表效果图:

CSS如何实现图片列表?(代码实例)

SS图片列表实现的HTML代码:

<h3><a href="http://www.php.cn/">我爱CSS画廊</a></h3> <ul>     <li>         <a href="http://www.php.cn/default.asp">         <img src="1.jpg" alt="1" />         <span>用css网站布局之十步实录</span>         </a>     </li>     <li>         <a href="http://www.php.cn/default.asp?cateID=3">         <img src="2.jpg" alt="2" />         <span>CSS网页布局中form表单的语义结构探讨</span>         </a>     </li>     <li>         <a href="http://www.php.cn/default.asp?cateID=9">         <img src="3.jpg" alt="3" />         <span>52CSS衣柜 一款图片为主的ul列表 </span></a>     </li>     <li>         <a href="http://www.php.cn/default.asp?cateID=5">         <img src="4.jpg" alt="4" />         <span>书写高效的CSS - 漫谈CSS的渲染效率</span>         </a>     </li>     <li>         <a href="http://www.php.cn/default.asp?cateID=6">         <img src="5.jpg" alt="5" />         <span>老生常谈CSS网页布局的意义与副作用</span>         </a>     </li>     <li>         <a href="http://www.php.cn/default.asp?cateID=7">         <img src="6.jpg" alt="6" />         <span>HTML页面中标签的语义与使用位置</span>         </a>     </li>     <div style="clear:both;"></div> </ul>

下面我们开始修改CSS样式定义,请在学习以下代码时,注意理解相关尺寸的定义的技巧,尺寸的计算和设置在CSS网页布局编码中,是非常重要的。

另外需要注意li的样式定义中display:inline属性的设置是为了消除IE6双倍边距了BUG。

CSS图片列表实现的CSS代码:

body,h3,ul {     margin:0;     padding:0; } h3 {     width:426px;     height:30px;     margin:20px auto 0 auto;     font-size:14px;     text-indent:10px;     line-height:30px;     background:#E4E1D3; } h3 a {     color:#c00;     text-decoration:none; } h3 a:hover {     color:#000; } ul {     width:405px;     margin:0 auto;     padding:10px 0 6px 15px;     border:3px solid #E4E1D3;     border-width:0 3px 3px 3px; } ul li {     float:left;     margin:5px 15px 3px 0;     list-style-type:none;     display:inline; } ul li a {     display:block;     width:120px;     height:175px;     text-decoration:none; } ul li a img {     width:120px;     height:150px;     border:0; } ul li a span {     display:block;     width:120px;     height:23px;     line-height:20px;     font-size:12px;     text-align:center;     color:#333;     cursor:hand;     white-space:nowrap;     overflow:hidden; } ul li a:hover span {     color:#c00; }

通过CSS样式的设置,实现了这款CSS图片列表的变化。六行一列式的结构,变成了两行两列式的结构。各元素间的边距设置恰当,比较美观。能适应网站应用的需要。

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » CSS如何实现图片列表?(代码实例)

发表评论

提供最优质的资源集合

立即查看 了解详情