收藏
批改狀態(tài)：合格
老師批語：一個簡單的圓角表格, 不知難住了多少英雄好漢
table的制作，設置圓角的話查了下貌似說用css3比較容易做出來，看了網(wǎng)上代碼還是不太理解，屬性太多。得慢慢消化實戰(zhàn)才能記得住
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/style.css"> <title>表格</title> </head> <body> <table> <caption>產(chǎn)品價格表</caption> <thead> <tr> <th>型號</th> <th>硬盤</th> <th>內(nèi)存</th> <th>cpu</th> <th>尺寸</th> <th>顏色</th> </tr> </thead> <tbody> <tr> <td rowspan="2">mac book pro</td> <td>128g</td> <td>4g</td> <td>i3</td> <td>13.3</td> <td>銀</td> </tr> <tr> <td>256</td> <td>8g</td> <td>i5</td> <td>13.3</td> <td>灰</td> </tr> <tr> <td rowspan="2">mac book air</td> <td>256</td> <td>8g</td> <td>i5</td> <td>13.3</td> <td>灰</td> </tr> <tr> <td>256</td> <td>8g</td> <td>i5</td> <td>13.3</td> <td>灰</td> </tr> </tbody> <tfoot> <tr> <td>備注:</td> <td colspan="5">顏色以當天發(fā)貨為準</td> </tr> </tfoot> </table> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
table{
border: 1px solid #444444;
width: 600px;
margin: 40px auto;
box-shadow: 2px 2px 2px #888888;
position: relative;
}
table caption{
font-weight: bold;
font-size: 1.3rem;
margin-bottom: 5px;
}
th, td {
border: 1px solid #444444;
text-align: center;
padding: 10px;
}
table thead tr th{
background-color: #cccccc;
}
table tbody > tr:first-of-type > td:first-of-type {
background-color: lightcoral;
}
table tbody > tr:nth-last-of-type(2) > td:first-of-type {
background-color: lightcyan;
}
thead>tr:nth-of-type(1)>th:nth-of-type(1) {
border-top-left-radius: 15px;
}
thead>tr:nth-of-type(1)>th:last-of-type {
border-top-right-radius: 15px;
}
tfoot>tr:nth-of-type(1)>td:nth-of-type(1) {
border-bottom-left-radius: 15px;
}
tfoot>tr:nth-of-type(1)>td:last-of-type {
border-bottom-right-radius: 15px;
}點擊 "運行實例" 按鈕查看在線實例
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
