Le CSS est basé sur le principe :
/**//*2008.10.08*/
#linkButtonDiv1 ul{}{
marge : 0 ;
remplissage : 0 ;
type de style de liste : aucun ;
}
#linkButtonDiv1 li a{}{
largeur : 100 px ;
hauteur : 20 px ;
affichage:bolck;
taille de police : 16 px ;
marge : 5 px ;
bordure : 1px solide #000000 ;
remplissage : 5 px ;
couleur : #000000 ;
couleur d'arrière-plan :#94b8e9 ;
décoration de texte : aucune ;
texte-align:centre;
}
#linkButtonDiv1 li a:hover{}{
couleur :#ffffff ;
couleur d'arrière-plan : #336699 ;
décoration de texte : souligné ;
}
L'application CSS s'appuie sur :
/**//*2008.10.08*/
#linkButtonDiv2 ul{}{
marge : 0 ;
remplissage : 0 ;
type de style de liste : aucun ;
}
#linkButtonDiv2 li a{}{
largeur : 100 px ;
hauteur : 20 px ;
affichage:bolck;
taille de police : 16 px ;
marge : 5 px ;
bordure : 1px solide #000000 ;
remplissage : 5 px ;
couleur : #000000 ;
arrière-plan:url(../img/bg-0314.gif);
décoration de texte : aucune ;
texte-align:centre;
}
#linkButtonDiv2 li a:hover{}{
couleur :#ffffff ;
arrière-plan:url(../img/bg-0315.gif);
décoration de texte : souligné ;
}
背景色突起效果按钮示例:
/**//*2008.10.08*/
#linkButtonDiv3 ul{}{
marge : 0 ;
remplissage : 0 ;
type de style de liste : aucun ;
}
#linkButtonDiv3 li a{}{
largeur : 100 px ;
hauteur : 20 px ;
affichage:bolck;
taille de police : 16 px ;
marge : 5 px ;
remplissage : 5 px ;
couleur : #8d4f10 ;
arrière-plan :#efb57c ;
décoration de texte : aucune ;
texte-align:centre;
bordure : 2px au début #efb57c ;
}
#linkButtonDiv3 li a:hover{}{
poids de la police : gras ;
couleur :#ffffff ;
arrière-plan :#daa670 ;
décoration de texte : souligné ;
bordure : 2px au début #daa670 ;
}
Le CSS est basé sur la version CSS :
/**//*2008.10.08*/
#linkButtonDiv4 ul{}{
marge : 0 ;
remplissage : 0 ;
type de style de liste : aucun ;
}
#linkButtonDiv4 li a{}{
largeur : 114 px ;
hauteur : 24 px ;
affichage:bolck;
taille de police : 12 px ;
marge : 5 px ;
remplissage : 5 px ;
couleur : #000000 ;
background:url(../img/buttonbg.jpg) norepeat en haut à gauche ;
décoration de texte : aucune ;
texte-align:centre;
}
#linkButtonDiv4 li a:hover{}{
poids de la police : gras ;
couleur :#ffffff ;
position d'arrière-plan : en haut à droite ;
décoration de texte : souligné ;
}
Version HTML :
<body bgcolor="#cccccc">
<div id="bodyDiv">
<div id="en-tête">
<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="pied de page">
<jsp:include page="/web/page/branch/footer.jsp"/>
</div>
</corps>