背景色切换链接按钮CSS代码：
/**//*2008.10.08*/
#linkButtonDiv1 ul{}{
保证金：0；
填充：0；
列表样式类型：无；
}
#linkButtonDiv1 li a{}{
宽度：100px；
高度：20px；
显示：块；
字体大小：16px；
边距：5px；
边框：1px 实线#000000；
内边距：5px；
颜色：#000000；
背景颜色：#94b8e9；
文本装饰：无；
文本对齐：居中；
}
#linkButtonDiv1 li a:hover{}{
颜色：#ffffff；
背景颜色：#336699；
文本装饰：下划线；
}
背景图片切换链接按钮CSS代码：
/**//*2008.10.08*/
#linkButtonDiv2 ul{}{
保证金：0；
填充：0；
列表样式类型：无；
}
#linkButtonDiv2 li a{}{
宽度：100px；
高度：20px；
显示：块；
字体大小：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 li a{}{
宽度：100px；
高度：20px；
显示：块；
字体大小：16px；
边距：5px；
内边距：5px；
颜色：#8d4f10；
背景：#efb57c；
文本装饰：无；
文本对齐：居中；
边框：2px开头#efb57c；
}
#linkButtonDiv3 li a:hover{}{
字体粗细：粗体；
颜色：#ffffff；
背景：#daa670；
文本装饰：下划线；
边框：2px开头#daa670；
}
一张背景图片左右切换按钮CSS代码：
/**//*2008.10.08*/
#linkButtonDiv4 ul{}{
保证金：0；
填充：0；
列表样式类型：无；
}
#linkButtonDiv4 li a{}{
宽度：114px；
高度：24px；
显示：块；
字体大小：12px；
边距：5px；
内边距：5px；
颜色：#000000；
背景：url(../img/buttonbg.jpg) 不重复左上；
文本装饰：无；
文本对齐：居中；
}
#linkButtonDiv4 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 =“顶部”宽度=“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 =“顶部”宽度=“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 =“顶部”宽度=“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 =“顶部”宽度=“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>
</正文>