如圖：不錯的導航設計 陳波 151 0515 0575 網站需要的背景圖片: 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>