css简单练习5

时间  2020-12-06
标签 css html 布局 url spa code htm blog 图片 utf-8 栏目 CSS 繁體版
原文   原文链接

css简单练习5

根据css现学内容，完成以下页面布局。
图例以下所示：
在这里插入图片描述

css

练习分析：

  1. 总体观察图片可知该网页的背景颜色是灰色，即最大的盒子中背景颜色应设为灰色。大盒子中摆入多个小一点的盒子来完成布局，其余的盒子摆放可经过下图来理解。
  2. 盒子摆好后能够根据实际状况加入外边距（margin）或内边距（padding）来分开盒子，以便于按要求完成任务。
  3. 对于形状相同的盒子写出来一个后复制粘贴来，能够减小做业任务。
  4. 对于上方的菜单导航栏中能够加入伪类来加强视觉效果。
  5. 若代码量比较大为了编写方便，能够将css代码块与html代码块分开写，但注意须要经过link来将css导入html中。如本题目中使用的 <link href="css/css.css" rel="stylesheet" />。
    在这里插入图片描述

html代码实现以下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>	
<link href="css/css.css" rel="stylesheet" />
	</head>
	<body>
		<!-- 顶部线 -->
		<div class="aline"></div>
		<!-- 顶部线结束 -->

		<!-- logo部分,分三个小部分，左中右 -->
		<div id="logo">
			<div class="logo_left"></div>
			<div class="logo_center"></div>
			<div class="logo_right">
				<a href="http://www.baidu.com">登&nbsp;&nbsp;录</a>
				&nbsp;&nbsp;
				<a href="http://www.baidu.com">注&nbsp;&nbsp;册</a>
			</div>
			<div style="clear: left;"></div>
		</div>
		<!-- logo部分结束 -->

		<!-- 导入栏 -->
		<div class="manu">
			<div class="manu1"><a href="">首页</a></div>
			<div class="manu1"><a href="">唐诗</a></div>
			<div class="manu1"><a href="">宋词</a></div>
			<div class="manu1"><a href="">古代小说</a></div>
			<div class="manu1"><a href="">现代小说</a></div>
			<div class="manu1"><a href="">散文</a></div>
			<div class="manu1"><a href="">诗歌</a></div>
			<div style="clear: left;"></div>
		</div>
		<!-- 导入栏结束 -->

		<!-- 广告区 -->
		<div>
			<div class="advertising"></div>
		</div>
		<!-- 广告区结束 -->

		<!-- 项目分区分为project_1，project_2和project三部分 -->
		<div class="project">
			<!-- project第一部分开始 -->
			<div class="project_1">
				<div class="part_1">
					<div class="part_1-1">唐诗</div>
					<div class="part_1-2">
						<a href="">更多&gt;&gt;</a>
					</div>
					<div style="clear: both;"></div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
				</div>
				<div class="part_2">
					<div class="part_1-1">宋词</div>
					<div class="part_1-2">
						<a href="">更多&gt;&gt;</a>
					</div>
					<div style="clear: both;"></div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
				</div>
				<div class="part_3">
					<div class="part_1-1">元曲</div>
					<div class="part_1-2">
						<a href="">更多&gt;&gt;</a>
					</div>

					<div style="clear: both;"></div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
				</div>
				<div style="clear: left;"></div>
			</div>
			<!-- project第一部分结束 -->
			
			<!-- project第二部分开始 -->
			<div class="project_2">
				<div class="part_1">
					<div class="part_1-1">唐诗</div>
					<div class="part_1-2">
						<a href="">更多&gt;&gt;</a>
					</div>
					<div style="clear: both;"></div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
				</div>
				<div class="part_2">
					<div class="part_1-1">宋词</div>
					<div class="part_1-2">
						<a href="">更多&gt;&gt;</a>
					</div>
					<div style="clear: both;"></div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
				</div>
				<div class="part_3">
					<div class="part_1-1">元曲</div>
					<div class="part_1-2">
						<a href="">更多&gt;&gt;</a>
					</div>
					<div style="clear: both;"></div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
					<div class="part_1-3">
						<a href="">静夜思</a>
					</div>
				</div>
				<div style="clear: left;"></div>
			</div>
			<!-- project第二部分结束 -->
			
			<!-- project第三部分开始 -->
			<div class="proect_3">
				<div class="part_3-1">友情连接</div>
				<div class="part_3-2"></div>
				<div style="clear: both;"></div>
				<div class="part_3-3">
					<a href="http://www.baidu.com">百度</a>
				</div>
			</div>
			<!-- project第三部分结束 -->
		</div>
	</body>
</html>

css代码实现以下：

* { 
	margin: 0px;
	padding: 0px;
}

body { 
	background-color: #E3E3E3;
}

.aline { 
	background-color: #00A9F8;
	height: 3px;
	width: 1200px;
	margin: auto;
}

#logo { 
	width: 75rem;
	margin: 10px auto;
}

.logo_right a { 
	color: #00A9F8;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}

.logo_center, .logo_left, .logo_right { 
	height: 80px;
	float: left;
}

.logo_left { 
	width: 250px;
	background-color: #F5F5F5;
	background-image: url(../img/logo.jpg);
	background-repeat: no-repeat;
	background-position: center;
}

.logo_center { 
	width: 700px;
	background-color: #00A9F8;
	background-image: url(../img/timg.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

.logo_right { 
	width: 250px;
	background-color: #F5F5F5;
	text-align: center;
	line-height: 80px;
}

.logo_right a { 
	text-decoration-line: none;
}

.manu { 
	margin: 10px auto;
	width: 1200px;
	height: 60px;

}

.manu1 { 
	background-color: #00A9F8;
	width: 171px;
	float: left;
	height: 60px;
	text-align: center;
	line-height: 60px;
}

.manu1 a { 
	color: #FFFFFF;
	text-decoration: none;
}

.manu1:hover { 
	background-color: #18e8ff;
}

.advertising { 
	width: 1200px;
	height: 120px;
	background-image: url(../img/timg.gif);
	background-position: center;
	background-repeat: no-repeat;
	margin: 10px auto;
}

.part_1 { 
	height: 45px;
	background-color: #FFFFFF;
	width: 385px;
}

.part_1-1, .part_1-2 { 
	height: 45px;
	border-bottom-width: 3px;
	border-bottom-color: #00A9F8;
	border-bottom-style: solid;
	width: 385px;
	color: #FFFFFF;
}

.part_1-1 { 
	float: left;
	background-color: #00A9F8;
	width: 105px;
	text-align: center;
	line-height: 45px;
}

.part_1-2 { 
	float: right;
	background-color: #FFFFFF;
	width: 260px;
	text-align: right;
	line-height: 45px;
	padding-right: 20px;

}

.part_1-3 { 
	text-align: left;
	line-height: 45px;
	border-bottom-width: 1px;
	border-bottom-color: #E3E3E3;
	border-bottom-style: dotted;
	background-color: #FFFFFF;
	width: 375px;
	padding-left: 10px;
}

.part_1-2 a { 
	color: #00A9F8;
	text-decoration: none;
}

a { 
	color: black;
	text-decoration: none;
}

.part_1, .part_2, .part_3 { 
	float: left;
}

.part_2 { 
	margin: 0px 22.5px;
}

.project { 
	width: 1200px;
	margin: 0px auto;
}

.project_2 { 
	margin-top: 10px;
	margin-bottom: 10px;
}

.parject_3 { 
	width: 1200px;
	background-color: #FFFFFF;
	height: 45px;
}

.part_3-1, .part_3-2 { 
	height: 45px;
	border-bottom-width: 3px;
	border-bottom-color: #00A9F8;
	border-bottom-style: solid;
	text-align: center;
	line-height: 45px;
}

.part_3-1 { 
	background-color: #00A9F8;
	width: 95px;
	float: left;
	padding-left: 10px;
	color: #FFFFFF;
}

.part_3-2 { 
	width: 1095px;
	float: right;
	background-color: #FFFFFF;
}

.part_3-3 { 
	width: 1190px;
	height: 45px;
	background-color: #FFFFFF;
	padding-left: 10px;
}

运行结果：

在这里插入图片描述

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程