前端开发_HTML5_布局-div+css布局

最新推荐文章于 2024-05-23 01:00:55 发布

魔笛手7

最新推荐文章于 2024-05-23 01:00:55 发布

阅读量2.3k

点赞数 6

分类专栏：前端文章标签： html5 html css css + div div布局

本文链接：https://blog.csdn.net/u013185175/article/details/122049164

版权

前端专栏收录该内容

75 篇文章 8 订阅

订阅专栏

div + css布局

1.引入

我们之前学习了两种排版，分别是表格布局和流式布局，那么我们发现这俩中排版都有自己的局限性，那么下面呢，我们就一起来学习一个比较重要的布局css+div布局。这一种布局方式是基于盒子模型的一种布局方式，在实际的开发中使用的比较多。

2.div+css布局

css+div布局是一种重要的布局方式，可以按照不同的排版方式实现不同效果的页面布局。

3.div+css布局

(1).简单的上中下结构布局

<style type="text/css">
   body{
	 font-size: 25px;
	 font-family: "宋体";
	 color: #0000ff;
	 text-align: center;
   }
			
   .containner{
	  margin: 0 auto;
	  height: 900px;
	  width: 1200px;
	  padding: 10px;
	  background-color: #bfbfbf;
	}
			
   .containner .head{
	  height: 180px;
	  background-color: #00AA00;
	  margin-bottom: 10px;
	}
   .containner .content{
	  height: 600px;
	  background-color: #b90000;
	  margin-bottom: 10px;
   }
			
   .containner .foot{
	  height: 100px;
	  background-color: #55ff00;
	  margin-bottom: 10px;
   }
			
</style>
<div class="containner">
   <div class="head">
	  这是头部
   </div>
   <div class="content">
	  这是内容
   </div>
   <div class="foot">
	  这是底部
   </div>
</div>

(2).简单的上左中(窄)右宽(宽)下结构布局

<style type="text/css">
			body{
				font-size: 25px;
				font-family: "宋体";
				color: #0000ff;
				text-align: center;
			}
			
			.containner{
				margin: 0 auto;
				height: 900px;
				width: 1200px;
				padding: 10px;
				background-color: #bfbfbf;
			}
			
			.containner .head{
				height: 180px;
				background-color: #00AA00;
				margin-bottom: 10px;
			}
			.containner .content{
				height: 600px;
				margin-bottom: 10px;
			}
		    .content-left{
				float: left;
				height: 600px;
				width: 300px;
				background-color: #b90000;
				margin-bottom: 10px;
			}
			.containner .content .content-right{
				float: right;
				height: 600px;
				width: 890px;
				background-color: #ff5500;
				margin-bottom: 10px;
			}
			
			.containner .foot{
				height: 100px;
				background-color: #55ff00;
				margin-bottom: 10px;
			}
</style>

<body>
	<div class="containner">
			<div class="head">
				这是头部
			</div>
			<div class="content">
				<div class="content-left">
					导航
				</div>
				<div class="content-right">
					详细内容
				</div>
			</div>
			<div class="foot">
				这是底部
			</div>
    </div>
</body>

(3).简单的上中(左中右)下结构布局

<style type="text/css">
			body{
				font-size: 25px;
				font-family: "宋体";
				color: #0000ff;
				text-align: center;
			}
			
			.containner{
				margin: 0 auto;
				height: 900px;
				width: 1200px;
				padding: 10px;
				background-color: #bfbfbf;
			}
			
			.containner .head{
				height: 180px;
				background-color: #00AA00;
				margin-bottom: 10px;
			}
			.containner .content{
				height: 600px;
				margin-bottom: 10px;
			}
		    .content-left{
				float: left;
				height: 600px;
				width: 300px;
				background-color: #b90000;
				margin-bottom: 10px;
			}
			.content-center{
				float: left;
				height: 600px;
				width: 590px;
				background-color: #4c7300;
				margin-bottom: 10px;
				margin-left: 10px;
			}
			
		    .content-right{
				float: right;
				height: 600px;
				width: 290px;
				background-color: #ff5500;
				margin-bottom: 10px;
				margin-left: 10px;
			}
			
			.containner .foot{
				height: 100px;
				background-color: #55ff00;
				margin-bottom: 10px;
			}
</style>
<body>
		<div class="containner">
			<div class="head">
				这是头部
			</div>
			<div class="content">
				<div class="content-left">
					内容左
				</div>
				<div class="content-center">
					内容中
				</div>
				<div class="content-right">
					内容右
				</div>
			</div>
			<div class="foot">
				这是底部
			</div>
		</div>
</body>

上述给出的是几种常见的div布局，我们还可以根据客户的需求设计出更多的按照实际要求的内容，但是无论如何设计，我们只要抓住一点就是使用块级结构div产生的盒子进行页面内容的布局即可完成。

魔笛手7

关注

6
点赞
踩
53

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发_HTML5_布局-div+css布局

div + css布局1.引入我们之前学习了两种排版，分别是表格布局和流式布局，那么我们发现这俩中排版都有自己的局限性，那么下面呢，我们就一起来学习一个比较重要的布局css+div布局。这一种布局方式是基于盒子模型的一种布局方式，在实际的开发中使用的比较多。2.div+css布局 css+div布局是一种重要的布局方式，可以按照不同的排版方式实现不同效果的页面布局。3.div+css布局 (1).简单的上中下结构布局<style type="text/css...
复制链接

扫一扫