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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/57079.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习java第九天 简单小项目

今天简单写了小项目 import java.math.*; import java.util.*; public class Project_array{// data 拿到外面 封装的方法 共享同一个变量// static 静态上下文只能直接访问静态的变量// 一旦加上static 代表当前的变量全局共享一份static Record[] data {new Record("…

C/C++面试八股

引用&#xff1a; C面经(简洁版)-CSDN博客 正文&#xff1a; 1. const 和 volatile 的区别&#xff1f; 2. const 和 volatile 可以共用么&#xff1f;

零基础Java第八期:一维数组(1)

目录 一、 一维数组的基本概念 1.1. 什么是数组 1.2. 数组的创建及初始化 1.3. 数组的使用 二、数组是引用类型 2.1. 初始JVM的内存分布 2.2. 基本类型变量与引用类型变量 2.3. 引用变量的理解 2.4. null 三、数组的应用场景 3.1. 作为函数的参数 3.2. 作为函数的返…

你可能需要的多文档页面交互方案

前言 欢迎关注同名公众号《熊的猫》&#xff0c;文章会同步更新&#xff01; 在日常工作中&#xff0c;面对不同的需求场景&#xff0c;你可能会遇到需要进行多文档页面间交互的实现&#xff0c;例如在 A 页面跳转到 B 页面进行某些操作后&#xff0c;A 页面需要针对该操作做出…

YoloV10改进策略:主干网络改进|DeBiFormer,可变形双级路由注意力|全网首发

摘要 在目标检测领域,YoloV10以其高效和准确的性能而闻名。然而,为了进一步提升其检测能力,我们引入了DeBiFormer作为YoloV10的主干网络。这个主干网络的计算量比较大,不过,上篇双级路由注意力的论文受到很大的关注,所以我也将这篇论文中的主干网络用来改进YoloV10,卡多…

成本决定未来——AIGC 下半场,高成本阻碍发展,我们该怎么办?

你好&#xff0c;我是三桥君 你最近有没有觉得工作中用到的那些 AI 工具好像越来越便宜了呢&#xff1f;这可不是偶然哦。 今天&#xff0c;三桥君就来聊聊为啥 AIGC 的下半场成本这么重要&#xff1f; 你想想看&#xff0c;咱平时工作已经够累了&#xff0c;要是再加上用那些贵…

商​汤​二​面

1. 请尽可能详细地说明&#xff0c;根据React Router的思想&#xff0c;如何使用History API实现History Router的PWA&#xff1f;请详细说明如何监听url的改变。 React Router 是一个用于在 React 应用中实现导航和路由的库。它允许你根据 URL 的变化来渲染不同的组件。结合 …

python编译问题 当你编译第一个python程序时可能出现如下错误

python编译问题 当你编译第一个python程序时可能出现如下错误 若出现如下错误&#xff1a; E:\p\venv\Scripts\python.exe E:/p/venv/d.py File “E:/p/venv/d.py”, line 5SyntaxError: Non-ASCII character ‘\xe7’ in file E:/p/venv/d.py on line 5, but no encoding d…

代码随想录算法训练营第十一天|383. 赎金信, 15. 三数之和

文档讲解&#xff1a;代码随想录 难度&#xff1a;easy 383. 赎金信 力扣题目链接(opens new window) 给定一个赎金信 (ransom) 字符串和一个杂志(magazine)字符串&#xff0c;判断第一个字符串 ransom 能不能由第二个字符串 magazines 里面的字符构成。如果可以构成&#xf…

算法Day-2

27. 移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素。元素的顺序可能发生改变。然后返回 nums 中与 val 不同的元素的数量。 假设 nums 中不等于 val 的元素数量为 k&#xff0c;要通过此题&#xff0c;您需要执行以下操作&am…

Adobe Illustrator如何在图片快速插入latex公式

Adobe Illustrator没法直接输入latex公式&#xff0c;也没有公式的字体 解决&#xff1a; 1.装插件&#xff1a;latex2ai&#xff08;我装不上&#xff09; 2.latex公式编辑网站&#xff08;图片识别公式多了要收费&#xff09;或者其他latex公式网站&#xff0c;公式打完保…

zotero下载、安装、翻译和显示无法安装插件“%S”的解决办法

文章目录 zotero下载和安装和翻译还有插件英文翻译软件遇到的问题 zotero下载和安装和翻译还有插件 Zotero从入门到精通第一期–如何省心省力翻译科研文献&#xff0c;这里面主要是使用小牛翻译的过程&#xff0c;输入产品密匙需要加入个人的账号密码进行sign in 英文翻译软件…

23种设计模式具体实现方法

提示&#xff1a;文章 文章目录 前言一、背景二、设计模式1、代理模式2、适配器模式2.1 总结 三、3.1 总结 前言 前期疑问&#xff1a; 本文目标&#xff1a; 一、背景 最近 二、设计模式 1、代理模式 参考的这篇文章&#xff0c;代理模式(Proxy) 同时这篇文章还引用了另…

动态规划17:123. 买卖股票的最佳时机 III

动态规划解题步骤&#xff1a; 1.确定状态表示&#xff1a;dp[i]是什么 2.确定状态转移方程&#xff1a;dp[i]等于什么 3.初始化&#xff1a;确保状态转移方程不越界 4.确定填表顺序&#xff1a;根据状态转移方程即可确定填表顺序 5.确定返回值 题目链接&#xff1a;123.…

递归神经网络(RNN)简介

递归神经网络简介 在本文中,我们将介绍神经网络的一种新的变体,即递归神经网络,也称为 (RNN),当数据是连续的时,如时间序列数据和文本数据,它比简单的神经网络效果更好。 什么是递归神经网络 (RNN)? 循环神经网络 (RNN) 是一种神经网络,其中上一步的输出作为当前…

Quarto ppt模板制作与Rstudio git连接

本篇记录下当前ppt演示中比较流行的quarto document使用情况以及Rstudio与git相连接的一些实操。 1 Quarto ppt模板制作 1.1 Quarto简介&#xff08;来自Kimi&#xff09; Quarto 是一个由 RStudio 的母公司 Posit 团队开发的开源科学和技术出版系统&#xff0c;它建立在 Pan…

计算机网络——传输层服务

传输层会给段加上目标ip和目标端口号 应用层去识别报文的开始和结束

.NET 6新特性 | System.Text.Json功能改进

在.NET 6.0中&#xff0c;JSON处理库得到了显著的改进&#xff0c;主要体现在System.Text.Json上。以下是对.NET 6.0中改进的JSON处理库的详细分析&#xff1a; 一、System.Text.Json的引入与优势 在.NET 6中&#xff0c;Microsoft引入了新的JSON库System.Text.Json作为官方推…

安全基线加固

安全基线加固 定义&#xff1a;为了实现基本防护需求而制定的一系列基准&#xff1b; Windows && Linux 安全基线加固 操作系统具体操作 Windows 账户认证 基本要求对应操作对登录操作系统的用户进行身份标识和鉴别 操作内容&#xff1a;检测开机登录时是否需要密码…

二叉树算法之字典树(Trie)详细解读

字典树&#xff08;Trie&#xff0c;也称前缀树或单词查找树&#xff09;是一种用于快速查找字符串的数据结构&#xff0c;主要应用于字符串集合的高效存储和查找。字典树特别适合处理具有相同前缀的大量字符串集合&#xff0c;比如单词自动补全、拼写检查等场景。 1. 字典树的…