背景色切换链接按钮CSS代码:
/**//*2008.10.08*/
#linkButtonDiv1 ul{}{
ระยะขอบ:0;
ช่องว่างภายใน:0;
รายการสไตล์ประเภท: ไม่มี;
}
#linkButtonDiv1 เป็น{}{
ความกว้าง:100px;
ความสูง:20px;
จอแสดงผล: ล็อค;
ขนาดตัวอักษร: 16px;
ระยะขอบ:5px;
เส้นขอบ: 1px ทึบ #000000;
ช่องว่างภายใน:5px;
สี:#000000;
สีพื้นหลัง:#94b8e9;
การตกแต่งข้อความ: ไม่มี;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
}
#linkButtonDiv1 เป็น:โฮเวอร์{}{
สี:#ffffff;
สีพื้นหลัง:#336699;
การตกแต่งข้อความ:ขีดเส้นใต้;
-
ภาพพื้นหลัง切换链接按钮CSS代码:
/**//*2008.10.08*/
#linkButtonDiv2 ul{}{
ระยะขอบ:0;
ช่องว่างภายใน:0;
รายการสไตล์ประเภท: ไม่มี;
}
#linkButtonDiv2 เป็น{}{
ความกว้าง:100px;
ความสูง:20px;
จอแสดงผล: ล็อค;
ขนาดตัวอักษร: 16px;
ระยะขอบ:5px;
เส้นขอบ: 1px ทึบ #000000;
ช่องว่างภายใน:5px;
สี:#000000;
พื้นหลัง:url(../img/bg-0314.gif);
การตกแต่งข้อความ: ไม่มี;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
}
#linkButtonDiv2 เป็น:โฮเวอร์{}{
สี:#ffffff;
พื้นหลัง:url(../img/bg-0315.gif);
การตกแต่งข้อความ:ขีดเส้นใต้;
-
背景色突起效果按钮示例:
/**//*2008.10.08*/
#linkButtonDiv3 ul{}{
ระยะขอบ:0;
ช่องว่างภายใน:0;
รายการสไตล์ประเภท: ไม่มี;
}
#linkButtonDiv3 เป็น{}{
ความกว้าง:100px;
ความสูง:20px;
จอแสดงผล: ล็อค;
ขนาดตัวอักษร: 16px;
ระยะขอบ:5px;
ช่องว่างภายใน:5px;
สี:#8d4f10;
พื้นหลัง:#efb57c;
การตกแต่งข้อความ: ไม่มี;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
เส้นขอบ:2px เริ่มแรก #efb57c;
}
#linkButtonDiv3 เป็น:โฮเวอร์{}{
แบบอักษรน้ำหนัก: ตัวหนา;
สี:#ffffff;
พื้นหลัง:#daa670;
การตกแต่งข้อความ:ขีดเส้นใต้;
เส้นขอบ:2px เริ่ม #daa670;
-
一张背景左右切换按钮CSS代码:
/**//*2008.10.08*/
#linkButtonDiv4 ul{}{
ระยะขอบ:0;
ช่องว่างภายใน:0;
รายการสไตล์ประเภท: ไม่มี;
}
#linkButtonDiv4 เป็น{}{
ความกว้าง:114px;
ความสูง:24px;
จอแสดงผล: ล็อค;
ขนาดตัวอักษร: 12px;
ระยะขอบ:5px;
ช่องว่างภายใน:5px;
สี:#000000;
พื้นหลัง:url(../img/buttonbg.jpg) ไม่ทำซ้ำด้านบนซ้าย;
การตกแต่งข้อความ: ไม่มี;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
}
#linkButtonDiv4 เป็น:โฮเวอร์{}{
แบบอักษรน้ำหนัก: ตัวหนา;
สี:#ffffff;
ตำแหน่งพื้นหลัง: ด้านบนขวา;
การตกแต่งข้อความ:ขีดเส้นใต้;
-
页的HTML代码:
<body bgcolor="#cccccc">
<div id="bodyDiv">
<div id="ส่วนหัว">
<jsp:include page="/web/page/branch/header.jsp"/>
</div>
<div id="เมนูบาร์">
<jsp:include page="/web/page/branch/menubar.jsp"/>
</div>
<div id="เนื้อหา">
<table border="0" width="100%" height="100%" style="table-layout:fixed;word-wrap:break-word;word-break;break-all;">
<tr>
<td valign="ด้านบน" ความกว้าง="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="ด้านบน" ความกว้าง="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="ด้านบน" ความกว้าง="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="ด้านบน" ความกว้าง="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>
</ตาราง>
</div>
</div>
<div id="ส่วนท้าย">
<jsp:include page="/web/page/branch/footer.jsp"/>
</div>
</ร่างกาย>