CSS图片列表

1.效果图:

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

时间: 2024-09-28 15:15:44

CSS图片列表的相关文章

非等宽图片列表的布局

各大搜索引擎的图片频道的搜索结果页,搜索出来的结果都是较零碎的图片,图片质量.尺寸都是参差不齐的,并限定了每一行的总宽度.这种非等宽的图片列表,在Google+.flickr也都有用到. 最近刚好对360搜索的图片搜索结果页进行了一次重构和改版,对于这种图片布局也花心思研究了一番,接下来说说我的一些处理思路. 非等宽的单个图片要排列到一个固定了宽度的容器中,那么这个等宽的容器就是最大的限制和障碍,开始怀念那种常见等宽瀑布流的布局(没有限制真好). 先理下基本的需求: 1.图片的宽度是不固定的:

CSS控制列表样式属性list-style有哪些?怎么用?

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html 以下为回答原文: 一.什么是CSS列表? CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业

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

经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <!DOCTYPE html> <html lang="en" class="no-

div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决. 解决方法有两种: 第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形. 比如淘宝,要求店铺主上传

图片列表带箭头上下无缝滚动展示特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

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

<title>CSS文章列表</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} a,a:visited{color:#5e5e5e; text-decoration:none;} a:hover{color:#b52725;text-decoration:underline;} .clear{display:bloc

学习笔记 第八章 使用CSS美化列表

第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: <ol>...</ol>:标识有序列表: <li>...<li>:标识列表项目. 另外,还可以使用定义列表.定义列表包括词条和解释两块内容.包含的标签说明如下: <dl>...</dl>:标识定义列表: <dt>...<

23 , CSS 构造列表与导航

1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: 0; Padding:0; Width: 200px; List-style-image:url(images/list.gif); Line-height: 150%; } 3. 以背景图片作为项目列表图标 Ul { List-style-type:none; } Li { Background:

2019.12.9图片列表实例

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>图片列表布局</title></head><style type="text/css"> body,ul,h3{ margin: 0; padding: 0; } ul{ list-style: none; } /*