平常磨铁杵 - 排版布局练习

时间 2019-11-06

标签平常排版布局练习繁體版

原文原文链接

本文叙述一下颜色方框简单排版和清除浮动方法的介绍python

1.观察图片构成，总共咱们看到。。好几个板块，刚刚开始练习我先将外面一个大的div去掉，直接自上而下开始排 ~并上色~ ide

<head>
	<meat charset='utf-8'/>
	<style>
	/*头部*/
		.header{
			width:1000px;
			height:200px;
			background:red;
			margin:0 auto;
		}
		.header_left  {
			width:400px;
			height:100px;
			background:#882fff;
			float:left;
		}
		.header_right{
			width:500px;
			height:120px;
			background:#92ff92;
			float:right;
		}
		.blank{
			height:10px;
			clear:both;
		}
		.nav{
			height:70px;
			background:#8292ff;
		}
		
		/*main主体内容*/
		
		.main{
			width:1000px;
			height:400px;
			background:green;
			margin:10px auto;
		}
		
		/*main 左半边 sidBar*/
		
		.sideBar{
			width:200px;
			height:390px;
			background:#ffff00;
			float:left;
			margin:5px auto;
		}
		.sideBar div{
			height:78px;
		}
		.sideBar div:nth-child(1){
			background:red;
			
		}
		.sideBar div:nth-child(2){
			background:#ff00ff;
		}
		.sideBar div:nth-child(3){
			background:#ffff00;
		}
		.sideBar div:nth-child(4){
			background:#000;
		}
		.sideBar div:nth-child(5){
			background:#ff888f;
		}
		/*main 右半边*/
		
		.summary{
			width:750px;
			height:390px;
			background:#f9f;
			float:right;
			margin:5px auto;
		}
		.summary div{
			height:130px;
		}
		.summary div:nth-child(1){
			background:#00f00f;
		}	
		.summary div:nth-child(2){
			background:#0f00f0;
		}
		.summary div:nth-child(3){
			background:#f0f00f;
		}
		
		/**/
		.content{
			width:1000px;
			height:100px;
			background:purple;
			margin:10px auto;
		}
		/*左侧*/
		.content div:nth-child(1){
			width:495px;
			height:100px;
			background:#ff00ff;
			float:left;
			margin:0 0 0 5px;
		}
		/*右侧*/
		.content div:nth-child(2){
			width:495px;
			height:100px;
			background:#fff0f0;
			float:left;
			margin:0 5px 0 0 ;
		}
		
		.bottom{
			width:1000px;
			height:100px;
			background:#f0f0f9;
			margin:10px auto;
			
		}
		.bottom div{
			width:200px;
			height:100px;
			float:left;
		}
		.bottom div:nth-child(1){
			background:#f00;
		}
		.bottom div:nth-child(2){
			background:green;
		}
		.bottom div:nth-child(3){
			background:blue;
		}
		.bottom div:nth-child(4){
			background:yellow;
		}
		.bottom div:nth-child(5){
			background:#00ffff;
		}
		
		
		.footer{
			width:1000px;
			height:120px;
			background:gray;
			margin:10px auto;
		}
		
	</style>
</head>

<body>
	<div class='header'>
		<div class='header_left'></div>
		<div class='header_right'></div>
		<div class='blank'></div>
		<div class='nav'></div>
	</div>
	<div class='main'>
		<div class='sideBar'>
			<div class='sideBar_a'>1</div>
			<div class='sideBar_a'>2</div>
			<div class='sideBar_a'>3</div>
			<div class='sideBar_a'>4</div>
			<div class='sideBar_a'>5</div>
		</div>
		<div class="summary">
			<div class='summary_left'></div>
			<div class='summary_center'></div>
			<div class='summary_right'></div>
		</div>
		<div class='blank'></div>
	</div>
	
	<div class='content'>
		<div></div>
		<div></div>
		<div class='blank'></div>
	</div>
	<div class='bottom'>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div class='blank'></div>
	</div>
	<div class='footer'></div>
复制代码

整个的结构灰常简单，主要是搞清楚宽、高、背景颜色还有最重要的浮动，以及清除浮动，下面顺嘴说一下清除浮动

1.父级紧邻兄弟法给son一个clear：both属性，下图会发现能够正常显示缺点：只是让后面的元素正常显示，并无撑开box的高度spa

2.父级给高度 father给高度，能够正常显示。缺点：通常都是元素内容撑开高度，拓展性很差
3.父级元素 display:inline-block; father给display:inline-block;能够正常显示缺点：父级盒子margin:auto;失效，会发现上下div中间有间隙。 4.父级.father添加样式：overflow:hidden; 能够正常显示缺点：须要配合宽度 5.要加给浮动元素末尾的后面再添加一个元素，加上一个clear属性，就能够正常显示缺点：随意的添加一个空元素，不符合代码规范咱们上面的浮动就是这样来取消的代码规范

6.恭喜你看到了这里，在这里我介绍一种当今最主流的清除浮动的方法。 after伪元素清除浮动,添加给father，依旧能够正常显示，不发图了~ clearfix:after{ content:””; display:block; clear:both; }code