实例
html>
会员管理系统/*设置表格边框并居中对齐*/
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;
}
会员ID | 会员名 | 会员头像 | 编辑 |
---|---|---|---|
406618060 | 人生百态 | 查看 删除 | |
406618060 | 人生百态 | 查看 删除 |
运行实例 »
点击 "运行实例" 按钮查看在线实例