背景色切换链接按钮CSS代番号：
/**//*2008.10.08*/
#linkButtonDiv1 ul{}{
マージン:0;
パディング:0;
リストスタイルタイプ:なし;
}
#linkButtonDiv1 リア{}{
幅:100ピクセル;
高さ:20ピクセル;
表示:ボルト;
フォントサイズ: 16px;
マージン:5px;
ボーダー: 1px ソリッド #000000;
パディング:5px;
色:#000000;
背景色:#94b8e9;
テキスト装飾:なし;
テキスト整列:中央;
}
#linkButtonDiv1 li a:hover{}{
色:#ffffff;
背景色:#336699;
テキスト装飾:下線;
}
背景画像切换链接按钮CSS代コード：
/**//*2008.10.08*/
#linkButtonDiv2 ul{}{
マージン:0;
パディング:0;
リストスタイルタイプ:なし;
}
#linkButtonDiv2 リア{}{
幅:100ピクセル;
高さ:20ピクセル;
表示:ボルト;
フォントサイズ: 16px;
マージン:5px;
ボーダー: 1px ソリッド #000000;
パディング:5px;
色:#000000;
背景:url(../img/bg-0314.gif);
テキスト装飾:なし;
テキスト整列:中央;
}
#linkButtonDiv2 li a:hover{}{
色:#ffffff;
背景:url(../img/bg-0315.gif);
テキスト装飾:下線;
}
背景色突起效果按钮の例：
/**//*2008.10.08*/
#linkButtonDiv3 ul{}{
マージン:0;
パディング:0;
リストスタイルタイプ:なし;
}
#linkButtonDiv3 リア{}{
幅:100ピクセル;
高さ:20ピクセル;
表示:ボルト;
フォントサイズ: 16px;
マージン:5px;
パディング:5px;
色:#8d4f10;
背景:#efb57c;
テキスト装飾:なし;
テキスト整列:中央;
ボーダー:2px アウトセット #efb57c;
}
#linkButtonDiv3 li a:hover{}{
フォントの太さ:太字;
色:#ffffff;
背景:#daa670;
テキスト装飾:下線;
ボーダー:2px アウトセット #daa670;
}
一背景写真左右切换按钮CSS代コード：
/**//*2008.10.08*/
#linkButtonDiv4 ul{}{
マージン:0;
パディング:0;
リストスタイルタイプ:なし;
}
#linkButtonDiv4 リア{}{
幅:114ピクセル;
高さ:24ピクセル;
表示:ボルト;
フォントサイズ: 12px;
マージン:5px;
パディング:5px;
色:#000000;
背景:url(../img/buttonbg.jpg) norepeat 左上;
テキスト装飾:なし;
テキスト整列:中央;
#linkBut
tonDiv4 li a:hover{}{
フォントの太さ:太字;
色:#ffffff;
背景位置:右上;
テキスト装飾:下線;
}
页面HTML代：
<body bgcolor="#cccccc">
<div id="bodyDiv">
<div id="ヘッダー">
<jsp:include page="/web/page/branch/header.jsp"/>
</div>
<div id="メニューバー">
<jsp:include page="/web/page/branch/menubar.jsp"/>
</div>
<div id="コンテンツ">
<table border="0" width="100%" height="100%" style="table-layout:fixed;word-wrap:break-word;word-break;break-all;">
<tr>
<td valign="top" width="25%">
<div class="contentTitle">
<strong>背景色切换链接按钮の例</strong>
</div>
<div id="linkButtonDiv1" class="contentConcept">
<ul>
<li><a href="#">链接按钮一</a></li>
<li><a href="#">链接按钮二</a></li>
<li><a href="#">链接按钮三</a></li>
<li><a href="#">链接按钮四</a></li>
<li><a href="#">链接按钮五</a></li>
<li><a href="#">链接按钮六</a></li>
</ul>
</div>
</td>
<td valign="top" width="25%">
<div class="contentTitle">
<strong>背景写真切换链接按钮の例</strong>
</div>
<div id="linkButtonDiv2" class="contentConcept">
<ul>
<li><a href="#">链接按钮一</a></li>
<li><a href="#">链接按钮二</a></li>
<li><a href="#">链接按钮三</a></li>
<li><a href="#">链接按钮四</a></li>
<li><a href="#">链接按钮五</a></li>
<li><a href="#">链接按钮六</a></li>
</ul>
</div>
</td>
<td valign="top" width="25%">
<div class="contentTitle">
<strong>背景色突起效果按钮の例</strong>
</div>
<div id="linkButtonDiv3" class="contentConcept">
<ul>
<li><a href="#">链接按钮一</a></li>
<li><a href="#">链接按钮二</a></li>
<li><a href="#">链接按钮三</a></li>
<li><a href="#">链接按钮四</a></li>
<li><a href="#">链接按钮五</a></li>
<li><a href="#">链接按钮六</a></li>
</ul>
</div>
</td>
<td valign="top" width="25%">
<div class="contentTitle">
<strong>一背景写真左右切换按钮の例</strong>
</div>
<div id="linkButtonDiv4" class="contentConcept">
<ul>
<li><a href="#">链接按钮一</a></li>
<li><a href="#">链接按钮二</a></li>
<li><a href="#">链接按钮三</a></li>
<li><a href="#">链接按钮四</a></li>
<li><a href="#">链接按钮五</a></li>
<li><a href="#">链接按钮六</a></li>
</ul>
</div>
</td>
</tr>
</テーブル>
</div>
</div>
<div id="フッター">
<jsp:include page="/web/page/branch/footer.jsp"/>
</div>
</body>