收藏
批改狀態(tài)：合格
老師批語：這個(gè)案例寫完, 你的css水平又上了一個(gè)層次
使用CSS制作一張帶有四個(gè)圓角的表格
效果如下:
html部分代碼:
<body> <!-- 使用CSS制作一張帶有四個(gè)圓角的表格 --> <table> <caption> 上海交通大學(xué)課程表 </caption> <thead> <tr> <th>作息時(shí)間</th> <th>周1</th> <th>周2</th> <th>周3</th> <th>周4</th> <th>周5</th> </tr> </thead> <tbody> <tr> <td rowspan="3" class="td1">上午 8:00-11:30 </td> <td>語文</td> <td>語文</td> <td>語文</td> <td>語文</td> <td>語文</td> </tr> <tr> <td>數(shù)學(xué)</td> <td>數(shù)學(xué)</td> <td>數(shù)學(xué)</td> <td>數(shù)學(xué)</td> <td>數(shù)學(xué)</td> </tr> <tr> <td>英語</td> <td>英語</td> <td>英語</td> <td>英語</td> <td>英語</td> </tr> <tr> <td rowspan="2" class="td2">下午 13:30-15:30</td> <td>C語言</td> <td>C語言</td> <td>C語言</td> <td>C語言</td> <td>C語言</td> </tr> <tr> <td>sql數(shù)據(jù)庫</td> <td>sql數(shù)據(jù)庫</td> <td>sql數(shù)據(jù)庫</td> <td>sql數(shù)據(jù)庫</td> <td>sql數(shù)據(jù)庫</td> </tr> </tbody> <tfoot> <tr> <td>備注:</td> <td colspan="5">下課前需要打卡簽到:</td> </tr> </tfoot> </table> </body>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS 樣式部分:
<style>
table {
border: 1px solid #444444;
width: 800px;
margin: 30px auto;
box-shadow: 30px 30px 20px #888888;
margin: 0 auto;
position: relative;
/* --------設(shè)置四周圓角----- */
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-collapse: separate;
border-spacing: 0;
}
/* 背景圖片的設(shè)置 */
table::before {
content: '';
width: 799px;
height: 300px;
position: absolute;
left: 0;
top: 45px;
background-image: url(https://hot.online.sh.cn/images/attachement/jpeg/site1/20180913/IMG0c54a505619e48682490159.jpeg);
background-size: cover;
opacity: 0.28;
/* --------設(shè)置四周圓角----- */
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
th,
td {
border: 1px solid #444444;
text-align: center;
padding: 10px;
}
table caption {
font-size: 1.3rem;
font-weight: bolder;
margin-bottom: 15px;
}
table thead>tr:first-of-type {
background-color: #00ccff;
}
table tbody>tr:first-of-type>td:first-of-type {
background-color: #FDE566;
}
table tbody>tr:nth-last-of-type(2)>td:first-of-type {
background-color: #bbdd00;
}
table tfoot td {
background-color: #f3bdbd;
}
--------設(shè)置四周單元格圓角---------
table th:first-of-type {
border-top-left-radius: 20px;
}
table th:last-of-type {
border-top-right-radius: 20px;
}
table tfoot td:first-of-type {
border-bottom-left-radius: 20px;
}
table tfoot td:last-of-type {
border-bottom-right-radius: 20px;
}
</style>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
總結(jié): 照著老師的效果圖,自己百度各種CSS屬性,最終以失敗告終,~_~!. 慚愧. 后端語言有一定的邏輯性,從上到下依次執(zhí)行,CSS層疊樣式,居然玩不轉(zhuǎn)了.....
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)