<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS构造列表</title> </head> <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> </html>
使用图片作为项目列表图标：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS构造列表</title> </head> <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> </html>
以背景图片作为项目列表图标：这种方法比较好，可以随意调动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS构造列表</title> </head> <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> </html>
内联列表：ul和li默认是区块的，查看是否是区块可以加上颜色测试，将列表转换为内联之后项目图标会不见，可以使用浮动或者使用下面的列子来实现
这里的 display 属性是块级值的设置,定义是否要成为块.Inline 是是内联,block 是区块.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS构造列表</title> </head> <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> </html>
背景图片和内联列表：使用这种方法再将li变成内联的时候背景图片仍然还在
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS构造列表</title> </head> <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> </html>
垂直导航栏：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS构造列表</title> </head> <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> </html>
创建垂直翻转的列表：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS构造列表</title> </head> <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> </html>
创建水平导航条：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS构造列表</title> </head> <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> </html>
原文：http://www.cnblogs.com/LO-ME/p/3588765.html