一、经典两列布局样式
1.概念
许多网站有一些特点，如页面顶部放置一个大的导航或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权信息等。
一般情况下，页面布局的两列都有固定宽度，而且从内容上容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分，即header区域、container区域和footer区域。其中，container 又包含 mainBox（主要内容区域）和sideBox（侧边栏），布局示意图如下 ：
2.实现原理
利用 CSS 的浮动属性float（可点击了解更多），将其中一个元素向左浮动，另一个元素向右浮，从而实现两列布局。
运行代码如下：
<style>
nav ul{
height:30px; /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
background-color: aquamarine;
}
nav ul li{
margin-right: 20px;
float:left;
}
#section1{
width: 250px;
height: 150px;
background-color: pink;
border: 2px black solid;
position: fixed;
right: 400px;
bottom: 100px;
}
section{
background-color: aqua;
border: 5px black solid;
}
article{
width: 70%;
height: 800px;
background-color: skyblue;
border: 5px black solid;
float: left;
}
aside{
width: 25%;
height: 800px;
background-color: turquoise;
border: 5px black solid;
float: left;
margin-left: 2%;
}
footer{
width: 100%;
height: 10%;
background-color:tomato;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1 align="center">经典两列布局</h1>
<p align="center">欢迎来到: <ins>EX_C 博客</ins></p>
<hr>
<nav>
<ul type="none">
<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="./演示图.jpg" alt="文章配图" width="200" height="200">
<p>想了解更多布局知识：<a href="https://blog.csdn.net/2401_84309743?type=blog">点击这里</a></p>
</article>
<aside>
<h3>侧边栏</h3>
<p>侧边栏内容，如快速链接、广告等。</p>
</aside>
</section>
<section id="section1">
<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>
<div style="clear:both;"></div>
<footer>
版权所有 © 2024 EX-C
</footer>
</body>
</html>运行结果如下：
二、经典三列布局样式
1.概念
对于三列布局，网页设计较为常见，浏览者的注意力最容易集中在中间栏的信息区域，其次才是左、右两侧的信息。
三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的方式处理，如下图所示的就可以是3个独立的列组合而成的三列布局。三列布局是基于两列布局结构演变出来的。
2.实现原理
（1）第一种方法
利用 CSS 的浮动属性float（可点击了解更多），三个元素将其中一个元素向左浮动，另一个元素向右浮，第三个元素左右两边添加外边距（可点击了解更多）使其在在中间，实现三列布局。
运行代码如下：
<style>
nav ul{
height:30px; /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
background-color: aquamarine;
}
nav ul li{
margin-right: 20px;
float:left;
}
#div1{
width: 15%;
height: 800px;
background-color: springgreen;
float: left;
}
#div2{
width: 15%;
height: 800px;
background-color: cornflowerblue;
float: right;
}
#div3{
width: 60%;
height: 800px;
background-color: aqua;
margin-left: 20%;
margin-right: 20%;
}
footer{
width: 100%;
height: 30px;
background-color: orange;
border: 2px black solid;
text-align: center;
}
</style>
<body>
<header>
<h1 align="center">经典三列布局：第一种</h1>
<p align="center">欢迎来到: <ins>EX_C 博客</ins></p>
<hr>
<nav>
<ul type="none">
<li><a href="#">首页</a></li>
<li><a href="#">关于我的</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
</header>
<section>
<div id="div1">左</div>
<div id="div2">右</div>
<div id="div3">中间</div>
</section>
<div style="clear:both;"></div>
<footer>
版权所有 © 2024 EX-C
</footer>
</body>
</html>运行结果如下：
（2）第二种方法
将三个元素分别向左浮动，通过设置合适的宽度和外边距，使它们在同一行上排列，实现三列布局。
运行代码如下：
<style>
nav ul{
height:30px; /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
background-color: aquamarine;
}
nav ul li{
margin-right: 20px;
float:left;
}
#div1{
width: 20%;
height: 800px;
background-color: turquoise;
float: left;
}
#div2{
width: 60%;
height: 800px;
background-color: steelblue;
float: left;
}
#div3{
width: 20%;
height: 800px;
background-color: springgreen;
float: left;
}
footer{
width: 100%;
height: 30px;
background-color: tomato;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1 align="center">经典三列布局：第二种</h1>
<p align="center">欢迎来到: <ins>EX_C 博客</ins></p>
<hr>
<nav>
<ul type="none">
<li><a href="#">首页</a></li>
<li><a href="#">关于我的</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
</header>
<section>
<div id="div1">左边区域</div>
<div id="div2">中间区域</div>
<div id="div3">右边区域</div>
</section>
<div style="clear:both;"></div>
<footer>
版权所有 © 2024 EX-C
</footer>
</body>
</html>运行结果如下：
三、经典多行多列样式
1.概念
多行多列布局是一种网页布局方式，可以将内容分为多个列进行展示，在水平方向上进行排列。 这种布局方式允许内容在不同的列中展示，使得页面看起来更加丰富和有层次感。多行多列布局在各大电商网站和素材网站中非常常见。
2.实现原理
将各个元素都浮起来，并适当加入外边距分隔开。
运行代码如下：
<style>
div{
width: 20%;
height: 200px;
background-color:aqua;
border: 2px black solid;
float: left;
margin-left: 2%;
margin-bottom: 2%;
}
section{
width: 50%;
height: 500px;
border: 4px black solid;
background-color:steelblue;
}
</style>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>运行结果如下：
四、百分比布局
1.概念
在网页设计中，百分比布局是一种非常灵活的布局方式。它可以让网页元素根据浏览器窗口的大小自动调整尺寸，从而适应不同的屏幕尺寸和设备。
2.优势
-
响应式设计
-
百分比布局能够使网页在不同尺寸的屏幕上都能良好地显示，无需为每个设备单独设计布局。
