CSS菜單：基本橫向菜單效果超炫_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　在CSS網頁布局中，我們比較頭疼的問題就是如何制作質量高的CSS菜單。今天我們向大家介紹一個實例。這是一位國外高手nundroo制作的，下面是此菜單的效果圖：

　　我們看此菜單的xhtml代碼：

示例代碼 [m.ghpqjb.com]

<ul>
<li id="bu1"><a href="#">homepage</a></li>
<li id="bu2"><a href="#">business</a></li>
<li id="bu3"><a href="#">personal</a></li>
<li id="bu4"><a href="#">information</a></li>
</ul>

　　xhtml代碼非常簡潔，就是一個無序列表UL。重點在于應用CSS對其表現進行控制與設置。

　　我們看CSS代碼：

示例代碼 [m.ghpqjb.com]

body {
margin: 26px;
padding: 0;
background: #fff url(back.png) no-repeat;
}
span {
display: none;
}
ul {
position: relative;
width: 800px;
background: url(bg_nav.png) no-repeat;
height: 113px;
list-style-type: none;
margin: 0;
padding: 0;
}
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {
background: transparent;
position: absolute;
width: 110px;
height: 32px;
bottom: 0;
text-decoration: none;
}
/* adjusted values for IE6 */
* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a { bottom: -1px; }
li#bu1 a { left: 21px; }
li#bu2 a { left: 122px; background: url(business_hover.gif) 0 0 no-repeat; }
li#bu3 a { left: 223px; background: url(personal_hover.gif) 0 0 no-repeat; }
li#bu4 a { left: 324px; background: url(information_hover.gif) 0 0 no-repeat; }
li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover { background-position: 0 -32px; }

　　查看最終的運行效果：

代碼調試框 [m.ghpqjb.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="application/xhtml xml; charset=iso-8859-1" />
<meta name="author" content="http://m.ghpqjb.com/"/>
<title>CSS Based Navigation</title>
<style media="all" type="text/css">

body {
	margin: 26px;
	padding: 0;
	background: #fff url(attachments/month_0703/359/back.png) no-repeat;
}
span {
	display: none;
}
ul {
	position: relative;
	width: 800px;
	background: url(attachments/month_0703/359/bg_nav.png) no-repeat;
	height: 113px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {
	background: transparent;
	position: absolute;
	width: 110px;
	height: 32px;
	bottom: 0;
	text-decoration: none;
}
/* adjusted values for IE6 */
* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a { bottom: -1px; }
li#bu1 a { left: 21px; }
li#bu2 a { left: 122px; background: url(attachments/month_0703/359/business_hover.gif) 0 0 no-repeat; }
li#bu3 a { left: 223px; background: url(attachments/month_0703/359/personal_hover.gif) 0 0 no-repeat; }
li#bu4 a { left: 324px; background: url(attachments/month_0703/359/information_hover.gif) 0 0 no-repeat; }
li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover { background-position: 0 -32px; }

</style>
</head>

<body>
<ul>
<li id="bu1"><a href="#">homepage</li>
<li id="bu2"><a href="#">business</li>
<li id="bu3"><a href="#">personal</li>
<li id="bu4"><a href="#">information</li>
</ul>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]