精通CSS布局：探索经典的网页布局样式和技术
创作时间:
作者:
@小白创作中心
精通CSS布局：探索经典的网页布局样式和技术
引用
CSDN
1.
https://m.blog.csdn.net/2401_84309743/article/details/143171756
在网页开发中，布局是前端开发的重要组成部分。本文将介绍几种经典的CSS布局样式和技术，包括两列布局、三列布局、多行多列布局以及百分比布局。通过详细的代码示例和运行结果，帮助读者理解这些布局的实现原理和应用场景。
一、经典两列布局样式
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.优势
(1)响应式设计
百分比布局能够使网页在不同尺寸的屏幕上都能良好地显示，无需为每个设备单独设计布局。
（2） 灵活性
可以轻松地调整元素的大小和位置，以适应不同的布局需求。
（3）易于维护
当需要修改网页布局时，只需要调整百分比值，而不需要修改每个元素的固定尺寸。
热门推荐
【以案说医】李惠林：柴胡加龙骨牡蛎汤加减治疗不寐
MaxEnt模型在物种分布模拟中的应用：从原理到实践
世界咖啡三大产区的风味特色 云南与印尼咖啡豆产区特点处理法介绍
Excel打印预览虚线不对怎么调整
司机需要承担刑事责任吗？交通事故中的法律责任分析
王莽改制：理想主义政策为何在汉代受挫
JS如何在一定范围内随机生成坐标
晚上一直咳不停？常見夜咳六大原因
深度剖析抗衰技术：认识自由基的奥秘(一)
购车减免政策如何影响汽车厂商的定价策略？
旅行者腹泻：外出时的常见问题与正确应对策略
KDJ指标源码参数修改详解：从基本概念到实战应用
PCB制造中的自动化与智能化应用
“嗯嗯，好哒，可以滴……”“文字讨好症”会让你慢慢社交疲惫
公积金贷款实用指南：额度、年限和维权全攻略
热处理4把火：淬火、回火、正火、退火，别再傻傻分不清了！
热处理四大工艺：淬火、回火、正火、退火详解
高邮咸鸭蛋为何如此出名？
啄木鸟家庭维修 万师傅 猫眼等入选4月全国数字生活十大典型投诉案例
走路、慢跑、骑行、太极拳、瑜伽和游泳：六种运动方式的全面对比
利息怎么算公式是什么
如何在Excel中插入和链接图片
中科院心理所“证书”被国务院点名整改，市面上这些心理咨询证书也需警惕
办公室摆葫芦有什么寓意？办公室摆放葫芦的讲究
港大开源GraphAgent: 破解结构化与非结构化数据融合的AI智能体
小学生小组合作学习的评价体系构建
提高执行力：确定力、拘束力、公定力和执行力的统一运用
虽然小众但优势明显！推荐 3 款既省油又耐用的柴油 SUV！
保障游客安全 安徽山岳型景区这样做
个人养老金开户缴存争夺升级：定存利率高达4%