純CSS排列呈弧形布局的導航菜單_層和布局特效

純CSS排列呈弧形布局的導航菜單，這個菜單對我們來說很特別，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" mrc="text/html; charset=gb2312" />
<title>弧形排列的可折疊二級導航-www.zhaotila.cn</title>
<style type="text/css"> 
* {margin: 0; padding: 0;}
li {list-style: none;}
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}
 
body {
	font: 12px/1.2 'Microsoft YaHei', Verdana, Arial, Helvetica, sans-serif;
	color: #ddd;
	background: black;
}

#dv_nav {
	padding-top: 30px;
	width: 500px;
	height: 540px;
	text-align: right;  /*各菜單項右對齊*/
	background: url(img/bg-1.jpg) no-repeat;
}
#dv_nav h2 {
	display: none;
}

#ul_nav li {
	padding-bottom: 24px;  /* www.zhaotila.cn */
}
#ul_nav li li {
	padding-bottom: 0px;  /* 清除上一條對二級菜單的影響 */
	margin-top: 10px;
}
/* 菜單項基本樣式 */
#ul_nav h3 a,
#ul_nav h3 span {
	font-size: 16px;
	font-weight: 700;
	color: #aaa;
}
#ul_nav li li a {
	color: #999;
}
 #dv_placeholder div {
	_margin-left: -3px;  /* 應付3px bug @ IE6 */
	float: right; _display: inline;
	clear: right;
	font: 1px/1 serif;
}
#dv_placeholder .n1  {width: 185px; height: 10px;}
#dv_placeholder .n2  {width: 195px; height: 10px;}
#dv_placeholder .n3  {width: 200px; height: 10px;}
#dv_placeholder .n4  {width: 205px; height: 10px;}
#dv_placeholder .n5  {width: 210px; height: 10px;}
#dv_placeholder .n6  {width: 215px; height: 10px;}
#dv_placeholder .n7  {width: 220px; height: 10px;}
#dv_placeholder .n8  {width: 225px; height: 10px;}
#dv_placeholder .n9  {width: 230px; height: 10px;}
#dv_placeholder .n10 {width: 235px; height: 10px;}
#dv_placeholder .n11 {width: 240px; height: 10px;}
#dv_placeholder .n12 {width: 245px; height: 15px;}
#dv_placeholder .n13 {width: 250px; height: 10px;}
#dv_placeholder .n14 {width: 255px; height: 15px;}
#dv_placeholder .n15 {width: 260px; height: 10px;}
#dv_placeholder .n16 {width: 265px; height: 15px;}
#dv_placeholder .n17 {width: 270px; height: 15px;}
#dv_placeholder .n18 {width: 275px; height: 20px;}
#dv_placeholder .n19 {width: 280px; height: 20px;}
#dv_placeholder .n20 {width: 285px; height: 20px;}
#dv_placeholder .n21 {width: 290px; height: 20px;}
#dv_placeholder .n22 {width: 295px; height: 25px;}
#dv_placeholder .n23 {width: 300px; height: 35px;}
#dv_placeholder .n24 {width: 305px; height: 145px;}
#dv_placeholder .n25 {width: 300px; height: 30px;}
#dv_placeholder .n26 {width: 295px; height: 20px;}
#dv_placeholder .n27 {width: 290px; height: 15px;}
 
#ul_nav h3 {
	background: #555;
}
#ul_nav li li {
	background: #222;
}
#dv_placeholder div {
	background: yellow;
	opacity: 0.2; filter: Alpha(Opacity=20); -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
}
 
</style>
</head>
 
<body>
<div id="dv_nav">
	<h2>導航</h2>
	
	<div id="dv_placeholder">
		<div class="n1"></div>
		<div class="n2"></div>
		<div class="n3"></div>
		<div class="n4"></div>
		<div class="n5"></div>
		<div class="n6"></div>
		<div class="n7"></div>
		<div class="n8"></div>
		<div class="n9"></div>
		<div class="n10"></div>
		<div class="n11"></div>
		<div class="n12"></div>
		<div class="n13"></div>
		<div class="n14"></div>
		<div class="n15"></div>
		<div class="n16"></div>
		<div class="n17"></div>
		<div class="n18"></div>
		<div class="n19"></div>
		<div class="n20"></div>
		<div class="n21"></div>
		<div class="n22"></div>
		<div class="n23"></div>
		<div class="n24"></div>
		<div class="n25"></div>
		<div class="n26"></div>
		<div class="n27"></div>
	</div>
	<!--www.zhaotila.cn->
	<ul id="ul_nav">
		<li>
			<h3><span>洗護系列</span></h3>
			<ul>
				<li><a href="/#">賦活水養</a></li>
				<li><a href="/">動感卷曲</a></li>
				<li><a href="/">模板無憂</a></li>
			</ul>
		</li>
		<li>
			<h3><span>造型系列</span></h3>
			<ul>
				<li><a href="/">珠光亮澤</a></li>
				<li><a href="/">酷炫凌亂</a></li>
				<li><a href="/">源碼下載</a></li>
			</ul>
		</li>
		<li>
			<h3><a href="/">促銷信息</a></h3>
		</li>
		<li>
			<h3><span>秀發護理小TIPS</span></h3>
			<ul>
				<li><a href="/">洗發知多少</a></li>
				<li><a href="/">護發怎么辦</a></li>
				<li><a href="/">型發知多少</a></li>
			</ul>
		</li>
		<li>
			<h3><a href="/">VIDEO</a></h3>
		</li>
	</ul>
</div>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-11-17

[收藏][報錯][返回列表]

相關層和布局特效：

純CSS排列呈弧形布局的導航菜單_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些