利用CSS进行常见的网页布局（入门篇）

最新推荐文章于 2023-03-04 15:36:06 发布

影雀

最新推荐文章于 2023-03-04 15:36:06 发布

阅读量586

点赞数 2

分类专栏：前端开发文章标签： CSS样式布局

如转载请指明出处！

本文链接：https://blog.csdn.net/qq_42952437/article/details/86688680

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一种CSS布局：三行一列式

<!DOCTYPE html>
<html>
<head>
	<title>CSS三行一列布局</title>
	<style type="text/css">
     *{
     	margin: 0;
     	padding: 0;
     }
     #container{
     	margin: 0 auto;
     	width: 1000px;
     	height: 600px;
     	/*background-color: #fc9;*/
     }
     #header{
     	height: 100px;
     	background-color: #fc9;
     	margin-bottom: 5px;
     }
	 #main{
	 	height: 500px;
	 	background-color: #cf9;
	 	margin-bottom: 5px;
	 }
	 #botton{
        height: 60px;
        background-color: #ccc;
	 }
	</style>
</head>
<body>
<div id="container">
	<div id="header"></div>
	<div id="main"></div>
	<div id="botton"></div>
</div>
</body>
</html>

三行一列式网页布局：

布局样式效果图：

第二种CSS布局:三行两列布局：

<!DOCTYPE html>
<html>
<head>
	<title>css三行两列布局</title>
	<style type="text/css">
     *{margin: 0;
       padding: 0;
     }
     #container{
     	margin: 0 auto;
     	width: 1000px;
     	height: 600px;	
     }
     #header{
        height: 100px;
        background-color: #fc9;
        margin-bottom: 5px;
     }
     #main{
     	width: 1000px;
     	height: 500px;
     	margin-bottom: 5px;
     }
     #aside{
     	float: left;
     	width: 300px;
     	height: 500px;
     	background-color: #fc9;
     }
     #content{
     	float: right;
     	width: 695px;
     	height: 500px;
     	background-color: #ccc;
     }
     #botton{
     	height: 90px;
     	background-color: #ccc;
     }
	</style>
</head>
<body>
    <div id="container">
    	<div id="header"></div>
    	<div id="main">
    		<div id="aside"></div>
    		<div id="content"></div>
    	</div>
    	<div id="botton"></div>
    </div>
</body>
</html>

三行两列布局

布局图效果图如下：