清新精致的纯CSS导航菜单
时间：2010-06-08 来源：cizhibgmj
好多网站用这种导航菜单，完全基于DIV CSS标准，兼容多种浏览器，设计美观，简洁大方，自适应宽度，
用到有两张背景图片，你可以顺着代码地址下载。自己根据你网站的色调修改一下还是超不错的。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#siteNav {
clear: both;
float:left;
padding-left: 1px;
background: #fff;
font-size:9pt;
font-weight: bold;
line-
border-bottom:2px solid #84B0C7;
}
#siteNav ul {
margin:0;
padding:0;
list-style:none;
}
#siteNav li {
display:inline;
margin:0;
padding:0;
}
#siteNav a {
float:left;
background:url(/jscss/demoimg/200905/xmenu.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#siteNav a span {
float:left;
display:block;
background:url(/jscss/demoimg/200905/xmenu2.gif) no-repeat right top;
padding:5px 11px 4px 5px;
color:#036;
}
/* http://codefans.net*/
#siteNav a span {
float:none
}
#siteNav a:hover span {
color:#036;
}
#siteNav a:hover {
background-position:0% -42px;
}
#siteNav a:hover span {
background-position:100% -42px;
}
#siteNav #sel a {
background-position:0% -42px;
}
#siteNav #sel a span {
background-position:100% -42px;
}
-->
</style>
<title>DIV CSS清新导航菜单-网页特效代码-网页之家www.51css.net</title>
</head>
<body>
<div id="siteNav">
<ul>
<li id="sel"><a href="/"><span>首页</span></a></li>
<li><a href="/"><span>网页之家</span></a></li>
<li><a href="/jscss/"><span>特效代码</span></a></li>
<li><a href="/other/lastupdate.shtml"><span>div css教程</span></a></li>
<li><a href="/other/top100.shtml"><span>div css实例</span></a></li>
<li><a href="/sort/list_1_1.shtml"><span>css模板</span></a></li>
<li><a href="/sort/list_2_1.shtml"><span>网页特效</span></a></li>
<li><a href="/sort/list_3_1.shtml"><span>ASP.NET</span></a></li>
<li><a href="/sort/list_4_1.shtml"><span>JSP</span></a></li>
<li><a href="/sort/list_10_1.shtml"><span>DELPHI</span></a></li>
<li><a href="/sort/list_9_1.shtml"><span>VB</span></a></li>
<li><a href="/sort/list_8_1.shtml"><span>VC++</span></a></li>
<li><a href="/sort/list_11_1.shtml"><span>AJAX</span></a></li>
<li><a href="/sort/list_11_112_1.shtml"><span>EXTJS</span></a></li>
<li><a href="/service/ad.shtml"><span>广告联系</span></a></li>
</ul>
</div>
</body>
</html>
相关阅读 更多 +
