html字体圆弧排列,纯CSS排列呈弧形布局的导航菜单

弧形排列的可折叠二级导航-www.mb5u.com

* {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.mb5u.com */

}

#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)';

}

导航