背景色切换链接按钮CSS代码:
/**//*2008.10.08*/
#linkButtonDiv1 ul{}{
margen:0;
relleno: 0;
tipo de estilo de lista: ninguno;
}
#linkButtonDiv1 li a{}{
ancho: 100 px;
altura: 20 píxeles;
pantalla:bolck;
tamaño de fuente: 16px;
margen: 5px;
borde: 1px sólido #000000;
relleno: 5px;
color:#000000;
color de fondo:#94b8e9;
decoración de texto: ninguna;
alineación de texto:centro;
}
#linkButtonDiv1 li a:hover{}{
color:#ffffff;
color de fondo:#336699;
decoración de texto: subrayado;
}
背景图片切换链接按钮CSS代码:
/**//*2008.10.08*/
#linkButtonDiv2 ul{}{
margen:0;
relleno: 0;
tipo de estilo de lista: ninguno;
}
#linkButtonDiv2 li a{}{
ancho: 100 px;
altura: 20 píxeles;
pantalla:bolck;
tamaño de fuente: 16px;
margen: 5px;
borde: 1px sólido #000000;
relleno: 5px;
color:#000000;
fondo:url(../img/bg-0314.gif);
decoración de texto: ninguna;
alineación de texto:centro;
}
#linkButtonDiv2 li a:hover{}{
color:#ffffff;
fondo:url(../img/bg-0315.gif);
decoración de texto: subrayado;
}
背景色突起效果按钮示例:
/**//*2008.10.08*/
#linkButtonDiv3 ul{}{
margen:0;
relleno: 0;
tipo de estilo de lista: ninguno;
}
#linkButtonDiv3 li a{}{
ancho: 100 px;
altura: 20 píxeles;
pantalla:bolck;
tamaño de fuente: 16px;
margen: 5px;
relleno: 5px;
color:#8d4f10;
antecedentes:#efb57c;
decoración de texto: ninguna;
alineación de texto:centro;
borde: 2px inicio #efb57c;
}
#linkButtonDiv3 li a:hover{}{
peso de fuente: negrita;
color:#ffffff;
antecedentes:#daa670;
decoración de texto: subrayado;
borde: 2px inicio #daa670;
}
一张背景图片左右切换按钮CSS代码:
/**//*2008.10.08*/
#linkButtonDiv4 ul{}{
margen:0;
relleno: 0;
tipo de estilo de lista: ninguno;
}
#linkButtonDiv4 li a{}{
ancho: 114 px;
altura: 24px;
pantalla:bolck;
tamaño de fuente: 12px;
margen: 5px;
relleno: 5px;
color:#000000;
fondo:url(../img/buttonbg.jpg) no repetir arriba a la izquierda;
decoración de texto: ninguna;
alineación de texto:centro;
}
#linkButtonDiv4 li a:hover{}{
peso de fuente: negrita;
color:#ffffff;
posición de fondo: arriba derecha;
decoración de texto: subrayado;
}
Versión HTML:
<cuerpo bgcolor="#cccccc">
<div id="cuerpoDiv">
<div id="encabezado">
<jsp:include page="/web/page/branch/header.jsp"/>
</div>
<div id="barra de menú">
<jsp:include page="/web/page/branch/menubar.jsp"/>
</div>
<div id="contenido">
<table border="0" width="100%" height="100%" style="table-layout:fixed;word-wrap:break-word;word-break;break-all;">
<tr>
<td valign="superior" ancho="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="superior" ancho="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="superior" ancho="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="superior" ancho="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>
</tabla>
</div>
</div>
<div id="pie de página">
<jsp:include page="/web/page/branch/footer.jsp"/>
</div>
</cuerpo>