<style type="text/css"> /*body默认是有边距的*/ body{ margin:0;} /*ul默认是有边距的所以先将边距去掉IE78只要加上margin就可以了 但IE6不行 所以要加上padding 可以实现所有浏览器的兼容*/ ul{list-style:none; margin:0; padding:0;} </style> <body> <ul> <li>习近</li> <li>李克</li> <li>温家</li> <li>胡锦</li> <li>贾庆</li> </ul> </body>
1.设置列表符号的样式：list-style-type
none 无符号
disc
实体的小圆点。(默认)
circle 空心的小圆点。
square 实心的小方块。
decimal
1,2,3...
lower-roman i,ii,iii...
upper-roman
I,II,III...
lower-alpha a,b,c,d,e...
upper-alpha
A,B,C,D,E...
<style type="text/css"> ul{list-style:none;} #df{list-style:lower-roman;} </style> </head> <body> <ul> <li id="df"> 站在岁月的岸边，向自己的过往打个水漂吧……</li> <li>2011我娶你，2012我保护你，2013爱你一生，2014爱你一世！</li> <li>人生就像一场旅行，在乎的不是目的地。而是沿途的"SB"，以及对付"SB"时的心情！</li> <li>臭男人都喜欢骚女人。</li> <li>系好安全带，前方也许有场爱情正等着你。</li> <li>枕着打印机睡，就能打印出一整夜的梦吧？</li> </ul> </body>
2.设置列表符号的样式用图片（这种方法很少用）：list-style-image
<style type="text/css"> body{margin:50px;} ul{list-style:none; margin:0; padding:0; list-style-image:url(fasfas.gif); line-height:150%;} </style> <body> <ul> <li>习近</li> <li>李克</li> <li>温家</li> <li>胡锦</li> <li>贾庆</li> </ul> </body>
3.设置清单项目左右移：list-style-position
inside
清单项目较往右移。
outside 清单项目正常显示(默认的属性)。
4.以背景图片作为项目列表图标：这种方法比较好（常用），可以随意调动
<style type="text/css"> body{ margin:50px; } ul{ list-style:none; margin:0; padding:0; } ul li{ background:url(fasfas.gif) no-repeat left 50%;/*只显示一个*/ padding-left:20px; } </style> <body> <ul> <li>习近</li> <li>李克</li> <li>温家</li> <li>胡锦</li> <li>贾庆</li> </ul> </body>
5.内联列表：
ul和li默认是区块的，查看是否是区块可以加上颜色测试，将列表转换为内联之后项目图标会不见，可以使用浮动或者使用下面的列子来实现
这里的 display 属性是块级值的设置,定义是否要成为块.Inline 是是内联,block 是区块.
<style type="text/css"> body{margin:50px;} ul{list-style:none; margin:0; padding:0;} li{display:inline;} </style> <body> <ul> <li>习近</li> <li>李克</li> <li>温家</li> <li>胡锦</li> <li>贾庆</li> </ul> </body>
6.背景图片和内联列表：使用这种方法再将li变成内联的时候背景图片仍然还在
<style type="text/css"> body{margin:50px;} ul{list-style:none; margin:0; padding:0;} li{display:inline; background:url(fasfas.gif) no-repeat left center; padding-left:20px;} </style> <body> <ul> <li>习近</li> <li>李克</li> <li>温家</li> <li>胡锦</li> <li>贾庆</li> </ul> </body>
7.垂直导航栏：
<style type="text/css"> body{margin:50px;} ul{list-style:none; margin:5px; padding:2px; width:250px; font-size: 19px;} li { background: #ddd url(fasfas.gif) no-repeat 10px center; margin: 0; padding: 2px 35px; border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #666; border-bottom: 1px solid #aaa;} </style> <body> <div> <ul> <li><a href="#">Drubjs Menu</a></li> <li><a href="#">Beer</a></li> <li><a href="#">Spirits</a></li> <li><a href="#">Cola</a></li> <li><a href="#">Lemonade</a></li> <li><a href="#">Tea</a></li> <li><a href="#">Coffee</a></li> </ul> </div> </body>
8、创建垂直翻转的列表：
<style type="text/css"> body{ margin:50px; } ul{ list-style:none; margin:0; font-size:16px; } ul li a{ display:block; width:200px; height:40px; line-height:40px; color:#000; text-decoration:none; background:#94b8e9 url(2014-03-08_220129.gif) no-repeat left center; Text-indent:50px; } a:hover{ background-position: right bottom; } </style> <body> <div> <ul> <li><a href="#">Drubjs Menu</a></li> <li><a href="#">Beer</a></li> <li><a href="#">Spirits</a></li> <li><a href="#">Cola</a></li> <li><a href="#">Lemonade</a></li> <li><a href="#">Tea</a></li> <li><a href="#">Coffee</a></li> </ul> </div> </body>
9.创建水平导航条：
<style type="text/css"> body{ margin:50px; } ul{ list-style:none; margin:0px; padding:0px; width:798px; line-height:50px; background:#faa819 url(2014-03-08_223706.png) repeat-x; font-size:16px; float:left;/*要浏览器兼容，这里也要浮动*/ } /*这里不要用内联，因为调不了高度*/ ul li { float: left; width:114px; background: url(2014-03-08_223754.png) no-repeat right center; text-align:center; } ul a { color:#fff; padding: 0 4px; /*background: url(2014-03-08_223754.png) no-repeat right center;*/ text-decoration: none; }/**/ </style> <body> <div> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Beer</a></li> <li><a href="#">Spirits</a></li> <li><a href="#">Cola</a></li> <li><a href="#">Lemonade</a></li> <li><a href="#">Tea</a></li> <li><a href="#">Coffee</a></li> </ul> </div> </body>