3月27日作业: 经典布局案例 - html

Home > List of blog posts > 3月27日作业: 经典布局案例

Blogger Information

Blog 32

fans 0

comment 0

visits 19620

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">  <!-- 定义文本语言-->
<head>

<meta charset="utf-8">  <!--设置 编码格式为utf-8 -->
<title>双飞翼布局</title> <!-- 文章标题-->
<style type="text/css">   /* 设置属性样式表*/
.header,.footer {         /* 设置头部和底布的央视*/
	width: 100%;    /* 设置宽度100% */ 
	height: 60px;   /* 设置高度为60px */
	background-color: lightgray;   /* 设置背景色*/
	
}

.content {           /* 头部 和底部的 content类  */
	width: 1000px;          /* 宽度*/
	min-height: 100%;    /* content 的类 是 header footer 的子类 可以继承父类 可设置为100%  */
	background-color: gray;   /* 背景色  */
	margin: auto;   /* 边距浏览器自动适应 */
	text-align: center;  /* 文本居中  */
	line-height: 60px;   /* 垂直剧中*/

}

.footer {
	clear: both;   /* 清楚浮动 */
}

.container{
	width: 1000px;
	margin: auto;
	overflow: hidden; /* 溢出不可见 */
	background-color: yellow;
}

.wrap {

	width:100%;
	
	
	background-color: cyan;
    float: left;   /* 设置左浮动 */
}


.wrap .main {
	min-height: 650px;
	background-color: wheat;

	margin: 0 200px;  /* 两边挤压 左边右边 排除200px */
}
.left {
	float: left;
	width: 200px;
	min-height: 650px;
	background-color: lightskyblue;
	margin-left: -100%;    /* xiang左边移动1000px */

}

.right{
	float: left;
	width: 200px;
	min-height: 650px;
	background-color: lightgreen;
	margin-left: -200px; /*xiang左边移动200px*/
}




</style>
</head>
<body>
<!-- Dom结构-->
<!--头部-->
<div class="header">
<div class="content">网站头部 </div>
</div>
<!-- 主体-->
<div class="container">
<div class="wrap">  <!-- 防溢出-->
<div class="main">中间</div>
</div>
<div class="left">左侧</div>

<div class="right">右边</div>

</div>

<!-- 底部-->
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>

运行实例 »

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

圣杯布局:

实例

<!DOCTYPE html> 
<html lang="en"><!-- 注释语言-->
<head>
	<meta charset="UTF-8">  <!-- 编码 -->
	<title>圣杯布局</title>
	<style type="text/css">
	.header, .footer {  /* 头部底部   与之前的双飞一样*/
		width: 100%;
		height: 60px;
		background-color: lightgray;
	}

	.footer {
		clear: both;  /* 防溢出*/
	}

	.content {         /* content 父类 设置属性*/
		width: 1000px;
		height: 100%;  /* 姐父类*/
		background-color: gray;
		margin: auto;
		text-align: center;
		line-height: 60px;  /* 水平居中*/
	}

	.container {
		width: 600px;
		background-color: yellow;
		
		/* div 的大父类 使其所有类剧中*/
		margin:auto;
		
		/*使它能包住浮动区块*/
		overflow: hidden;  

		/* 使向外两边张开200px */
		padding:0 200px;

		
	}

	.container .main {
		/* 设置行高  */
		min-height: 650px;

		
		width: 100%;  /* 子承父业*/
		float:left; /* 左边浮动*/

		/*设置背景色*/
		background-color: wheat; 
	}

	.container .left {
		/*设置宽度*/
		width: 200px;
		/*最小高度*/
		min-height: 650px;
		
		/*左浮动*  浮动元素会相互挤压空间不够会自动转入下一行*/
		float:left;

		/*设置左外边距 回到原点 同理旁边的元素代替他的位置*/
		margin-left: -100%;

		/*关键步骤:相对定位,向左为负200,相当于向右移动200px;*/
		position: relative;
		left: -200px;
		
		/*设置背景色*/
		background-color: lightskyblue; 

	}

	.container .right {
		width: 200px;
		min-height: 650px;

		/*左浮动*/
		float:left;

		/*设置左外边距为当前宽度的负值,使之定位到main区块的右边*/
		margin-left:-200px;
		
		/*关键步骤:设置为相对定位,right:-200px意思是向左边移动200px;*/
		position: relative;
		right:-200px;

		/*设置背景色*/
		background-color: lightgreen;
	}
	</style>
</head>
<body>
<!-- DOM结构 -->
<!-- 头部 -->
<div class="header">
	<div class="content">网站头部</div>
</div>

<!-- 内容区 -->
<div class="container">
	<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

Pyhton 的基础入门

2018-03-15 12:43:14

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

实例

实例