今天的作业是做一个类似于上课时候的表格标签
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>会员管理系统</title>
<style type="text/css">
/*设置表格边框并居中对齐*/
table,tr,td,th{
border: 1px solid #576b67;
margin: 20px auto;
padding: 10px;
border-collapse: collapse;
}
/*设置表格阴影*/
table {
box-shadow: 3px 3px 3px #576b67;
}
/*设置鼠标放上去的效果*/
table tr:hover{
background-color: rgba(245, 61, 49, 0.27);
}
/*设置表头的背景颜色*/
table tr th{
background-color: rgba(0,0,0,0.23);
}
/*设置头像大小,边框,圆形,阴影*/
table tr td img{
width:50px;
height:50px;
border: 1px solid #6b112c;
border-radius: 50%;
box-shadow: 3px 3px 1px #6b112c;
}
/*设置a标签按钮的样式
1.取消下划线
2.设置边框
3.设置圆角
4.设置阴影*/
table tr td a{
text-decoration-line: none;
border: 1px solid #6b112c;
border-radius: 10px;
box-shadow: 2px 2px 1px #6b112c;
margin: 8px;
padding: 8px;
}
/*设置鼠标放上去的样式*/
table tr td a:hover{
background-color: #6b112c;
color: #fff;
font-size: 100%;
}
/*设置标题加粗*/
caption{
font-weight: bold;
margin-bottom: 20px;
font-size: 1.5em;
}
</style>
</head>
<body>
<table >
<caption>会员管理系统</caption>
<tr>
<th>会员ID</th>
<th>会员名</th>
<th>会员头像</th>
<th>编辑</th>
</tr>
<tr>
<td>406618060</td>
<td>人生百态</td>
<td><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2345302374,1211109368&fm=200&gp=0.jpg" alt=""></td>
<td>
<a href="">查看</a>
<a href="">删除</a>
</td>
</tr>
<tr>
<td>406618060</td>
<td>人生百态</td>
<td><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2345302374,1211109368&fm=200&gp=0.jpg" alt=""></td>
<td>
<a href="">查看</a>
<a href="">删除</a>
</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
