html页面常见布局

今天药忘吃喽~ 2023-08-17 17:03 118阅读 0赞

# 页面常见布局 #

单列布局、两列布局、三列布局

页面通常都会分为header、wrapper、footer三个部分

## 单列布局 ##

<!DOCTYPE html>
    <html>
    <head>
    	<title>单列布局</title>
    	<link rel="stylesheet" type="text/css" href="reset.css">
    	<style type="text/css">
    		html,body{
    			/*宽度，高度100%代表与页面同宽同高*/
    			width: 100%;
    			height: 100%;
    		}
    		.header{
    			width: 100%;
    			height: 60px;
    			line-height: 60px;
    			/*行高也能撑起整个盒子*/
    			text-align: center;
    			background-color: black;
    		}
    		.container{
    			/*container只设置宽度，保证内容部分水平居中即可*/
    			margin:0 auto;
    			width: 1200px;
    
    		}
    		.header .container{
    			/*
    			通常container不设置页面高度，页面高度由内层元素决定。*/
    			height: 60px;
    			background-color: red;
    		}
    		.wrapper{
    			width: 100%;
    			height: 100%;
    
    		}
    		.wrapper .container{
    			height: 100%;
    			background-color: yellow;
    		}
    		.foot{
    			width: 100%;
    			height: 60px;
    		}
    		.foot .container{
    			height: 100%;
    			background-color: green;
    		}
    	</style>
    </head>
    <body>
    <div class="header">
    	<div class="container">
    		头部内容区域
    	</div>
    </div>
    <div class="wrapper">
    	<div class="container">
    		中心内容区域
    	</div>
    </div>
    <div class="foot">
    	<div class="container">
    		尾部内容区域
    	</div>
    </div>
    </body>
    </html>

盒子高度默认是盒子中元素高度，如文字高度。文字的行高即代表文字的高度

## 两列布局 ##

利用左右浮动，实现两列布局

<!DOCTYPE html>
    <html>
    <head>
    	<title>两列布局</title>
    	<link rel="stylesheet" type="text/css" href="reset.css">
    	<style type="text/css">
    		html,body{
    			width: 100%;
    			height: 100%;
    		}
    		.header{
    			width: 100%;
    			height: 60px;
    			line-height: 60px;
    			text-align: center;
    			background-color: black;
    		}
    		.container{
    			margin:0 auto;
    			width: 1200px;
    
    		}
    		.header .container{
    			height: 60px;
    			background-color: red;
    		}
    		.wrapper{
    			width: 100%;
    			height: 100%;
    
    		}
    		.wrapper .container{
    			height: 100%;
    			/*background-color: yellow;*/
    		}
            .wrapper .container .left{
            	width:10%;
            	height: 100%;
            	float: left;
            	background-color:purple;
            }
            .wrapper .container .right{
            	/*可以留一点做空隙，也可以不留，左边10%，右边90%*/
            	width:89%;
            	height: 100%;
            	float: right;
            	background-color: yellowgreen;
            }
    
    		.foot{
    			width: 100%;
    			height: 60px;
    		}
    		.foot .container{
    			height: 100%;
    			background-color: green;
    		}
    	</style>
    </head>
    <body>
    <div class="header">
    	<div class="container">
    		头部内容区域
    	</div>
    </div>
    <div class="wrapper">
    	<div class="container">
    		<div class="left">
    			
    		</div>
    		<div class="right"></div>
    	</div>
    </div>
    <div class="foot">
    	<div class="container">
    		尾部内容区域
    	</div>
    </div>
    </body>
    </html>

## 三列布局 ##

三列布局时，中间部分无需设置浮动，只需要设置左右两边的margin，width就能自动调整到合适的宽度，形成三列布局

<!DOCTYPE html>
    <html>
    <head>
    	<title>三列布局</title>
    	<link rel="stylesheet" type="text/css" href="reset.css">
    	<style type="text/css">
    		html,body{
    			width: 100%;
    			height: 100%;
    		}
    		.header{
    			width: 100%;
    			height: 60px;
    			line-height: 60px;
    			text-align: center;
    			background-color: black;
    		}
    		.container{
    			margin:0 auto;
    			width: 1200px;
    
    		}
    		.header .container{
    			height: 60px;
    			background-color: red;
    		}
    		.wrapper{
    			width: 100%;
    			height: 100%;
    
    		}
    		.wrapper .container{
    			height: 100%;
    			/*background-color: yellow;*/
    		}
            .wrapper .container .left{
            	width:10%;
            	height: 100%;
            	float: left;
            	background-color:purple;
            }
            .wrapper .container .right{
            	width:10%;
            	height: 100%;
            	float: right;
            	background-color: yellowgreen;
            }
            .wrapper .container .center{
            	/*width:80%;*/  
            	height: 100%;
            	margin:0 130px; 
            	/*不要设置宽度，用外边距来限制盒子的范围*/
            	background-color: blue;
            }
    		.foot{
    			width: 100%;
    			height: 60px;
    		}
    		.foot .container{
    			height: 100%;
    			background-color: green;
    		}
    	</style>
    </head>
    <body>
    <div class="header">
    	<div class="container">
    		头部内容区域
    	</div>
    </div>
    <div class="wrapper">
    	<div class="container">
    		<div class="left">
    			
    		</div> 
    		<div class="right"></div>
    		<div class="center"></div>  
    		
    	</div>
    </div>
    <div class="foot">
    	<div class="container">
    		尾部内容区域
    	</div>
    </div>
    </body>
    </html>