今天小编跟大家讲解下有关css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样 的相关资料，希望小伙伴们看了有所帮助。
复制代码代码如下:<style type="text/css"> body{ margin:0;} 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-positioninside 清单项目较往右移。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; 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>
来源：爱蒂网
