四种CSS链接按钮示例

王朝html/css/js·作者佚名  2008-11-25
窄屏简体版  字體: |||超大  

背景色切换链接按钮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="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>

</table>

</div>

</div>

<div id="footer">

<jsp:include page="/web/page/branch/footer.jsp"/>

</div>

</body>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航