零基础教你div布局页面

一.上下结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上下结构</title>
		<style>
			/*初始化：所有标签的内外边距清0*/
			*{margin: 0;padding: 0;}
			.top{
				margin:0 auto;
				width: 1000px;
				height: 100px;
				background-color:#302C47 ;
			}
			.main{
				margin: 0 auto;
				width: 1000px;
				height: 100px;
				background-color:#EBEAEF ;
			}
			h1{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<h1>hello</h1>
		<div class="top">
			
		</div>
		<div class="main">
			
		</div>
	</body>
</html>

二.左右结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>左右结构</title>
		<style>
			*{margin: 0;padding: 0;}
			.parent{
				margin: 0 auto;
				width: 1000px;
			}
			.left{
				float:left;
				width: 20%;
				height: 500px;
				background-color:red ;
			}
			.right{
				float:right;
				width: 80%;
				height: 500px;
				background-color:blue ;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

三.浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style type="text/css">
            *{margin：0; padding: 0}
            .parent{
                margin: 0 auto;
                width: 1000px;
                overflow: hidden;
                /*子级浮动导致负极高度塌陷的解决方案*/}
                background-color: red;
            }
            .son1{
                float: left;
                width: 20%px;
                height: 500px;
                background-color: bule;
                 
            }
            .son2{
                float: left;
                width: 80%px;
                height: 500px;
                background-color:green;
                 
            }
        </style>
    </head>
    <body>
        <div class="parent">
			
		</div>
		<div class="son1"></div>
			<div class="son2"></div>
    </body>
</html>

四.口型结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>口型结构</title>
	</head>
	    <style>
	    	.top{
				margin:0 auto;
				width: 1000px;
				height: 100px;
				background-color:#302C47 ;
			}
			.main{
				margin: 0 auto;
				width: 1000px;
			}
			    .left{
			    	float:left;
			    	width: 200px;
			    	height: 400px;
			    	background-color:#EBEAEF ;
			    }
			    .right{
			    	float:left;
			    	width: 800px;
			    	height: 400px;
			    }
			        .rightTop{
			        	overflow: hidden;
			        	background-color:gold ;
			        }
			            .main01{
			            	float:left;
			            	height: 350px;
			            	width: 700px;
			            	background-color:blue ;
			            }
			            .main02{
			            	float:left;
			            	height: 350px;
			            	width: 100px;
			            	background-color:red ;
			            }
			        .rightBottom{
			        	height: 50px;
			        	background-color:green;
			        }
	    </style>
	<body>
		<div class="top"></div>
		<div class="main">
			<div class="left"></div>
			<div class="right">
				<div class="rightTop">
					<div class="main01"></div>
					<div class="main02"></div>
				</div>
				<div class="rightBottom"></div>
			</div>
		</div>
	</body>
</html>
posted @ 2026-04-16 17:02  崔雅楠  阅读(16)  评论(0)    收藏  举报