CSS层叠样式表

最新推荐文章于 2024-04-20 12:19:34 发布

dudukawa

最新推荐文章于 2024-04-20 12:19:34 发布

阅读量86

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/dudukawa/article/details/99497692

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS（cascading style sheets）

层叠样式表

选择器

类选择器（.加上类名字）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.container{
				width: 960px;
				min-height: 1000px;
				background: pink;
				float: left;
			}
			.head{
				width: 100%;
				height: 200px;
				background: skyblue;
				float: left;
			}
			
			.body{
				width: 100%;
				/*height: 700px;*/
				float: left;
				background: greenyellow;
				
			}
			/*
			 设置
			 * */
			.body .main{
				width: 70%;
				height: 700px;
				background: red;
				float: left;
			}
			
			.body .sub{
				width: 29%;
				height: 700px;
				background: cornsilk;
				float: right;
			}
			
			.foot{
				float: left;
				width: 100%;
				height: 100px;
				background: darkgray;
			}
		</style>
	</head>
	<body>
		<div id="" class="container">
			<!--头开始了-->
			<div class="head">
				
			</div>
			<!--头结束了-->
			<!--体开始了-->
			<div class="body">
				<div class="main"></div>
				<div class="sub"></div>
			</div>
			<!--体结束了-->
			<!--尾开始了-->
			<div class="foot"></div>
			<!--尾结束了-->
		</div>
	</body>
</html>

标签选择器

div{

}

id选择器（#加上id名字）

搭建网站布局

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.container {
				background: chocolate;
				width: 700px;
				height: 700px;
			}
			
			.head {
				background: skyblue;
				width: 100%;
				height: 100px;
			}
			.all{
				background: red;
				width: 100%;
				height: 500px;
			}
			.menu{
				background: #000000;
				width: 30%;
				height: 100%;
				float: left;
			}
			.main{
				background: #FFFF00;
				width: 70%;
				height: 100%;
				float:right;
			}
			.footer{
				background: gray;
				width: 700px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<!--头开始了-->
			<div class="head">

			</div>
			<!--头结束了-->
			<div class="all">
				<!--菜单开始了-->
				<div class="menu">

				</div>
				<!--菜单结束了-->
				<!--主页面开始了-->
				<div class="main">

				</div>
				<!--主页面结束了-->
			</div>

			<!--尾开始了-->
			<div class="footer">

			</div>
			<!--尾结束了-->
		</div>
	</body>

</html>