您的位置:首页 > 健康 > 养生 > 网络服务推广_在线制作效果图_江苏网站建设制作_soso搜搜

网络服务推广_在线制作效果图_江苏网站建设制作_soso搜搜

2024/10/31 13:14:47 来源:https://blog.csdn.net/2302_81659011/article/details/142962820  浏览:    关键词:网络服务推广_在线制作效果图_江苏网站建设制作_soso搜搜
网络服务推广_在线制作效果图_江苏网站建设制作_soso搜搜

一、实现两列布局

许多网站有一些特点,如页面顶部放置一个大的导航或广告条,右侧是链接或图片,左侧放置主要内容,页面底部放置版权信息等。

7d1708d0507c459eab1ec30af346873f.png

一般情况,此类网页布局的两列都有固定的宽度,而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分,即header区域、container区域和footer区域。其中,container又包含mainBox(主要内容区域)和sideBox(侧边栏),布局示意图如下 

b9f2a49753a843a1aee6b68127cac685.png

    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>

运行结果如下:

54b92d6108204f9cabb7352769c3e110.png

二、 实现三列布局

对于三列布局,浏览者的注意力最容易集中在中间栏的信息区域,其次才是左、右两侧的信息。

7905b52577ca4f8a9e3fd2bf86eb3373.jpeg

三列布局与两列布局非常相似,在处理方式上可以利用两列布局结构的方式处理,如下图所示的就可以是三个独立的列组合而成的三列布局。三列布局仅比两列布局多了一列内容,无论形式上怎么变化,最终还是基于两列布局结构演变出来。几列布局都是与此相似,大家可以试试多加几列。

3c00ccbb59bf4defb6623138924cfc34.png

    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>

运行结果如下:

0f96e0c2ad10437a9882f0619d43113b.png

 

 在写上面的布局时我们会发现,设置盒子的宽度很难使其与旁边的盒子无缝隙连接,此时我们可以使用百分比布局

三、百分比布局

在网页设计中,百分比布局是一种非常灵活的布局方式。它可以让网页元素根据浏览器窗口的大小自动调整尺寸,从而适应不同的屏幕尺寸和设备。在这篇博客中,我们将深入探讨 CSS 中的百分比布局。

1、百分比布局的优势

(1) 响应式设计

百分比布局能够使网页在不同尺寸的屏幕上都能良好地显示,无需为每个设备单独设计布局。

(2) 灵活性

可以轻松地调整元素的大小和位置,以适应不同的布局需求。

(3)易于维护

当需要修改网页布局时,只需要调整百分比值,而不需要修改每个元素的固定尺寸。

使用上次的博客—网页布局中的网页,设置下面的网页

a082fd66881c4d48a63f977800466e83.png

代码如下:

<!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>版权所有 &copy; 2024 Komorebi⁼</footer>
</body>
</html>

 

 

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com