收藏
批改狀態(tài)：合格
老師批語：這兩天的作業(yè)已檢查??！
完成的很出色！繼續(xù)保持?。?/span>
在html中，所有元素都被描述成矩形盒子。盒模型通過4個屬性來描述：padding，margin，content，border。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>會員管理</title>
<style type="text/css">
body{
background-color: floralwhite;
}
table,td,th{
border: 1px solid darkgray;
}
table{
border-collapse: collapse;
width: 600px;
margin: 0 auto;
background-image: url("https://img.php.cn//upload/image/543/183/884/1521734800901827.jpg");
background-repeat: no-repeat;
background-size: cover;
box-shadow: 3px 3px 5px #A9A9A9;
}
table img{
width: 30px;
border-radius: 50%;
box-shadow: 2px 2px 2px #A9A9A9;
}
table td{
text-align: center;
}
table caption {
text-align: center;
color: darksalmon;
font-size: 2em;
font-weight: bolder;
margin-top: 50px;
}
table th{
color: cornflowerblue;
}
.id{
color: crimson;
font-weight: bolder;
}
</style>
</head>
<body>
<table>
<caption>會員管理</caption>
<tr>
<th>id</th>
<th>用戶名</th>
<th>昵稱</th>
<th>頭像</th>
<th>等級</th>
<th>經(jīng)驗</th>
<th>積分</th>
</tr>
<tr>
<td class="id">10001</td>
<td>md394845</td>
<td>一只大鳥</td>
<td><img src="https://img.php.cn//upload/image/263/349/466/1521734807614318.jpg" alt="頭像" /></td>
<td>7</td>
<td>676</td>
<td>3465</td>
</tr>
<tr>
<td class="id">10002</td>
<td>ff4333ff</td>
<td>愛愛</td>
<td><img src="https://img.php.cn//upload/image/184/409/479/1521734810902468.jpg" alt="頭像" /></td>
<td>5</td>
<td>654</td>
<td>634</td>
</tr>
<tr>
<td class="id">10003</td>
<td>gfsazxc22</td>
<td>JACK</td>
<td><img src="https://img.php.cn//upload/image/401/469/372/1521734812780507.jpg" alt="頭像" /></td>
<td>6</td>
<td>734</td>
<td>855</td>
</tr>
<tr>
<td class="id">10004</td>
<td>qweasdzxc</td>
<td>黑人</td>
<td><img src="https://img.php.cn//upload/image/146/139/453/1521734814361085.jpg" alt="頭像" /></td>
<td>4</td>
<td>537</td>
<td>234</td>
</tr>
<tr>
<td class="id">10005</td>
<td>zzre332</td>
<td>趙日天</td>
<td><img src="https://img.php.cn//upload/image/279/404/983/1521734816367857.jpg" alt="頭像" /></td>
<td>5</td>
<td>231</td>
<td>534</td>
</tr>
</table>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
images圖片
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號