5种简单实用css列表样式实例.docxVIP

5种简单实用的css列表样式实例来源：/index.asp谁不希望有一个好看而又干净的列表？这篇文章中我们给出几个实用的例子，你可以把他们直接用到自己的工作中。 我们从一个带有动画效果的垂直列表开始，接着是一个图文混排的例子，然后是一个只有图片的list例子跟一个水平菜单的例子，最后是一个以放大数字开头的列表。对于初学者而言这里可以学到很多东西，对于熟手，直接拿来用就是了。 1.helvetica字体的列表 第一个例子的样式看起平淡无奇，不过喜欢简约风格的人也许会感兴趣，这类似于印刷字体风格，简结的同时也不失灵动的特点（当鼠标滑上去的时候）。注：个人喜欢这里的第二个图文混排的例子，但是发现老外更喜欢第一个，也许这就是文化差异吧。。。 这里是源码demo地址：CodePen 先看效果图： 以下是html代码  div h2HelvetiList/h2 ul lia href=#Zurich/a/li lia href=#Geneva/a/li lia href=#Winterthur/a/li lia href=#Lausanne/a/li lia href=#Lucerne/a/li /ul /div 以下是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. 先看效果图： 以下是html代码：  div ul li img src=/100/100/nature/1 / h3Headline/h3 pLorem ipsum dolor sit amet.../p /li li img src=/100/100/nature/2 / h3Headline/h3 pLorem ipsum dolo