利用ul标签制作网页底部导航

烟雨楼主 — Fri, 30 Oct 2009 08:39:51 +0000

利用UL标签配合CSS，可以非常方便的制作出带“｜”的底部导航菜单。

XHTML代码如下：

<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代码如下：

* { 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来实现，不需要载入图片，方便干净。

慢跑者 » XHTML/CSS

利用ul标签制作网页底部导航