Web开发基础-CSS-09

最新推荐文章于 2024-05-11 09:00:00 发布

Coder_Boy_

最新推荐文章于 2024-05-11 09:00:00 发布

阅读量185

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/Coder_Boy_/article/details/80767289

版权

Web开发专栏收录该内容

108 篇文章 0 订阅

订阅专栏

下面我们通过前面所学CSS设置背景色、背景图片来改动

Web开发基础-CSS-07 中的admin.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;
}

需要使用到的图片：

top_bg.png:

content_bg.png:

admin.html内容不变：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>管理员列表</title>
		<link rel="stylesheet" href="list.css">
	</head>
	<body>
		<!-- logo区 -->
		<div class="logo"></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"></div>	
	</body>
</html>

最终的页面效果：