圣杯布局和双飞翼布局

前端最菜

于 2020-06-29 21:24:59 发布

阅读量141

点赞数 4

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/liujiango/article/details/107028903

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

圣杯布局

<!DOCTYPE html>
<html>
<head>
	<title>圣杯</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		header{
			width: 100%;
			height: 100px;
			background-color: #f4f4f4;
		}
		footer{
			width: 100%;
			height: 100px;
			background-color: #f5e2f2;
			clear:both;

		}
		.wrapper{
			padding: 0 200px 0 200px;
			overflow: hidden;
		}
		.item{
			line-height:  200px;
			text-align: center;
			height: 200px;
		}
		.main{
			width: 100%;
			float: left;
			background-color: red

		}
		.left{
			width: 200px;
			float: left;
			margin-left: -100%;
			position: relative;
			left: -200px;
			background-color: yellow;
		}
		.right{
			width: 200px;
			float: left;
			margin-left: -200px;
			position: relative;
			left: 200px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<header></header>
	<div class="wrapper">
		<div class="item main">main</div>
		<div class="item left">left</div>
		<div class="item right">right</div>
	</div>
	<footer></footer>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html>
<head>
	<title>双飞翼</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		header, footer {
		    text-align: center;
		    width: 100%;
		    background-color: #bbbbbb;
		}
		footer{
			clear: both;
		}
		.main{
		    text-align: center;
		    line-height: 200px;
		    font-size: 40px;
		}
		.center{
			margin: 0 200px;
		}
		.content{
			float: left;
			width: 100%;
			background-color: yellow;
		}
		.left{
			float: left;
			width: 200px;
			height: 200px;
			margin-left: -100%;
			background-color:red;
		}
		.right{
			float: left;
			width: 200px;
			height: 200px;
			margin-left: -200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<header>双飞翼布局</header>
	<div class="wrapper">
		<div class="content">
			<div class="center main">center</div>
		</div>
		<div class="left main">left</div>
		<div class="right main">right</div>
	</div>
	<footer>footer</footer>	
</body>
</html>

前端最菜

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局和双飞翼布局

圣杯布局<!DOCTYPE html><html><head> <title>圣杯</title> <style type="text/css"> *{ margin: 0; padding: 0; } header{ width: 100%; height: 100px; background-color: #f4f4f4; } footer{ width: 100%;
复制链接

扫一扫