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 class="current">MainThis is Home Pages!</li>		<li>最新更新查看最新更新</li>		<li>源码分类源码分类</li>		<li>AjaxAJAX技术源码区</li>		<li>Contact Us联系我们</li>	</ul></body></html>

上一篇：模仿微软CSS滑动门（TAB）

下一篇：垂直带指向的CSS导航条