《5种简单实用的css列表样式实例.doc》由会员分享，可在线阅读，更多相关《5种简单实用的css列表样式实例.doc（13页珍藏版）》请在金锄头文库上搜索。
1、5种简单实用的css列表样式实例谁不希望有一个好看而又干净的列表？这篇文章中我们给出几个实用的例子，你可以把他们直接用到自己的工作中。我们从一个带有动画效果的垂直列表开始，接着是一个图文混排的例子，然后是一个只有图片的list例子跟一个水平菜单的例子，最后是一个以放大数字开头的列表。对于初学者而言这里可以学到很多东西，对于熟手，直接拿来用就是了。1.helvetica字体的列表第一个例子的样式看起平淡无奇，不过喜欢简约风格的人也许会感兴趣，这类似于印刷字体风格，简结的同时也不失灵动的特点（当鼠标滑上去的时候）。注：个人喜欢这里的第二个图文混排的例子，但是发现老外更喜欢第一个，也许这就是文化差异
2、吧。这里是源码demo地址：CodePen先看效果图：以下是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; bo
3、rder-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, b
4、ackground-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的博客网站都是用图文混排的板式
5、。这里是源码demo地址：CodePen.先看效果图：以下是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代码里强制设置为这个大小。总的来
6、说实现起来还是比较简单的。以下是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
7、background: #eee; cursor: pointer; css代码页很简短。我们重设了所有元素的margin和padding。这里只需记住将图片向左浮动，这样文字就会紧挨着跟在后面。3.标准的图片网格 Standard Thumbnail Grid这里是源码demo地址：CodePen.效果图：以下是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: bo
