5种简单实用的css列表样式实例文档格式.docx
《5种简单实用的css列表样式实例文档格式.docx》由会员分享，可在线阅读，更多相关《5种简单实用的css列表样式实例文档格式.docx（17页珍藏版）》请在冰点文库上搜索。
/h2>
ul>
li>
ahref="
#"
>
Zurich<
/a>
/li>
Geneva<
Winterthur<
Lausanne<
Lucerne<
/ul>
/div>
以下是css代码：
div{
width:
200px;
}
h2{
font:
40040px/1.5Helvetica,Verdana,sans-serif;
margin:
0;
padding:
ul{
list-style-type:
none;
li{
20020px/1.5Helvetica,Verdana,sans-serif;
border-bottom:
1pxsolid#ccc;
li:
last-child{
border:
lia{
text-decoration:
color:
#000;
display:
block;
-webkit-transition:
font-size0.3sease,background-color0.3sease;
-moz-transition:
-o-transition:
-ms-transition:
transition:
lia:
hover{
font-size:
30px;
background:
#f6f6f6;
2.图文混排的ThumbnailList
这是一种在很多网站上都用得比较普遍的列表样式，“图文混排”，图文混排往往比单一的文字更能吸引人的眼球，很多wordpress的博客网站都是用图文混排的板式。
CodePen.
以下是html代码：
imgsrc="
/>
h3>
Headline<
/h3>
p>
Loremipsumdolorsitamet...<
/p>
比起上面的例子来，这里的代码要复杂一些。
每个列表元素都有三个子元素：
图片，标题，文字介绍。
注意图片的大小这里需被固定为100px乘以100px，不然加在的图片大小不一会使排版混乱，你可以在html代码里强制设置为这个大小。
总的来说实现起来还是比较简单的。
*{margin:
}
20px;
500px;
h3{
bold20px/1.5Helvetica,Verdana,sans-serif;
liimg{
float:
left;
015px00;
lip{
20012px/1.5Georgia,TimesNewRoman,serif;
li{
10px;
overflow:
auto;
#eee;
cursor:
pointer;
css代码页很简短。
我们重设了所有元素的margin和padding。
这里只需记住将图片向左浮动，这样文字就会紧挨着跟在后面。
3.标准的图片网格StandardThumbnailGrid
效果图：
http:
//placehold.it/150x150"
*{
body{
#333;
div{
900px;
0auto;
liimg{
5pxsolid#fff;
box-shadow0.5sease;
liimg:
-webkit-box-shadow:
0px0px7pxrgba（255,255,255,0.9）;
box-shadow:
这里的重点是给每张图片加上一定的margin然后向左浮动，然后用over-flow:
auto清除浮动（为保险起见，用了浮动之后一定要清除浮动）。
给整个网格添加黑色背景，给每张图片加上边框。
为了让网格更有趣，我加上了一个鼠标画上去显示发光的效果。
你可以选择性的使用，不必将这个效果用在每一个项目中。
4.水平菜单HorizontalMenu
在这里查看demo和源码CodePen.
html代码：
nav>
Home<
<
liclass="
active"
About<
Portfolio<
Contact<
<
/nav>
css代码：
*{
nav{
50px;
ul{
li{
height:
25px;
margin-right:
0px;
border-right:
1pxsolid#aaa;
020px;
last-child{
lia{
#ccc;
25px/1Helvetica,Verdana,sans-serif;
text-transform:
uppercase;
all0.5sease;
lia:
hover{
#666;
li.activea{
font-weight:
bold;
}
5.大数字开头的列表BigNumbersOrderedList
上面介绍的都是无序的列表，如果我们想要一个有序的列表，在每一个列表元素的最开头加上数字能提示用户这是一个按顺序排列的内容。
如果能将这个数字的样式显示的不同，将会有更好的直观感受。
ol>
span>
1.<
/span>
Loremipsumdolorsitamet,consecteturadipiscingelit.Praesenteuismod
ultricesante,aclaoreetnullavestibulumadipiscing.Namquisjustoinaugueauctorimperdiet.
Curabituraliquetorcisitametestposuereconsectetur.Fuscenecleoutmassaviverravenenatis.
Namaccumsanliberoaelitaliquetquisullamcorperarcutincidunt.Praesentpurusturpis,
consecteturquisconguevel,pulvinaratlorem.Vivamusvariuscondimentumdolor,quisultricies
ipsumportaquis.<
2.<
ultricesante,aclaoreetnullavestibulumadipiscing.Namquisjustoinaugueauctorimperdiet.
Curabituraliquetorcisitametestposuereconsectetur.<
3.<
/ol>
div{
10px
ol{
olli{
position:
relative;
bolditalic45px/1.5Helvetica,Verdana,sans-serif;
margin-bottom:
lip{
12px/1.5Helvetica,sans-serif;
padding-left:
60px;
#555;
span{
absolute;
上面就是5个简单而又实用的列表实例，如果你喜欢，可以直接拿去用。
升级会员 