CSS图片列表

时间:2022-09-21 22:04:45

1.效果图:

CSS图片列表

2.Example Source Code

<h3><a href="http://www.52css.com/">我爱CSS画廊</a></h3>
<ul>
    <li>
        <a href="http://www.52css.com/default.asp">
        <img src="1.jpg" alt="1" />
        <span>用css网站布局之十步实录</span>
        </a>
    </li>
    <li>
        <a href="http://www.52css.com/default.asp?cateID=3">
        <img src="2.jpg" alt="2" />
        <span>CSS网页布局中form表单的语义结构探讨</span>
        </a>
    </li>
    <li>
        <a href="http://www.52css.com/default.asp?cateID=9">
        <img src="3.jpg" alt="3" />
        <span>52CSS衣柜 一款图片为主的ul列表 </span></a>
    </li>
    <li>
        <a href="http://www.52css.com/default.asp?cateID=5">
        <img src="4.jpg" alt="4" />
        <span>书写高效的CSS - 漫谈CSS的渲染效率</span>
        </a>
    </li>
    <li>
        <a href="http://www.52css.com/default.asp?cateID=6">
        <img src="5.jpg" alt="5" />
        <span>老生常谈CSS网页布局的意义与副作用</span>
        </a>
    </li>
    <li>
        <a href="http://www.52css.com/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 Example Source Code :

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图片列表的变化。六行一列式的结构,变成了两行两列式的结构。各元素间的边距设置恰当,比较美观。能适应网站应用的需要。

CSS图片列表的更多相关文章

  1. jQ图片列表光标移动动画

    本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 效果展示: http://hovertree.com/texiao/jquery/88/ 效果图如下: 其中的jQ ...

  2. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  3. 一个带标号的CSS文章列表写法

    <title>CSS文章列表</title> <style type="text/css"> *{margin:0;padding:0;list ...

  4. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  5. jquery控制左右箭头滚动图片列表

    jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  6. 23 &comma; CSS 构造列表与导航

    1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...

  7. jQuery实现鼠标滑过图片列表加遮罩层

    这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

  8. 代码:PC HTML——图片列表

    图片列表: 2016-6-12 可作为图片列表的规范性写法.这个例子只处理了单行的模式.( 一行多列 ) <link href="css/common.css" rel=&q ...

  9. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: &lt ...

随机推荐

  1. input&lpar;file&rpar;样式修改及上传文件名显示

    实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...

  2. nginx error&lowbar;log 错误日志配置说明

    nginx的error_log类型如下(从左到右:debug最详细 crit最少): [ debug | info | notice | warn | error | crit ] 例如:error_ ...

  3. GDAL C&num; 开发出现的异常

    在使用开发C#下的GDAL时,编译时正确. 在执行 Gdal.AllRegister(); 出现异常:OSGeo.GDAL.GdalPINVOKE”的类型初始值设定项引发异常. 解决方案: 编译正常, ...

  4. composer autoload

    1.引入autoload 文件 include “vendor/autoload.php” 2.自定义的单文件引入 “autoload”:{ "files":["lib/ ...

  5. Unity3d&colon;延迟加载ScrollView的内容

    问题描述:在一个scrollview中加载了大量的数据,有文字.图片.视频等等,首次加载的时候会很慢很卡,而且加载出来后,内存占用很大.解决方案1:思:固定一块区域,当物体滚动到这区域的时候再加载物体 ...

  6. Java遍历Map、List、Array

    1.遍历array,使用for循环或者foreach(本人建议使用) int arr[] = {2, 3, 1}; System.out.println("----1----排序前的一维数组 ...

  7. android 删除SD卡或手机的缓存图像和文件夹

    public static final String TEMP_PHOTO_FILE_NAME = "temp_photo.jpg"; private static String ...

  8. Keras官方中文文档:关于Keras模型

    关于Keras模型 Keras有两种类型的模型,序贯模型(Sequential)和函数式模型(Model),函数式模型应用更为广泛,序贯模型是函数式模型的一种特殊情况. 两类模型有一些方法是相同的: ...

  9. Asp&period;net core 学习笔记 SignalR

    refer : https://kimsereyblog.blogspot.com/2018/07/signalr-with-asp-net-core.html https://github.com/ ...

  10. Heartbleed心脏出血漏洞原理分析

    Heartbleed心脏出血漏洞原理分析 2017年01月14日 18:14:25 阅读数:2718 1. 概述    OpenSSL在实现TLS和DTLS的心跳处理逻辑时,存在编码缺陷.OpenSS ...