ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

19 网页常见的3种布局

2022-08-05 11:33:33  阅读:145  来源: 互联网

标签:网页 width 19 100% 布局 height color background container


1 单列布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		.header{
			width: 100%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: #000;
		}
		.container{
			width: 1200px;
			margin: 0 auto;
		}
		.header .container{
			height: 60px;
			background-color: orange;
		}
		.wrap{
			width: 100%;
			height: 100%;
		}
		.wrap .container{
			height: 100%;
			background-color: red;
		}
		.footer{
			width: 100%;
			height: 100px;
		}
		.footer .container{
			height: 100px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="container">头部</div>
	</div>
	<div class="wrap">
		<div class="container">主题内容</div>
	</div>
	<div class="footer">
		<div class="container">尾部</div>
	</div>

</body>
</html>

2 两列布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		.header{
			width: 100%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: #000;
		}
		.container{
			width: 1200px;
			margin: 0 auto;
		}
		.header .container{
			height: 60px;
			background-color: orange;
		}
		.wrap{
			width: 100%;
			height: 100%;
		}
		.wrap .container{
			height: 100%;
			background-color: red;
		}

		.wrap .left{
			width: 10%;
			height: 100%;
			float: left;
			background-color: yellowgreen;
		}
		.wrap .right{
			width: 90%;
			height: 100%;
			float: right;
			background-color: orchid;
		}

		.footer{
			width: 100%;
			height: 100px;
		}
		.footer .container{
			height: 100px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="container">头部</div>
	</div>
	<div class="wrap">
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</div>
	<div class="footer">
		<div class="container"></div>
	</div>

</body>
</html>

3 多列布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		.header{
			width: 100%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: #000;
		}
		.container{
			width: 1200px;
			margin: 0 auto;
		}
		.header .container{
			height: 60px;
			background-color: orange;
		}
		.wrap{
			width: 100%;
			height: 100%;
		}
		.wrap .container{
			height: 100%;
		}

		.wrap .left{
			width: 10%;
			height: 100%;
			float: left;
			background-color: yellowgreen;
		}
		.wrap .right{
			width: 10%;
			height: 100%;
			float: right;
			background-color: orchid;
		}
		.wrap .center{
			height: 100%;
			background-color: purple;
			margin: 0 130px;
		}

		.footer{
			width: 100%;
			height: 100px;
		}
		.footer .container{
			height: 100px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="container">头部</div>
	</div>
	<div class="wrap">
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">lxx</div>
		</div>
	</div>
	<div class="footer">
		<div class="container"></div>
	</div>

</body>
</html>

标签:网页,width,19,100%,布局,height,color,background,container
来源: https://www.cnblogs.com/it-lkp/p/16553717.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有