Startseite>Webdesign-Tutorial>CSS-Tutorial

Vier Beispiele für CSS-Link-Buttons

Autor：Eve Cole Aktualisierungszeit：2009-06-12 17:47:28

背景色切换链接按钮CSS代码:
/**//*2008.10.08*/

#linkButtonDiv1 ul{}{
Rand:0;
Polsterung:0;
Listenstiltyp:none;
}

#linkButtonDiv1 li a{}{
Breite: 100 Pixel;
Höhe:20px;

Anzeige:bolck;
Schriftgröße: 16px;

Rand: 5px;

Rand: 1 Pixel durchgehend #000000;

Polsterung:5px;

Farbe:#000000;
Hintergrundfarbe:#94b8e9;
Textdekoration: keine;
text-align:center;
}

#linkButtonDiv1 li a:hover{}{
Farbe:#ffffff;
Hintergrundfarbe:#336699;
Textdekoration:unterstrichen;
}


背景图片切换链接按钮CSS代码:
/**//*2008.10.08*/

#linkButtonDiv2 ul{}{
Rand:0;
Polsterung:0;
Listenstiltyp:none;
}

#linkButtonDiv2 li a{}{
Breite: 100 Pixel;
Höhe:20px;

Anzeige:bolck;
Schriftgröße: 16px;

Rand: 5px;

Rand: 1 Pixel durchgehend #000000;

Polsterung:5px;

Farbe:#000000;
Hintergrund:url(../img/bg-0314.gif);
Textdekoration: keine;
text-align:center;
}

#linkButtonDiv2 li a:hover{}{
Farbe:#ffffff;
Hintergrund:url(../img/bg-0315.gif);
Textdekoration:unterstrichen;
}


背景色突起效果按钮示例:
/**//*2008.10.08*/

#linkButtonDiv3 ul{}{
Rand:0;
Polsterung:0;
Listenstiltyp:none;
}

#linkButtonDiv3 li a{}{
Breite: 100 Pixel;
Höhe:20px;

Anzeige:bolck;
Schriftgröße: 16px;

Rand: 5px;

Polsterung:5px;

Farbe:#8d4f10;
Hintergrund:#efb57c;

Textdekoration: keine;
text-align:center;

border:2px Anfang #efb57c;
}

#linkButtonDiv3 li a:hover{}{
Schriftstärke:fett;
Farbe:#ffffff;
Hintergrund:#daa670;
Textdekoration:unterstrichen;

border:2px Anfang #daa670;
}

 

一张背景图片左右切换按钮CSS代码:
/**//*2008.10.08*/

#linkButtonDiv4 ul{}{
Rand:0;
Polsterung:0;
Listenstiltyp:none;
}

#linkButtonDiv4 li a{}{
Breite: 114 Pixel;
Höhe:24px;

Anzeige:bolck;
Schriftgröße: 12px;

Rand: 5px;

Polsterung:5px;

Farbe:#000000;
Hintergrund: URL (../img/buttonbg.jpg) norepeat links oben;
Textdekoration: keine;
text-align:center;
}

#linkButtonDiv4 li a:hover{}{
Schriftstärke:fett;
Farbe:#ffffff;
Hintergrundposition:rechts oben;
Textdekoration:unterstrichen;
}


页面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>
Ähnliche Artikel