给admin.html 页面添加 表格样式
案例中用到的图片
admin.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理员列表</title>
<link rel="stylesheet" href="list.css">
</head>
<body>
<!-- logo区 -->
<div class="logo">
<a href="">[退出]</a>
</div>
<!-- 导航区 -->
<div class="nav">nav</div>
<!-- 核心区 -->
<div class="main">
<!-- 1.渐变条,已经预留了空间 -->
<!-- 2.内容区 -->
<div class="content">
<!-- 按钮区 -->
<div class="btn"></div>
<!-- 数据区 -->
<div class="data">
<table>
<thead>
<tr>
<td><input type="checkbox">全选</td>
<td>管理员ID</td>
<td>姓名</td>
<td>拥有角色</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>唐僧</td>
<td>和尚、师傅、术士</td>
<td>
<input type="button" value="修改" class="modify">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>孙悟空</td>
<td>猴王、弟子、德鲁伊</td>
<td>
<input type="button" value="修改" class="modify">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>猪八戒</td>
<td>元帅、弟子、MT</td>
<td>
<input type="button" value="修改" class="modify">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>4</td>
<td>沙僧</td>
<td>大将、弟子、小弟</td>
<td>
<input type="button" value="修改" class="modify">
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区 -->
<div class="page"></div>
</div>
</div>
<!-- 版权区 -->
<div class="copy">
<p>版权所有,违者必究。</p>
<p>官网:www.baidu.cn</p>
</div>
</body>
</html>
对应的list.css文件内容:
/*1.先做一些基本的设置*/
/*星是通用选择器,可以选择一切元素*/
* {
padding: 0;
margin: 0;
}
/*给所有div加边框*/
div {
border: 1px solid red;
}
/*2.设置页面的布局*/
.logo {
width: 960px;
height: 61px;
}
.nav {
height: 91px;
}
.main {
height: 410px;
/*预留出渐变条的空间*/
padding-top: 10px;
}
.copy {
width: 960px;
height: 50px;
}
div {
margin: 0 auto;
}
.content {
width: 950px;
height: 390px;
border: 5px solid #8ac1db;
}
.content>div {
width: 910px;
}
.btn,.page {
height: 40px;
}
.data {
height: 310px;
}
/*3.设置页面整体的背景*/
body {
background: #0EA8D8;
}
.logo {
background: url(../img/top_bg.png);
}
.nav {
background: #0488BB;
}
.content {
background: #E8F3F8;
}
.main {
background:
url(../img/content_bg.png)
repeat-x top;
}
/*4.设置文本样式*/
body {
font-family:
"微软雅黑","文泉驿正黑","黑体";
font-size: 14px;
}
.logo {
text-align: right;
line-height: 61px;
}
.logo>a {
margin-right: 40px;
color: #FFF;
text-decoration: none;
}
.logo>a:hover {
font-weight: bold;
}
.copy>p {
text-align: center;
color: #FFF;
line-height: 25px;
}
/* 5.设置数据区表格的样式 */
table {
width:100%;
bordr:1px solid #ccc;
border-collapse:collapse;
}
td {
border:1px solid #ccc;
text-align:center;
}
thead>tr {
line-height:43px;
background:#FBEDCE;
font-weight:bold;
}
tbody>tr {
line-height:35px;
background:#FFF;
}
tbody>tr:hover {
background:#F7F9FD;
}
.modify {
padding-left:15px;
background:
url(../img/modification.png)
no-repeat left;
border:0;
}
.delete {
padding-left:13px;
background:
url(../img/delete.png)
no-repeat left;
border:0;
}
.modify:hover,.delete:hover {
cursor:pointer;
}
最终页面效果: