Web开发基础-CSS-13

最新推荐文章于 2024-08-02 18:01:26 发布

原创最新推荐文章于 2024-08-02 18:01:26 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一个用于展示管理员信息的HTML页面样式设计案例，包括使用CSS为表格添加样式的方法，如渐变背景、按钮样式等。

给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;
}

最终页面效果：