Correction status:qualified
Teacher's comments:这两天的作业已检查!!
完成的很出色!继续保持!!
在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>经验</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图片