首页 > 其他分享 >CSS网页布局(重塑网页布局)

CSS网页布局(重塑网页布局)

时间:2024-10-16 19:48:57浏览次数:9  
标签:网页 color 布局 height width background CSS

一、实现两列布局

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

一般情况,此类网页布局的两列都有固定的宽度,而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下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>
        版权所有 &copy; 2024 Komorebi⁼
    </footer>
</body>
</html>

标签:网页,color,布局,height,width,background,CSS
From: https://blog.csdn.net/2302_81659011/article/details/142962820

相关文章

  • css盒子的定位(绝对定位)
    如何给定位盒子    想给盒子定位,必须提供三个要素,锚点、方向和距离。而盒子的相对定位,就是以元素本身的位置作为锚点。盒子定位的属性名和属性值        position:absolute;绝对定位的锚点        absolute是绝对定位元素,其锚点是父辈属性,即......
  • 如何修改网站后台字体?公司网站修改网页内容?
    要进行网站栏目模板修改或公司地址修改,通常涉及前端HTML/CSS以及可能的后端逻辑调整。下面分别介绍这两种情况的处理方法:网站栏目模板修改定位模板文件找到存放网站栏目的模板文件,这通常位于网站的前端目录下,如templates文件夹内。备份原有文件修改前,请先备份原有的模......
  • 前端新手教程:HTML、CSS 和 JavaScript 全面详解及实用案例
    一、引言在当今数字化的时代,前端开发扮演着至关重要的角色,它决定了用户与网页和应用程序交互的体验。HTML、CSS和JavaScript作为前端开发的核心技术,分别负责网页的结构、样式和交互。本教程将为前端新手全面深入地介绍HTML、CSS和JavaScript的知识点,并通过实用案例帮助......
  • 【优化布局】蚁群算法ACO求解场地级设施布局优化问题【含Matlab源码 7551期】
    ......
  • 使用博查Web Search API获取搜索引擎的网页链接和文本摘要,给AI/RAG应用增加联网搜索功
    为什么需要WebSearchAPI?各类AINative应用、RAG应用、AIAgent智能体在开发过程都会遇到联网获取互联网网页信息的需求,此时需要得到原始网页链接以及文本摘要,以用于给pipeline中的大模型作为上下文总结使用。但目前仅国外的搜索引擎例如Bing、Google提供此类WebSearch......
  • 第六章 元素应用CSS
    6.1使用CSS设置字体样式6.1.1.字体类型CSS提供font-family属性来控制文本的字体类型。格式如下:font-family:字体名称;参数:字体名称按优先顺序排列,以逗号隔开。如果字体名称包含空格,则应用引号括起。说明:用font-family属性可控制显示字体。不同的操作系统,其字体名是......
  • 公司网站网页修改?网站模板主页修改?
    网站网页修改确定修改需求:明确需要修改的内容,如文本、图片等。备份现有文件:在修改前备份当前网页文件,以防万一。编辑HTML/CSS:打开需要修改的HTML文件。根据需求修改文本、图片路径等。测试修改效果:在本地或测试服务器上预览修改后的网页,确保一切正常。上线发布:将修改后......
  • Crawl4AI:用几行代码打造强大的网页爬虫
    Crawl4AI:用几行代码打造强大的网页爬虫在人工智能和大数据时代,数据的获取和处理变得尤为重要。尤其是在大型语言模型(LLM)的研究和应用中,如何高效地抓取和整理网络数据成为了一个关键的挑战。为了解决这一问题,一个名为Crawl4AI的开源网页爬虫工具应运而生,它专为LLM优化,提供了......
  • 深入解析CSS中的!important规则
    深入解析CSS中的!important规则一、引言在CSS的世界里,样式的优先级通常由选择器的特异性、在样式表中的位置(后来的规则覆盖先前的规则)以及继承等因素决定。然而,!important规则就像一把双刃剑,它可以打破这些规则,赋予某些样式声明更高的优先级。本文将深入探讨!important的......
  • CSS伪元素详解
    CSS伪元素详解一、引言在CSS中,伪元素是一个非常强大的工具,它允许我们为元素的特定部分添加样式,而无需修改HTML结构。这不仅提高了样式的灵活性,还有助于保持代码的整洁和可维护性。本文将深入探讨CSS伪元素的使用方法和一些实用技巧。二、伪元素的基本概念1、伪元素的定......