当前位置：首页 > article >正文

DIV+CSS布局（进阶篇）

article 2025/8/21 19:32:13

学习前端必不可少的就是学习HTML语言以及CSS样式的布局，这也通常是新手入门的拦路虎，结合上次的入门篇的两种布局样式，又写了两个变化的样式。基础样式都是有DIV+CSS样式进行不断的变化出来的，熟练后可以变化出其他的想要的样式布局。

DIV+CSS布局

第一种布局样式：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: 150px;height: 500px;}#aside1{/*float: left;width: 150px;height: 500px;*/background-color: #fc9;margin-right: 5px;}#content{float: left;width: 690px;height: 500px;background-color: #ccc;}#aside2{/*float: left;width: 150px;height: 500px;*/background-color: #fc9;margin-left: 5px;}#botton{height: 90px;background-color: #ccc;}</style>
</head>
<body><div id="container"><div id="header"></div><div id="main"><div id="aside1" class="aside"></div><div id="content"></div><div id="aside2" class="aside"></div></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;}#nav{/*导航栏*/height: 30px;background-color: rgb(0,0,255);margin-bottom: 5px;}#main{/*主体*/width: 1000px;height: 500px;margin-bottom: 5px;}.aside{        /*这部使用class属性设置相同的属性，aside1,2中只需要设置不同的属性即可*/float: left;width: 150px;height: 500px;}#aside1{/*若不使用class属性同时设置相同属性可在每个id中单独设置*//*float: left;width: 150px;height: 500px;*/background-color: #fc9;margin-right: 5px;}#content{float: left;width: 690px;height: 500px;background-color: #ccc;}#aside2{/*若不使用class属性同时设置相同属性可在每个id中单独设置*//*float: left;width: 150px;height: 500px;*/background-color: #fc9;margin-left: 5px;}#botton{/*尾部*/height: 60px;background-color: #ccc;}</style>
</head>
<body><div id="container"><div id="header"></div><div id="nav"></div><div id="main"><div id="aside1" class="aside"></div><div id="content"></div><div id="aside2" class="aside"></div></div><div id="botton"></div></div>
</body>
</html>

四行三列式布局较上一个多了导航栏：

布局样式效果图如下：