CSS導航條，淺綠色

2024-09-05 12:19:25

字體：大中小

來源：轉載

供稿：網友

淺綠色CSS導航條，可以用作首頁的欄目導航條，實屬不錯，可以借鑒一下，把那些定義字體的樣式去掉，這樣會更簡潔一些，相信你可以輕松搞定……

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>ul#green { margin:0; padding:0; list-style-type:none; }ul#green li { position:relative; float:left; border-top:4px solid #d7ebd5; margin-right: 15px; padding-right: 20px; padding-top: 5px;}ul#green .current { border-top:4px solid #3c633c;}ul#green li:hover { border-top:4px solid #3c633c;}ul#green li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana; color:#3d6c3d;}ul#green li a:hover { color:#89be89; border:none; }ul#green li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 12px Verdana; line-height: 15px;}ul#green li a:hover span {margin-top: 7px; display:block; color: #89be89;}</style><title>CSS淺綠色導航條</title></head><body>	<ul id="green">		<li id="iwvjtn8m0" class="current">MainThis is Home Pages!</li>		<li>最新更新查看最新更新</li>		<li>源碼分類源碼分類</li>		<li>AjaxAJAX技術源碼區</li>		<li>Contact Us聯系我們</li>	</ul></body></html>

上一篇：模仿微軟CSS滑動門（TAB）

下一篇：垂直帶指向的CSS導航條