Web开发基础-CSS-11

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

最终页面效果：

猜你喜欢