平常磨鐵杵 - 排版佈局練習

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。