使用html中列表应用实例,5种简单实用的css列表样式实例，可以直接用到项目中。...

本帖最后由 jianghejie 于 2012-6-29 11:51 编辑

谁不希望有一个好看而又干净的列表？这篇文章中我们给出几个实用的例子，你可以把他们直接用到自己的工作中。    我们从一个带有动画效果的垂直列表开始，接着是一个图文混排的例子，然后是一个只有图片的list例子跟一个水平菜单的例子，最后是一个以放大数字开头的列表。对于初学者而言这里可以学到很多东西，对于熟手，直接拿来用就是了。

这篇文章是我翻译的，适合初学者，也适合偷懒的程序员 这里字数限制只贴了3个例子 完整版本http://jcodecraeer.com/a/cssjiqiaoyuguifan/2012/0628/282.html

1.helvetica字体的列表

第一个例子的样式看起平淡无奇，不过喜欢简约风格的人也许会感兴趣，这类似于印刷字体风格，简结的同时也不失灵动的特点(当鼠标滑上去的时候)。注：个人喜欢这里的第二个图文混排的例子，但是发现老外更喜欢第一个，也许这就是文化差异吧。。。

这里是源码demo地址：CodePen

先看效果图：

screenshot

以下是html代码：

HelvetiList

• Zurich
• Geneva
• Winterthur
• Lausanne
• Lucerne

以下是css代码：

div {

width: 200px;

}

h2 {

font: 400 40px/1.5 Helvetica, Verdana, sans-serif;

margin: 0;

padding: 0;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

li {

font: 200 20px/1.5 Helvetica, Verdana, sans-serif;

border-bottom: 1px solid #ccc;

}

li:last-child {

border: none;

}

li a {

text-decoration: none;

color: #000;

display: block;

width: 200px;

-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;

-moz-transition: font-size 0.3s ease, background-color 0.3s ease;

-o-transition: font-size 0.3s ease, background-color 0.3s ease;

-ms-transition: font-size 0.3s ease, background-color 0.3s ease;

transition: font-size 0.3s ease, background-color 0.3s ease;

}

li a:hover {

font-size: 30px;

background: #f6f6f6;

}

2.图文混排的Thumbnail List

这是一种在很多网站上都用得比较普遍的列表样式，“图文混排”，图文混排往往比单一的文字更能吸引人的眼球，很多wordpress的博客网站都是用图文混排的板式。

这里是源码demo地址：CodePen.

先看效果图：

screenshot

以下是html代码：

•         

  Headline

  Lorem ipsum dolor sit amet...

•         

  Headline

  Lorem ipsum dolor sit amet...

•         

  Headline

  Lorem ipsum dolor sit amet...

•         

  Headline

  Lorem ipsum dolor sit amet...

比起上面的例子来，这里的代码要复杂一些。每个列表元素都有三个子元素：图片，标题，文字介绍。注意图片的大小这里需被固定为100px乘以100px，不然加在的图片大小不一会使排版混乱，你可以在html代码里强制设置为这个大小。总的来说实现起来还是比较简单的。

以下是css代码：

* {margin: 0; padding: 0;}

div {

margin: 20px;

}

ul {

list-style-type: none;

width: 500px;

}

h3 {

font: bold 20px/1.5 Helvetica, Verdana, sans-serif;

}

li img {

float: left;

margin: 0 15px 0 0;

}

li p {

font: 200 12px/1.5 Georgia, Times New Roman, serif;

}

li {

padding: 10px;

overflow: auto;

}

li:hover {

background: #eee;

cursor: pointer;

}

css代码页很简短。我们重设了所有元素的margin和padding。这里只需记住将图片向左浮动，这样文字就会紧挨着跟在后面。

3.标准的图片网格 Standard Thumbnail Grid

这里是源码demo地址：CodePen.

效果图：

screenshot

以下是html代码：

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

以下是css代码：

* {

margin: 0;

padding: 0;

}

body {

background: #333;

}

div {

width: 900px;

margin: 0 auto;

overflow: auto;

}

ul {

list-style-type: none;

}

li img {

float: left;

margin: 10px;

border: 5px solid #fff;

-webkit-transition: box-shadow 0.5s ease;

-moz-transition: box-shadow 0.5s ease;

-o-transition: box-shadow 0.5s ease;

-ms-transition: box-shadow 0.5s ease;

transition: box-shadow 0.5s ease;

}

li img:hover {

-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);

box-shadow: 0px 0px 7px rgba(255,255,255,0.9);

}

这里的重点是给每张图片加上一定的margin然后向左浮动，然后用over-flow:auto清除浮动(为保险起见，用了浮动之后一定要清除浮动)。给整个网格添加黑色背景，给每张图片加上边框。为了让网格更有趣，我加上了一个鼠标画上去显示发光的效果。你可以选择性的使用，不必将这个效果用在每一个项目中。