第7篇：网页布局（CSS）

最新推荐文章于 2020-11-28 19:50:49 发布

HaanLen

最新推荐文章于 2020-11-28 19:50:49 发布

阅读量413

点赞数

分类专栏： CSS/CSS3

本文链接：https://blog.csdn.net/weixin_40119412/article/details/103606243

版权

CSS/CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

上中下一栏板式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上中下三栏版式</title>
		<style type="text/css">
			*{margin: 0px;padding: opx;}
			body{
				font-size: 18px;
				height: 1000px;
				text-align: center;
			}
			#header{
				height:10%;
				background: peachpuff;
			}
			#main{
				height: 80%;
				background: pink;
			}
			#footer{
				height: 10%;
				background: salmon;
			}
			.wrap{
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<header id="header" class="wrap">#header</header>
		<section id="main" class="wrap"> section</section>
		<footer id="footer" class="wrap">foot</footer>
	</body>
</html>

左右两栏版式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}			
			body{			
				text-align: center;
				font-size: 18px;				
			}
			.wrap{
				width: 880px;
				height: 800px;
			}
			#left{
				width: 10%;
				height: 100%;
				float: left;
				background: salmon;
			}
			#right{
				width: 90%;
				height: 100%;
				background: #F08080;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div id="left">left</div>
		<div id="right">right</div>
		</div>
		
	</body>
</html>

左右两栏+页眉+页脚版式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: ;}
			body{
				font-size: 18px;
				height: 900px;
				width: 2800px;
			}
			#header{
				height: 15%;
				background: sandybrown;
			}
			#content{
				height: 75%;
				width: 100%;
			}
			#footer{
				height: 10%;
				background: #BC8F8F;
			}
			#side{
				height: 100%;
				width: 10%;
				float: left;
				background: darkgrey;
			}
			#main{
				height: 100%;
				width: 75%;
				background: cornsilk;
			}
		</style>
	</head>
	<body>
		<header id="header" class="wrap">header</header>
		<section id="content" class="wrap">
			<aside id="side">side</aside>
			<article id="main">article</article>
		</section>
		<footer id="footer">footer</footer>
	</body>
</html>

左右宽度固定中间自适应的左中右三栏版式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>左右浮动+中间静态排版布局</title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			body{
				text-align: center;
				font-size: 18px;
			}
			.wrap{
				margin: 0 auto;
				width: 900px;
			}
			#left{
				float: left;
				width: 150px;
				height: 300px;
				background: saddlebrown;
			}
			#right{
				float: right;
				width: 150px;
				height: 300px;
				background: #F08080;
			}
			#middle{
				height: 300px;
				background: azure;
				margin: 0 150px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div id="left">left</div>
			<div id="right">right</div>
			<section id="middle">#middle</section>
		</div>
	</body>
</html>

“双飞翼”布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>"双飞翼"布局</title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			body{
				text-align: center;
				font-size: 18px;
			}
			.wrap{
				width: 80%;
				margin: 0 auto;
			}
			#midContainer{
				width: 100%;
				float:left ;
			}
			#middle{
				height: 300px;
				background: silver;
				margin: 0 150px;
			}
			#left{
				float: left;
				width: 150px;
				height: 300px;
				background: darkkhaki;
				margin-left: -100%;	
			}
			#right{
				float: left;
				width: 150px;
				height: 300px;
				background: sandybrown;
				margin-left: -150px;	
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div id="midContainer">
				<section id="middle">#middle</section>
			</div>
			<div id="left">left</div>
			<div id="right">right</div>
			
		</div>
	</body>
</html>

左右宽度固定中间自适应的左中右+页眉+页脚版式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>"双飞翼"布局</title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			body{
				text-align: center;
				font-size: 18px;
			}
			#header{
				height: 90px;
				background: sandybrown;
			}
			.wrap{
				width: 80%;
				margin: 0 auto;
			}
			.clearfix:after{
				content: "";
				clear: both;
				display: block;
				visibility: hidden;
			}
			#midContainer{
				width: 100%;
				float:left ;
			}
			#middle{
				height: 300px;
				background: silver;
				margin: 0 150px;
			}
			#left{
				float: left;
				width: 150px;
				height: 300px;
				background: darkkhaki;
				margin-left: -100%;	
			}
			#right{
				float: left;
				width: 150px;
				height: 300px;
				background: sandybrown;
				margin-left: -150px;	
			}
			#footer{
				height: 10%;
				background: #BC8F8F;
			}
		</style>
	</head>
	<body>
		<header id="header" class="wrap">header</header>
		<div class="wrap clearfix">
			<div id="midContainer">
				<section id="middle">#middle</section>
			</div>
			<aside id="left">left</aside>
			<aside id="right">right</aside>			
		</div>
		<footer id="footer" class="wrap"> footer</footer>
	</body>
</html>

div+css布局与表格布局的比较

DIV+CSS实现了的分工；css样式可以重复使用，从而大大缩减页面代码，表现和内容完全分离，便于美工和开发人员，提高页面浏览速度。使用div和css布局的网页，结构清晰，更有利于搜索引擎的搜索。

HaanLen

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
第7篇：网页布局（CSS）

上中下一栏板式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>上中下三栏版式</title> <style type="text/css"> *{margin: 0px;padding: opx;} body{...
复制链接

扫一扫

专栏目录