css页面布局

最新推荐文章于 2024-08-09 16:30:00 发布

毛姆的酒馆

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量233

点赞数 2

分类专栏：项目

本文链接：https://blog.csdn.net/weixin_43918847/article/details/100302491

版权

项目专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用css页面布局要先写出一个父div，然后在父div里面把自己需要的内容划分为多块，分为多个子div，按照需要再对这些子div进行划分，两个div并排，就必须要对其进行浮动处理。可以先在HTML中划分好样式，再写css不至于混乱。

解答如下：
整个页面分为上中下三部分，由于上中部分内容较多，所以再对其进行细分，分为每一小部分，对其进行精细化处理，一目了然。
制作如图css布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.head{/*上部分*/
				width: 970px;
				height: 103px;
				margin: 0 auto;
				margin-bottom: 10px;
			}
			.head .emil{
				width: 277px;
				height: 103px;
				background-color: red;
				margin: 0 0 0 0;
				float: left;
			}
			.head .ui{
				width: 137px;
				height: 49px;
				background-color: green;
				margin: 0 0 8px 0;
				float: right;
			}
			.head .ball{
				width: 679px;
				height: 46px;
				background-color: green;
				float: right;
			}
			.center{/*中间部分，比较复杂，对其精细划分*/
				width: 970px;
				height: 435px;
				margin: 0 auto;
				margin-bottom: 10px;
			}
			.center .lpart{/*左部分黄色部分*/
				width: 310px;
				height: 435px;
				background-color: orange;
				float: left;
				margin: 0 10px 0 0;
			}
			.center .rpart{/*右部分*/
				width: 650px;
				height: 435px;
				float: left;
			}
			.center .rpart .rtop{
				width: 650px;
				height: 400px; 
				
			}
			.center .rpart .rbottom{
				width: 650px;
				height: 25px; 
				background-color: green;
				margin-top: 10px;
			}
			.center .rpart .rtop .rcenter{
				width: 450px;
				height: 400px;
				float: left;/*必须浮动，两块区域才能并排*/
			}
			.center .rpart .rtop .right{
				width: 190px;
				height: 401px;
				background-color: pink;
				float: left;
				margin-left: 10px;
			}
			.center .rpart .rtop .rcenter .a{
				width: 450px;
				height: 240px;
				background-color: blue;
				float: left;
			}
			.center .rpart .rtop .rcenter .b{
				width: 450px;
				height: 110px;
				background-color: blue;
				float: left;
				margin: 10px 0 10px 0;
			}
			.center .rpart .rtop .rcenter .c{
				width: 450px;
				height: 30px;
				background-color: blue;
				float: left;
			}
			
			.foot{
				width: 970px;
				height: 35px;
				background-color: blue;
				margin: 0 auto;
				margin-top: 10px;
				
			}
		</style>
	</head>
	<body>
		<div class="head">
			<div class="emil"></div>
			<div class="ui"></div>
			<div class="ball"></div>
		</div>
		<div class="center">
			<div class="lpart"></div>
			<div class="rpart">
				<div class="rtop">
					<div class="rcenter">
						<div class="a"></div>
						<div class="b"></div>
						<div class="c"></div>
					</div>
					<div class="right"></div>
				</div>
				<div class="rbottom"></div>
			</div>
		</div>
		<div class="foot"></div>
	</body>
</html>