一招秒杀常见网页基本排版布局

最新推荐文章于 2024-09-18 15:06:57 发布

cuiidoit

最新推荐文章于 2024-09-18 15:06:57 发布

阅读量3.7k

点赞数 8

文章标签： html 网页设计

本文链接：https://blog.csdn.net/cuiidoit/article/details/121600487

版权

第一种HTML CSS使用div(盒子)进行基本布局

1.单列布局

网页分为上中下三个模块


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>网页上中下</title>
        </head>
        <style>
            body{
                margin: 0;
            }
            .box{
                width: 960px;margin: 0 auto;
            }
            .box .header{
                height: 120px;
                border: 1px solid #0000FF;
                line-height: 120px;
            }
            .box .main{
                height: 300px;
                border: 1px solid #00FF00;
                line-height: 300px;
            }
            .box .footer{
                height: 100px;
                border: 1px solid red;
                line-height: 100px;
            }
            p{
                text-align: center;
            }
        </style>
    
    <body>
        <div class="box">
            <p class="header">头部</p>
            <p class="main">主题</p>
            <p class="footer">底部</p>
        </div>
    </body>
</html>

2.双列布局

网页分为左右模块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页左右布局（双列布局）</title>
		</head>		
		<style>
			body{
				margin: 0;
			}
			.box{
				width: 80%;
				margin: 0 auto;
				overflow: hidden;
			}
			.box .left{
				width: 30%;
				height: 400px;
				background-color: #0f0;
				float: left;
			}
			.box .right{
				width: 70%;
				height: 400px;
				background-color: #0000FF;
				float: left;
			}
		</style>	
	<body>
		<div class="box">
			<p class="left">1</p>
			<p class="right">2</p>
		</div>
	</body>
</html>

3.三列布局

网页分为左中右模块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三列布局</title>
		<style>
			body{
				margin: 0;
			}
			.box{
				width: 960px;
				margin: 0 auto;
				position: relative;
			}
			.box .left{
				width: 200px;
				height: 400px;
				background-color: #FF0000;
				position: absolute;
			}
			.box .center{
				height: 400px;
				background-color: #00FF00;
				margin:0 300px 0 200px;
				position: relative;
				margin-top: 10px;
				
				
			}
			.box .right{
				width: 300px;
				height: 400px;
				background-color: #FFC0CB;
				position: absolute;
				right: 0;top: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p class="left">左</p>
			<p class="center">中</p>
			<p class="right">右</p>
		</div>
	</body>
</html>

4.混合布局（常见网页布局）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>混合布局</title>
		<style>
			body{
				margin: 0;
			}
			.box{
				width: 960px;margin: 0 auto;
			}
			.header{
				height: 120px;background-color: #ddd;
			}
			.main{
				height: 400px;background-color: #f00;
				position: relative;
			}
			.main .left{
				width: 200px;height: 400px;position: absolute;
				left: 0;top: 0;
				background-color: #ofccaa;
			}
			.main .center{
				height: 400px;margin: 0 300px 0 205px;
				background-color: #123456;
			}
			.main .right{
				width: 300px;height:400px;
				position: absolute;
				right: 0;top: -16px;
				background-color: #ff0;
			}
			.footer{
				height: 80px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="header">头部</div>
			<div class="main">
					<p class="left">嵌套内容左部分</p>
					<p class="center">嵌套内容中间</p>
					<p class="right">嵌套内容右部分</p>
			</div>	
			<div class="footer">底部</div>
		</div>
	</body>
</html>