三列网站双飞翼和圣杯布局方式总结--2018年3月28日01时15分 - 作业

Home > List of blog posts > 三列网站双飞翼和圣杯布局方式总结--2018年3月28日01时15分

Blogger Information

Blog 15

fans 0

comment 1

visits 7810

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼网站布局</title>
	<style>
		/*设定头部和底部相同的属性（宽度、高度、背景颜色）*/
		.header,.footer{
			width:100%;
			height:60px;
			background-color:#999;
			
		}
		/*设定头部和底部块内元素相同的属性（宽度、高度、背景颜色，水平和垂直居中）*/
		.content{
			width: 960px;
			height:100%;
			background-color: #666;
			margin:0 auto;
			text-align: center;
			line-height: 60px;
		
		}
		/*设定中间部分的父级属性（宽度、高度、背景颜色，水平和垂直居中和定位属性）*/
		.contaienr{
			width:960px;
			height: 600px;
			background-color:#DFC7EB; 
			margin:0 auto;
			position:relative;

		}
		/*设定左边部分的属性（宽度、高度、背景颜色，块内元素水平和垂直居中、绝对定位属性）*/
		.left{
			width:200px;
			height: 100%;
			background-color: #8BC7EB;
			position: absolute;
			top:0;
			left:0;
			text-align: center;
			line-height: 600px;
		}
		
		/*设定右边部分的属性（宽度、高度、背景颜色，块内元素水平和垂直居中、绝对定位属性）*/
		.right{
			width:200px;
			height: 100%;
			background-color: #B9EDA1;
			position: absolute;
			top:0;
			right:0;
			text-align: center;
			line-height: 600px;
		}
		
		/*设定中间主体部分的属性（宽度、高度、背景颜色，块内元素水平和垂直居中）*/
		.main{
			width:960px;
			height: 100%;
			background-color: #F5967A;
			text-align: center;
			line-height: 600px;
		}			


	</style>
</head>
<body>
	<div class="header">
		<div class="content">头部</div>
	</div>
	<div class="contaienr">
		<div class="left">左</div>
		<div class=main>中</div>
		<div class="right">右</div>
	</div>
	<div class="footer">
		<div class="content">底部</div>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行结果如下：

此布局方法说明：

中间主体部分要用一个盒子即父级contaienr包起来，并对它进行相对定位，然后子元素中用绝对定位。

2、圣杯式网站布局代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三列圣杯网站布局</title>
	<style>
		/*设定头部和底部相同的属性（宽度、高度、背景颜色）*/
		.header,.footer{
			width:100%;
			height:60px;
			background-color:#999;
			
		}
		/*清除底部浮动*/
		.footer{
			clear:both;
		}
		/*设定头部和底部块内元素相同的属性（宽度、高度、背景颜色、居中）*/
		.content{
			width: 960px;
			height:100%;
			background-color: #666;
			margin:0 auto;
			text-align: center;
		
		}
		/*设定中间部分的父级属性（宽度、高度、背景颜色，居中、左右边距）*/
		.contaienr{
			width:560px;
			background-color:#DFC7EB; 
			margin:0 auto;
			padding:0 200px;
			

		}
		/*设定中间部分的属性（宽度、高度、背景颜色、向左浮动）*/
		.main{
			width: 100%;
			height: 600px;
			background-color: #F5967A;
			float:left;
		}
		/*设定左边部分的属性（宽度、高度、背景颜色、向左浮动、相对定位）*/
		.left{
			width: 200px;
			height: 600px;
			background-color: #8BC7EB;
			float:left;
			margin-left: -100%;
			position: relative;
			left:-200px;
		}
		
		/*设定右边部分的属性（宽度、高度、背景颜色、向左浮动、相对定位）*/
		.right{
			width: 200px;
			height: 600px;
			background-color:  #B9EDA1;
			float:left;
			margin-left: -200px;
			position: relative;
			right:-200px;
		}
		
		
	</style>
</head>
<body>
	<div class="header">
		<div class="content">头部</div>
	</div>
	<div class="contaienr">
		<div class=main>中</div>
		<div class="left">左</div>
		<div class="right">右</div>
	</div>
	<div class="footer">
		<div class="content">底部</div>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行结果如下：

此方法和前面说的方法实现了一样的布局效果，只是些方法中用到了浮动，只需将它们分别进行浮动和定位即可实现，要注意的是，必须要对底部清除浮动，否则会错位。中间部分必须先定位

手抄代码：

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

前端入门第一课

2018-03-16 19:54:26

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例