如图:不错的导航设计 陈波 151 0515 0575
![](https://img-my.csdn.net/uploads/201211/15/1352961289_1823.jpg)
网站需要的背景图片:
kind_bg.jpg
<html>
</head>
<style>
/**分类导航**/
#kind{
width:975px;
margin:10px auto;
border:2px solid #2ca3e5;
height:70px;
padding-top:2px;
}
#kind .big{
width:66px;
height:63px;
float:left;
background:#ff00ff;
text-align:center;
line-height:30px;
padding-top:5px;
color:#ffffff;
font-size:20px;
font-family:"微软雅黑";
margin:0px 5px;
background:url(img/kind_bg.jpg);
}
#kind .line58{
line-height:58px;
}
#kind .big a{
color:#ffffff;
text-decoration:none;
font-size:20px;
}
#kind .small{
width:140px;
height:58px;
float:left;
padding-top:8px;
text-align:left;
margin:0px 13px;
}
#kind .small a{
margin:0px;
float:left;
width:69px;
height:20px;
text-decoration:none;
color:#000000;
font-size:13px;
}
/*end 分类导航**/
</style>
</head>
<body>
<div id="kind">
<div class="big line58"><a href="/jk/">甲亢</a></div>
<div class="small">
<a href='/jk/zz/'>甲亢症状</a>
<a href='/jk/by/'>甲亢病因</a>
<a href='/jk/wh/'>甲亢危害</a>
<a href='/jk/zl/'>甲亢治疗</a>
<a href='/jk/cs/'>甲亢常识</a>
<a href='/jk/kf/'>甲亢康复</a>
</div>
<div class="big line58"><a href="/jj/">甲减</a></div>
<div class="small">
<a href='/jj/zz/'>甲减症状</a>
<a href='/jj/by/'>甲减病因</a>
<a href='/jj/wh/'>甲减危害</a>
<a href='/jj/zl/'>甲减治疗</a>
<a href='/jj/cs/'>甲减常识</a>
<a href='/jj/kf/'>甲减康复</a>
</div>
<div class="big"><a href="/jzxjj/">甲状<br/>腺结节</a></div>
<div class="small">
<a href='/jzxjj/zz/'>结节症状</a>
<a href='/jzxjj/by/'>结节病因</a>
<a href='/jzxjj/wh/'>结节危害</a>
<a href='/jzxjj/zl/'>结节治疗</a>
<a href='/jzxjj/cs/'>结节常识</a>
<a href='/jzxjj/kf/'>结节康复</a>
</div>
<div class="big"><a href="/jzxjb/">甲状<br/>腺疾病</a></div>
<div class="small">
<a href='/gbsb/'>桥本氏病</a>
<a href='/jzxl/'>甲状腺瘤</a>
<a href='/jzxy/'>甲状腺炎</a>
<a href='/jzxnz/'>甲状腺囊肿</a>
<a href='/jzxzd/'>甲状腺肿大</a>
</div>
</div>
</body>
</html>