效果體驗：http:///keleyi/phtml/divcss/6.htm
兼容多浏覽器，例如IE，Chrome，火狐 等
完整代碼,保存到htm文件打開也可以查看效果：
<!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=utf-8" />
<title>20個web2.0導航樣式-</title>
<link href="http:///keleyi/phtml/divcss/6/navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!------- 導航1 ------->
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo1.jpg" alt="wenqi's blog" /></div>
<div class="menu1">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<a href="#">Help</a>
<del></del>
</div>
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo2.jpg" alt="wenqi's blog" /></div>
<!------- 導航2 ------->
<div class="menu2">
<div class="left2"></div>
<div class="center2">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<a href="#">Help</a>
<del></del>
</div>
<div class="right2"></div>
<div class="clear"></div>
</div>
<!------- 導航3 ------->
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo3.jpg" alt="wenqi's blog" /></div>
<div class="menu3">
<div class="left3"></div>
<div class="center3">
<a href="#">Blog</a>
<a href="#">Books</a>
<a href="#">Portfolio</a>
<a href="#">Photos</a>
<a href="#">Service</a>
</div>
<div class="right3"></div>
<div class="clear"></div>
</div>
<!------- 導航4 ------->
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo4.jpg" alt="WQ's space" /></div>
<div class="menu4">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<a href="#">Help</a>
<del></del>
</div>
<!------- 導航4 ------->
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo5.jpg" alt="wenqi's space" /></div>
<div class="menu5">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
<!------- 導航6 ------->
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo6.jpg" alt="wenqi's blog" /></div>
<div class="menu6">
<div class="left6"></div>
<div class="center6">
<a href="#">Blog</a><span></span>
<a href="#">Themes</a><span></span>
<a href="#">Service</a><span></span>
<a href="#">About</a><span></span>
<a href="#">Help</a>
</div>
<div class="right6"></div>
<div class="clear"></div>
</div>
<!------- 導航7 ------->
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo7.jpg" alt="wenqi's blog" /></div>
<div class="menu7">
<div class="left7"></div>
<div class="center7">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<a href="#">Help</a>
</div>
<div class="right7"></div>
<div class="clear"></div>
</div>
<!------- 導航8 ------->
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo8.jpg" alt="wenqi blog" /></div>
<div class="menu8">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
<!------- 導航9 ------->
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo9.jpg" alt="wenqi blog" /></div>
<div class="menu9">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Uploads</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
<!------- 導航10 ------->
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo10.jpg" alt="wenqi's blog" /></div>
<div class="menu10">
<div class="left10"></div>
<div class="center10">
<a href="http://">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<a href="http:///a/bjac/182di68b.htm">原文</a>
</div>
<div class="right10"></div>
<div class="clear"></div>
</div>
<!------- 導航11 ------->
<div class="top11"><a href="#"></a><del></del></div>
<div class="menu11">
<div>
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Uploads</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
</div>
<div style="margin-bottom:30px;"><img src="http:///keleyi/phtml/divcss/6/image/logo/logo11.jpg" alt="wenqi blog" /></div>
<!------- 導航12 ------->
<div class="box12">
<div class="menu12">
<div class="left12"></div>
<div class="center12">
<a href="#">Blog</a>
<a href="http://">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
<div class="right12"></div>
<div class="clear"></div>
</div>
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo12.jpg" alt="wenqi blog" /></div>
</div>
<!------- 導航13 ------->
<div class="box13">
<div class="logo13"></div>
<div class="menu13">
<div>
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
</div>
<div class="top13"></div>
</div>
<!------- 導航14 ------->
<div class="box14">
<div class="top14">
<a href="#">Contact</a><span>|</span><a href="#">Downloads</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del>
</div>
<div class="menu14">
<label></label><span></span>
<a href="#">Blog</a><span></span>
<a href="#">Gallery</a><span></span>
<a href="#">Themes</a><span></span>
<a href="#">Service</a><span></span>
<a href="http://">About</a>
<del></del>
</div>
<div><img src="http:///keleyi/phtml/divcss/6/image/navigation/bg14_bg.jpg" alt="wenqi's blog" /></div>
</div>
<!------- 導航15 ------->
<div class="box15">
<div class="left15"></div>
<div class="menu15">
<a href="#">Blog</a><span></span>
<a href="#">Gallery</a><span></span>
<a href="#">Service</a><span></span>
<a href="#">About</a>
<del></del>
</div>
<div class="clear"></div>
<div><img src="http:///keleyi/phtml/divcss/6/image/navigation/bg15_bg.jpg" alt="wenqi's blog" /></div>
</div>
<!------- 導航16 ------->
<div class="menu16">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Uploads</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
<div><img src="http:///keleyi/phtml/divcss/6/image/navigation/bg16_bg.jpg" alt="wenqi blog" /></div>
<!------- 導航17 ------->
<div class="top17">
<a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del>
</div>
<div class="menu17">
<a href="#">Blog</a>
<a href="#">Gallery</a>
<a href="#">Service</a>
<a href="#">Works</a>
<a href="#">About</a>
<del></del>
</div>
<!------- 導航18 ------->
<div class="box18">
<div class="top18"></div>
<div class="menu18">
<a href="http://" class="a1">Blog</a>
<a href="#" class="a2">Gallery</a>
<a href="#" class="a3">Service</a>
<a href="#" class="a4">About</a>
<del></del>
</div>
</div>
<!------- 導航19 ------->
<div class="top19">
<a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a>
</div>
<div class="menu19">
<a href="#">Blog</a>
<a href="#">Gallery</a>
<a href="#">Service</a>
<a href="#">Works</a>
<a href="#">About</a>
<del></del>
</div>
<div class="bottom19"></div>
<!------- 導航20 ------->
<div><img src="http:///keleyi/phtml/divcss/6/image/logo/logo20.jpg" alt="wenqi's blog" /></div>
<div class="menu20">
<a href="http:///menu/net/" class="a1">Blog</a>
<a href="http:///menu/javascript/" class="a2">Gallery</a>
<a href="http:///menu/jquery/" class="a3">Service</a>
<a href="http:///menu/webqd/" class="a4">Works</a>
<del></del>
</div>
<div><img src="http:///keleyi/phtml/divcss/6/image/navigation/bg20_bg.jpg" alt="wenqi's blog" /></div>
</body>
</html>