四种CSS链接按钮示例代码下载：http://www./Files/sitinspring/CssLinkButton20081008210352.rar  背景色切换链接按钮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%" style=";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> </table> </div> </div> <div id="footer"> <jsp:include page="/web/page/branch/footer.jsp"/> </div></body> |
|
|
