利用UL标签配合CSS，可以非常方便的制作出带“｜”的底部导航菜单。
XHTML代码如下：
1 2 3 4 5 6 7 8 9 | <div id="footer"> <ul> <li><a>底部导航1</a></li> <li><a>底部导航2</a></li> <li><a>底部导航3</a></li> <li><a>底部导航4</a></li> <li><a>底部导航5</a></li> </ul> </div> |
CSS代码如下：
1 2 3 4 5 6 7 8 | * { margin:0; padding:0;} a { color:#000; text-decoration:none;} a:hover { color:#00F; text-decoration:underline;} ul,li { list-style:none;} #footer { width:860px; height:60px; margin:50px auto; background:#ddd;} #footer ul { width:760px; heitht:15px; margin:20px 50px; border-left:1px solid #666; overflow:hidden;} #footer ul li { float:left; height:15px; line-height:15px; padding:0 10px; border-right:1px solid #666;} #footer ul li a { font-size:14px;} |
其中的“｜”效果使用ul与li的border来实现，不需要载入图片，方便干净。
