1、两列布局
（1）概念
经典两列布局是指一种网页布局方式，其中一列宽度固定，另一列宽度自适应。 这种布局方式在网页设计中非常常见，因为它能够提供良好的视觉效果和用户体验。
如图所示：
页面顶部放置一个大的导航或广告条，左边是主页示意栏，右边则是具体内容或文章，下面还有点赞栏
此类网页布局的两列都有固定的宽度，而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分，即header区域、container区域和footer区域。其中，container又包含mainBox（主要内容区域）和sideBox（侧边栏）
示意图如下：
图源网络
（2）实现方法
利用我们之前学习的CSS盒子模型的浮动属性（float） ，将元素向左或向右浮动，另一个元素则自动环绕在其周围，从而实现两列布局
eg：
运行代码：
<head><style>nav ul{height:30px; /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/background-color: aquamarine;}nav ul li{margin-right: 20px;float:left;}#contact{width: 220px;height: 160px;background-color: pink;border: 2px black solid;position: fixed;left:1100px;top:500px;}article{width: 70%;height: 500px;background-color: aqua;border: 2px black solid;float: left;}aside{width: 25%;height: 500px;background-color: paleturquoise;border: 2px black solid;float: left;margin-left: 2%;}footer{width: 100%;height: 10%;background-color: blue;border: 2px black solid;}</style>
</head>
<body> <header> <h1 align="center">栗子七的网页</h1> <p align="center">欢迎观看</p> <hr> <nav> <ul type="none"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">各种风采</a></li> <li><a href="#">联系方式</a></li> </ul> </nav> </header> <hr> <main> <section> <article> <h3>文章标题</h3> <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p> <br><br><br><img src="C:\Users\栗子\Desktop\web前端开发技术\xg.png" alt="文章配图" width="200" height="200"> <p>小狗祝福大家<a href="#">点击这里有惊喜</a></p> </article> <aside> <h3>侧边栏</h3> <p>侧边栏内容，如快速链接、广告等。</p> <table border="1"> <tr> <th>爱好</th> <th>特长</th> </tr> <tr> <td>看小说</td> <td><a href="C:\Users\栗子\Desktop\web前端开发技术\html\总结小练 习.html">详情</a></td> </tr> <tr> <td>追剧</td> <td><a href="C:\Users\栗子\Desktop\web前端开发技术\html\总结小练 习.html">详情</a></td> </tr> </table> </aside> <div style="clear: both;"></div></section> <section id="contact"> <h4>联系我们</h4> <form> 姓名:<input type="text" id="name" name="name"><br> 邮箱:<input type="email" id="email" name="email"><br> <input type="submit" value="提交"> </form> </section> </main> <hr> <footer> <p>版权所有 © 栗子七</p> </footer>
</body> 仅供大家参考
2、三列布局
经典三列布局是指一种页面布局方式，其中包含三列，左右两列宽度固定，中间一列宽度自适应。 这种布局方式在许多网站的首页中广泛应用。
实例：
对于三列布局，浏览者的注意力最容易集中在中间栏的信息区域，其次才是左、右两侧的信息
三列布局示意图：
图源网络
eg:
运行代码：
<head> <style>nav ul{height:30px; background-color: #D1C5C6;}nav ul li{margin-right: 20px;float:left;}#contact{width: 220px;height: 160px;background-color: rgb(240, 209, 215);border: 2px black solid;position: fixed;left:1100px;top:500px;text-align:center}section{width:1500px;}article{width: 450px;height: 520px;background-color:pink;float: left;text-align:center}#d1{width: 600px;height: 520px;background-color:palevioletred;float: left;text-align:center}aside{width: 450px;height: 520px;background-color:pink;float:right;text-align:center}footer{width: 100%;height:30px; background-color:plum;text-align:center}</style>
</head>
<body> <header > <h1 align="center">栗子七的网页</h1> <p align="center">欢迎观看</p> <!-- <hr> --><nav> <ul type="none"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">各种风采</a></li> <li><a href="#">联系方式</a></li> </ul> </nav> </header> <main> <section> <article > <h3>文章标题</h3> <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p> <!-- <br><br><br> --></article> <nav id="d1"><img src="C:\Users\栗子\Desktop\web前端开发技术\xg.png" alt="文章配图" width="200" height="200"> <p><a href="https://gdyfvccm.edu.cn/">点击这里有惊喜</a></p> </nav><aside> <h3 >侧边栏</h3> <p >侧边栏内容，如快速链接、广告等。</p> <table border="1" id="h1"> <tr> <th>爱好</th> <th>特长</th> </tr> <tr> <td>看小说</td> <td><a href="#">详情</a></td> </tr> <tr> <td>追剧</td> <td><a href="#">详情</a></td> </tr> </table> </aside> </section> <section id="contact"> <h4>联系我们</h4> <form> 姓名:<input type="text" id="name" name="name"><br> 邮箱:<input type="email" id="email" name="email"><br> <input type="submit" value="提交"> </form> </section> <hr> <div style="clear: both;"></div>
</main> <footer> 版权所有 © 栗子七</footer>
</body> 大家可以运行感受一下
3、 多行多列布局
多行多列布局是一种网页布局方式，可以将内容分为多个列进行展示，在水平方向上进行排列。 这种布局方式允许内容在不同的列中展示，使得页面看起来更加丰富和有层次感。多行多列布局在各大电商网站和素材网站中非常常见
实例：
eg：
运行代码：
<head><style>.container{width: 50%;background-color: #97d3eb;border: 1px black solid;}.container ul{margin: 0;padding: 0;}.container ul li{list-style: none;width: 20%;height: 150px;background-color: pink;border: 2px palevioletred solid;margin-right: 2%;margin-bottom: 2%;float: left;}</style>
</head>
<body><section class="container"><ul class="clear_ele"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div style="clear: both;"></div></section>
</body>几列布局都相似的，大家可以动手试试多加几列的效果
4、百分比布局
（1）概念
上面的网页各个板块都是精准地定位，会让编写者十分头疼具体位置到底是多少，需一个个尝试才能达到我们想要的效果，为了使这种问题解决，我们可以使用百分比布局
在网页设计中，百分比布局是一种非常灵活的布局方式。它可以让网页元素根据浏览器窗口的大小自动调整尺寸，从而适应不同的屏幕尺寸和设备
（2）优势
-
响应式设计
百分比布局能够使网页在不同尺寸的屏幕上都能良好地显示，无需为每个设备单独设计布局。
可以轻松地调整元素的大小和位置，以适应不同的布局需求。
当需要修改网页布局时，只需要调整百分比值，而不需要修改每个元素的固定尺寸。
（3）语法格式
<style>
section{
width: 100%;
}
</style>
学会这个内容加上之前学习的内容，大家可以做出自己喜欢的网页了！