一、实现两列布局
许多网站有一些特点,如页面顶部放置一个大的导航或广告条,右侧是链接或图片,左侧放置主要内容,页面底部放置版权信息等
一般情况,此类网页布局的两列都有固定的宽度,而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下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>
标签:网页,color,布局,height,width,background,CSS
From: https://blog.csdn.net/2302_81659011/article/details/142962820