背景色切換鏈接按鈕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 鏈接按鈕一 /a /li li a 鏈接按鈕二 /a /li li a 鏈接按鈕三 /a /li li a 鏈接按鈕四 /a /li li a 鏈接按鈕五 /a /li li a 鏈接按鈕六 /a /li /ul /div /td td valign="top" width="25%" div strong 背景圖片切換鏈接按鈕示例 /strong /div div id="linkButtonDiv2" ul li a 鏈接按鈕一 /a /li li a 鏈接按鈕二 /a /li li a 鏈接按鈕三 /a /li li a 鏈接按鈕四 /a /li li a 鏈接按鈕五 /a /li li a 鏈接按鈕六 /a /li /ul /div /td td valign="top" width="25%" div strong 背景色突起效果按鈕示例 /strong /div div id="linkButtonDiv3" ul li a 鏈接按鈕一 /a /li li a 鏈接按鈕二 /a /li li a 鏈接按鈕三 /a /li li a 鏈接按鈕四 /a /li li a 鏈接按鈕五 /a /li li a 鏈接按鈕六 /a /li /ul /div /td td valign="top" width="25%" div strong 一張背景圖片左右切換按鈕示例 /strong /div div id="linkButtonDiv4" ul li a 鏈接按鈕一 /a /li li a 鏈接按鈕二 /a /li li a 鏈接按鈕三 /a /li li a 鏈接按鈕四 /a /li li a 鏈接按鈕五 /a /li li a 鏈接按鈕六 /a /li /ul /div /td /tr /table /div /div div id="footer" jsp:include page="/web/page/branch/footer.jsp"/ /div /bodyhtml教程
