一、实现两列布局
许多网站有一些特点，如页面顶部放置一个大的导航或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权信息等
一般情况，此类网页布局的两列都有固定的宽度，而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分，即header区域、container区域和footer区域。其中，container又包含mainBox（主要内容区域）和sideBox（侧边栏），布局示意图如下
1. 原理
利用 CSS 的浮动属性float，将一个元素向左或向右浮动，另一个元素则自动环绕在其周围，从而实现两列布局。
2. 示例代码
<head>
#div1{
width: 1600px;
height: 800px;
background-color:#8caede;
border: 3px solid #000;
float: left;
}
#div2{
width: 250px;
height: 800px;
background-color:#bce6d8;
border: 3px solid #000;
float:right;
}
section{
width: 1900px;
}
footer{
width: 1900px;
height: 100px;
background-color:#decece;
border: 5px solid #000;
}
</style>
</head>
<body>
<section>
<div id="div1">主要区域</div>
<div id="div2">侧边栏</div>
<div style="clear: both;"></div>
</section>
<footer>网页页脚</footer>
</body>
</html>运行结果如下：
二、 实现三列布局
对于三列布局，浏览者的注意力最容易集中在中间栏的信息区域，其次才是左、右两侧的信息。
三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的方式处理，如下图所示的就可以是三个独立的列组合而成的三列布局。三列布局仅比两列布局多了一列内容，无论形式上怎么变化，最终还是基于两列布局结构演变出来。几列布局都是与此相似，大家可以试试多加几列。
1. 原理
将三个元素分别向左浮动，通过设置合适的宽度和外边距，使它们在同一行上排列，实现三列布局。
2. 示例代码
<head>
<style>
section{
width: 1900px;
}
#div1{
width: 825px;
height: 800px;
background-color:pink;
border: 3px solid #000;
float: left;
text-align: center;
}
#div3{
width: 807px;
height: 800px;
background-color: aqua;
border: 3px solid #000;
float:right;
text-align: center;
}
#div2{
width: 250px;
height: 800px;
background-color: aquamarine;
border: 3px solid #000;
float:right;
text-align: center;
}
footer{
width: 1900px;
height: 100px;
background-color:yellow;
border: 5px solid #000;
text-align: center;
}
</style>
</head>
<body>
<section>
<div id="div1">主要区域</div>
<div id="div2">中间区域</div>
<div id="div3">侧边栏</div>
<div style="clear: both;"></div>
</section>
<footer>网页页脚</footer>
</body>
</html>运行结果如下：
在写上面的布局时我们会发现，设置盒子的宽度很难使其与旁边的盒子无缝隙连接，此时我们可以使用百分比布局
三、百分比布局
在网页设计中，百分比布局是一种非常灵活的布局方式。它可以让网页元素根据浏览器窗口的大小自动调整尺寸，从而适应不同的屏幕尺寸和设备。在这篇博客中，我们将深入探讨 CSS 中的百分比布局。
1、百分比布局的优势
（1） 响应式设计
百分比布局能够使网页在不同尺寸的屏幕上都能良好地显示，无需为每个设备单独设计布局。
（2） 灵活性
可以轻松地调整元素的大小和位置，以适应不同的布局需求。
（3）易于维护
当需要修改网页布局时，只需要调整百分比值，而不需要修改每个元素的固定尺寸。
使用上次的博客—网页布局中的网页，设置下面的网页
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客网页</title>
<style>
nav ul{
height:30px; /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
background-color: aquamarine;
}
nav ul li{
margin-right: 20px;
float:left;
}
section{
width: 100%;
}
article{
width: 70%;
height: 800px;
background-color:#e6b5b1;
float: left;
text-align: left;
font-size: larger;
}
aside{
width: 30%;
height: 800px;
background-color: #a3c6d8;
float:right;
text-align: left;
font-size: 25px;
}
footer{
width: 100%;
height: 100px;
background-color:#ffec8e;
text-align: center;
font-size: large;
}
</style>
</head>
<body>
<header>
<h1>欢迎观看我的博客</h1>
</header>
<nav>
<ul>
<a href="#">首页</a></li>
<a href="#">上一篇</a></li>
<a href="#">下一篇</a></li>
</ul>
</nav>
<section>
<article>
<h3>下面讲述HTNL5中的主要文档结构元素</h3>
<h4>意义</h4>
<p>header元素<br>
nav元素<br>
section元素</p>
<p>想了解更多博客：<a href="https://blog.csdn.net/2302_81659011?type=blog">点击这里</a></p>
</article>
<aside>
<h3>侧边栏</h3>
<p>侧边栏内容，如快速连接、广告等。</p>
</aside>
</section>
<div style="clear: both;"></div>
<footer>
版权所有 © 2024 Komorebi⁼
</footer>
</body>
</html>