Empat contoh tombol tautan CSS

背景色切换链接按钮CSS：
/**//*2008.10.08*/

#linkButtonDiv1 ul{}{
margin:0;
bantalan:0;
tipe gaya daftar: tidak ada;
}

#linkButtonDiv1 seperti{}{
lebar:100 piksel;
tinggi:20 piksel;

tampilan: bolck;
ukuran font: 16px;

margin:5 piksel;

batas: 1 piksel padat #000000;

bantalan:5 piksel;

warna:#000000;
warna latar belakang:#94b8e9;
dekorasi teks: tidak ada;
perataan teks:tengah;
}

#linkButtonDiv1 seperti:hover{}{
warna:#ffffff;
warna latar belakang:#336699;
dekorasi teks: garis bawah;
}

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

#linkButtonDiv2 ul{}{
margin:0;
bantalan:0;
tipe gaya daftar: tidak ada;
}

#linkButtonDiv2 seperti{}{
lebar:100 piksel;
tinggi:20 piksel;

tampilan: bolck;
ukuran font: 16px;

margin:5 piksel;

batas: 1 piksel padat #000000;

bantalan:5 piksel;

warna:#000000;
latar belakang:url(../img/bg-0314.gif);
dekorasi teks: tidak ada;
perataan teks:tengah;
}

#linkButtonDiv2 seperti:hover{}{
warna:#ffffff;
latar belakang:url(../img/bg-0315.gif);
dekorasi teks: garis bawah;
}

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

#linkButtonDiv3 ul{}{
margin:0;
bantalan:0;
tipe gaya daftar: tidak ada;
}

#linkButtonDiv3 seperti{}{
lebar:100 piksel;
tinggi:20 piksel;

tampilan: bolck;
ukuran font: 16px;

margin:5 piksel;

bantalan:5 piksel;

warna:#8d4f10;
latar belakang:#efb57c;

dekorasi teks: tidak ada;
perataan teks:tengah;

perbatasan:2px awal #efb57c;
}

#linkButtonDiv3 seperti:hover{}{
berat font: tebal;
warna:#ffffff;
latar belakang:#daa670;
dekorasi teks: garis bawah;

perbatasan:awal 2px #daa670;
}

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

#linkButtonDiv4 ul{}{
margin:0;
bantalan:0;
tipe gaya daftar: tidak ada;
}

#linkButtonDiv4 seperti{}{
lebar:114 piksel;
tinggi:24 piksel;

tampilan: bolck;
ukuran font: 12px;

margin:5 piksel;

bantalan:5 piksel;

warna:#000000;
latar belakang:url(../img/buttonbg.jpg) tidak mengulangi kiri atas;
dekorasi teks: tidak ada;
perataan teks:tengah;
}

#linkButtonDiv4 seperti:hover{}{
berat font: tebal;
warna:#ffffff;
posisi latar belakang:kanan atas;
dekorasi teks: garis bawah;
}

Bagaimana cara menggunakan HTML?
<tubuh bgcolor="#cccccc">
<div id="bodyDiv">
<div id="tajuk">
<jsp:sertakan halaman="/web/page/branch/header.jsp"/>
</div>
<div id="bilah menu">
<jsp:sertakan halaman="/web/page/branch/menubar.jsp"/>
</div>
<div id="konten">
<tabel border="0" width="100%" height="100%" style="table-layout:fixed;word-wrap:break-word;word-break;break-all;">
<tr>
<td valign="atas" lebar="25%">
<div kelas="judul konten">
<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="atas" lebar="25%">
<div kelas="judul konten">
<strong>Pengelolaan perangkat lunak komputer</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="atas" lebar="25%">
<div kelas="judul konten">
<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="atas" lebar="25%">
<div kelas="judul konten">
<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>
</tabel>
</div>
</div>
<div id="footer">
<jsp:sertakan halaman="/web/page/branch/footer.jsp"/>
</div>
</tubuh>