適合企業(yè)使用的導(dǎo)航菜單_菜單導(dǎo)航特效

適合企業(yè)站使用的一個導(dǎo)航菜單，設(shè)計(jì)精美，全是用背景拼出來的，不過有一點(diǎn)值得鑒戒，看上往這么花，實(shí)際上只用了兩張背景圖片，總的背景一張，菜單是一張，只不過這里是用CSS控制背景平展的位置，也就是為背景設(shè)置像素，只取有用到的部分，這樣給你處理圖片也帶來了好處，而且使資源不零碎，便于整理。

<html>
<head>
<title>適合企業(yè)使用的導(dǎo)航菜單</title>
<style> 
body {
	background: #f1efe2;
}
 
#header {
	margin: 0 auto 0 auto;
	width: 650px;
	padding: 0;
	border: 5px solid #fff;
	height: 120px;
	background: #666 url(http://p1.mb5u.com/texiao/1/header.png) no-repeat left top;
}
 
ul#nav {
	position: relative;
	top: 68px;
	left: 188px;
	width: 346px;
	margin: 0;
	height: 22px;
	list-style-type: none;
	overflow: hidden;
}
 
body#welcome ul#nav  { background: transparent url(http://p1.mb5u.com/texiao/1/nav_f_2.png) no-repeat 0 0; }
body#products ul#nav { background: transparent url(http://p1.mb5u.com/texiao/1/nav_f_2.png) no-repeat 0 -22px; }
body#support ul#nav  { background: transparent url(http://p1.mb5u.com/texiao/1/nav_f_2.png) no-repeat 0 -44px; }
body#contact ul#nav  { background: transparent url(http://p1.mb5u.com/texiao/1/nav_f_2.png) no-repeat 0 -66px; }
 
ul#nav li a {
	position: absolute;
	top: 0;
	width: 84px;
	text-indent: -9000px;
	text-decoration: none;
	padding: 22px 0 0 0;
	overflow: hidden;
	height: 0px !important; 
	background: transparent url(http://p1.mb5u.com/texiao/1/nav_f_2.png) no-repeat;
}
 
body#welcome li#wel a 			{ background-position: 0 0; width: 94px; left: 0; }
body#welcome li#wel a:hover		{ background-position: 0 0; }
body#welcome li#pro a 			{ background-position: -94px -88px; left: 94px; }
body#welcome li#pro a:hover		{ background-position: -94px 0px; }
body#welcome li#sup a 			{ background-position: -178px -88px; left: 178px; }
body#welcome li#sup a:hover		{ background-position: -178px 0; }
body#welcome li#con a 			{ background-position: -262px -88px; left: 262px; }
body#welcome li#con a:hover		{ background-position: -262px 0; }
 
body#products li#wel a			{ background-position: 0 -110px; width: 94px; left: 0; }
body#products li#wel a:hover		{ background-position: 0 -22px; }
body#products li#pro a			{ background-position: -94px -22px; left: 94px; }
body#products li#pro a:hover		{ background-position: -94px -22px; }
body#products li#sup a			{ background-position: -178px -88px; left: 178px; }
body#products li#sup a:hover		{ background-position: -178px 0; }
body#products li#con a			{ background-position: -262px -88px; left: 262px; }
body#products li#con a:hover		{ background-position: -262px 0; }
 
body#support li#wel a 			{ background-position: 0 -88px; width: 94px; left: 0; }
body#support li#wel a:hover		{ background-position: 0 -44px; }
body#support li#pro a 			{ background-position: -94px -110px; left: 94px; }
body#support li#pro a:hover		{ background-position: -94px -44px; }
body#support li#sup a 			{ background-position: -178px -44px; left: 178px; }
body#support li#sup a:hover		{ background-position: -178px -44px; }
body#support li#con a 			{ background-position: -262px -88px; left: 262px; }
body#support li#con a:hover		{ background-position: -262px 0; }
 
body#contact li#wel a 			{ background-position: 0 -88px; width: 94px; left: 0px; }
body#contact li#wel a:hover		{ background-position: 0 -44px; }
body#contact li#pro a 			{ background-position: -94px -88px; left: 94px; }
body#contact li#pro a:hover		{ background-position: -94px 0; }
body#contact li#sup a 			{ background-position: -178px -110px; left: 178px; }
body#contact li#sup a:hover		{ background-position: -178px -66px; }
body#contact li#con a 			{ background-position: -262px -66px; left: 262px; }
body#contact li#con a:hover		{ background-position: -262px -66px; }
 
p { text-align: center; }
p a { color: #666; text-decoration: none; font: 11px/1.5 tahoma, arial, verdana, sans-serif; }
p a em { font-style: normal; border-bottom: 1px solid #999; }
p a:hover em { color: #333; border-bottom: 0; }
</style>
</head>
<body id="products">
<div id="header"> 
  <ul id="nav">
    <li id="wel"><a href="#">welcome</a></li>
    <li id="pro"><a href="#">products</a></li>
    <li id="sup"><a href="#">support</a></li>
    <li id="con"><a href="#">contact</a></li>
  </ul>
</div>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時間：2011-02-24

[收藏][報(bào)錯][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索適合企業(yè)使用的導(dǎo)航菜單
特效說明：
菜單導(dǎo)航模板-適合企業(yè)使用的導(dǎo)航菜單。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

適合企業(yè)使用的導(dǎo)航菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些