本篇內(nèi)容主要講解“CSS中的圓角,隔行,變色的具體實(shí)現(xiàn)方法”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS中的圓角,隔行,變色的具體實(shí)現(xiàn)方法”吧!
10余年的濂溪網(wǎng)站建設(shè)經(jīng)驗(yàn),針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù),響應(yīng)快,48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動調(diào)整濂溪建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“濂溪網(wǎng)站設(shè)計(jì)”,“濂溪網(wǎng)站推廣”以來,每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
先看效果圖:
CSS:
代碼如下:
<style type="text/css">
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
margin-bottom: 18px;
}
.table th, .table td {
padding: 8px;
line-height: 18px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table th {
font-weight: bold;
}
.table thead th {
vertical-align: bottom;
}
.table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td {
border-top: 0;
}
.table tbody + tbody {
border-top: 2px solid #dddddd;
}
.table-condensed th, .table-condensed td {
padding: 4px 5px;
}
.table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
*border-collapse: collapsed;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered th, .table-bordered td {
border-left: 1px solid #dddddd;
}
.table-bordered caption + thead tr:first-child th, .table-bordered caption + tbody tr:first-child th, .table-bordered caption + tbody tr:first-child td, .table-bordered colgroup + thead tr:first-child th, .table-bordered colgroup + tbody tr:first-child th, .table-bordered colgroup + tbody tr:first-child td, .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
border-top: 0;
}
.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
}
.table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child {
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
}
.table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
}
.table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child {
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
}
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
.table tbody tr:hover td, .table tbody tr:hover th {
background-color: #f5f5f5;
}
</style>
再看表格引用:
代碼如下:
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th width="30"> <input type="checkbox" name="ckall" id="ckall" />
</th>
<th width="40"> ID號 </th>
<th width="80"> 編碼 </th>
<th> 名稱 </th>
<th> 用戶密碼 </th>
<th width="60"> 管理員否 </th>
<th width="55"> 操作 </th>
</tr>
</thead>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>1</td>
<td>awinlau</td>
<td> 胡光光</td>
<td> awin</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>2</td>
<td>hugge</td>
<td> 劉若英</td>
<td> test</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>3</td>
<td>awinlau</td>
<td> 胡光光</td>
<td> awin</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>4</td>
<td>awinlau</td>
<td> 胡光光</td>
<td> awin</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
</table>
到此,相信大家對“CSS中的圓角,隔行,變色的具體實(shí)現(xiàn)方法”有了更深的了解,不妨來實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
網(wǎng)頁標(biāo)題:CSS中的圓角,隔行,變色的具體實(shí)現(xiàn)方法
本文鏈接:http://jinyejixie.com/article36/iiespg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站建設(shè)、企業(yè)建站、標(biāo)簽優(yōu)化、Google、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)