背景色切换链接按钮CSS代码：/**//*2008.10.08*/ #linkButtonDiv1 ul{}{ margin:0; padding:0; list-style-type:none; } #linkButtonDiv1 li a{}{ width:100px; height:20px; display:bolck; font-size: 16px; margin:5px; border: 1px solid #000000; padding:5px; color:#000000; background-color:#94b8e9; text-decoration:none; text-align:center; } #linkButtonDiv1 li a:hover{}{ color:#ffffff; background-color:#336699; text-decoration:underline; } 背景图片切换链接按钮CSS代码：/**//*2008.10.08*/ #linkButtonDiv2 ul{}{ margin:0; padding:0; list-style-type:none; } #linkButtonDiv2 li a{}{ width:100px; height:20px; display:bolck; font-size: 16px; margin:5px; border: 1px solid #000000; padding:5px; color:#000000; background:url(../img/bg-0314.gif); text-decoration:none; text-align:center; } #linkButtonDiv2 li a:hover{}{ color:#ffffff; background:url(../img/bg-0315.gif); text-decoration:underline; } 背景色突起效果按钮示例：/**//*2008.10.08*/ #linkButtonDiv3 ul{}{ margin:0; padding:0; list-style-type:none; } #linkButtonDiv3 li a{}{ width:100px; height:20px; display:bolck; font-size: 16px; margin:5px; padding:5px; color:#8d4f10; background:#efb57c; text-decoration:none; text-align:center; border:2px outset #efb57c; } #linkButtonDiv3 li a:hover{}{ font-weight:bold; color:#ffffff; background:#daa670; text-decoration:underline; border:2px outset #daa670; } 一张背景图片左右切换按钮CSS代码：/**//*2008.10.08*/ #linkButtonDiv4 ul{}{ margin:0; padding:0; list-style-type:none; } #linkButtonDiv4 li a{}{ width:114px; height:24px; display:bolck; font-size: 12px; margin:5px; padding:5px; color:#000000; background:url(../img/buttonbg.jpg) norepeat left top; text-decoration:none; text-align:center; } #linkButtonDiv4 li a:hover{}{ font-weight:bold; color:#ffffff; background-position:right top; text-decoration:underline; } 页面HTML代码： body bgcolor="#cccccc" div id="bodyDiv" div id="header" jsp:include page="/web/page/branch/header.jsp"/ /div div id="menubar" jsp:include page="/web/page/branch/menubar.jsp"/ /div div id="content" table border="0" width="100%" height="100%" tr td valign="top" width="25%" div strong 背景色切换链接按钮示例 /strong /div div id="linkButtonDiv1" ul li a href="http://j5c.ddvip.com/index.php#" 链接按钮一 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮二 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮三 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮四 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮五 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮六 /a /li /ul /div /td td valign="top" width="25%" div strong 背景图片切换链接按钮示例 /strong /div div id="linkButtonDiv2" ul li a href="http://j5c.ddvip.com/index.php#" 链接按钮一 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮二 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮三 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮四 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮五 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮六 /a /li /ul /div /td td valign="top" width="25%" div strong 背景色突起效果按钮示例 /strong /div div id="linkButtonDiv3" ul li a href="http://j5c.ddvip.com/index.php#" 链接按钮一 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮二 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮三 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮四 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮五 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮六 /a /li /ul /div /td td valign="top" width="25%" div strong 一张背景图片左右切换按钮示例 /strong /div div id="linkButtonDiv4" ul li a href="http://j5c.ddvip.com/index.php#" 链接按钮一 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮二 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮三 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮四 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮五 /a /li li a href="http://j5c.ddvip.com/index.php#" 链接按钮六 /a /li /ul /div /td /tr /table /div /div div id="footer" jsp:include page="/web/page/branch/footer.jsp"/ /div /bodyhtml教程
