当前位置: 首页 > news >正文

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

一、实现两列布局

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

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>

 

 

 

相关文章:

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

一、实现两列布局 许多网站有一些特点&#xff0c;如页面顶部放置一个大的导航或广告条&#xff0c;右侧是链接或图片&#xff0c;左侧放置主要内容&#xff0c;页面底部放置版权信息等。 一般情况&#xff0c;此类网页布局的两列都有固定的宽度&#xff0c;而且从内容上很容易…...

计算机网络:数据链路层 —— 以太网(Ethernet)

文章目录 局域网局域网的主要特征 以太网以太网的发展100BASE-T 以太网物理层标准 吉比特以太网载波延伸物理层标准 10吉比特以太网汇聚层交换机物理层标准 40/100吉比特以太网传输媒体 局域网 局域网&#xff08;Local Area Network, LAN&#xff09;是一种计算机网络&#x…...

考研前所学c语言02(2024/10/16)

1.一个十进制的数转化为二进制的就是不断除二取余&#xff0c;得到的余数从下到上取 比如123&#xff1a; 结果为&#xff1a; 同理其他的十进制转八进制&#xff0c;十六进制就除八&#xff0c;除十六即可 再比如123转十六进制&#xff1a; 因为余数是11&#xff0c;十六进…...

R语言绘图——坐标轴及图例

掌握坐标轴与图例的设置与调整&#xff0c;对于提升数据可视化的清晰度和可读性至关重要。通过这些工具&#xff0c;可以有效地传达数据背后的故事&#xff0c;提高图表的表现力。 0x01 坐标轴 一、坐标轴的设置 1、修改坐标轴的标签 在ggplot2中&#xff0c;坐标轴是根据数…...

JDK中socket源码解析

目录 1、Java.net包 1. Socket通信相关类 2. URL和URI处理类 3. 网络地址和主机名解析类 4. 代理和认证相关类 5. 网络缓存和Cookie管理类 6. 其他网络相关工具类 2、什么是socket&#xff1f; 3、JDK中socket核心Api 4、核心源码 1、核心方法 2、本地方法 3、lin…...

Ansible自动化运维项目实战指南

Ansible自动化运维项目实战指南 在当今快速发展的IT环境中&#xff0c;运维工作的复杂性和规模性日益增加&#xff0c;传统的手动运维方式已难以满足高效、可靠、可重复性的需求。Ansible作为一款开源的自动化运维工具&#xff0c;凭借其简单易用、无需代理、基于SSH的架构特性…...

MySQL【知识改变命运】10

联合查询 0.前言1.联合查询在MySQL里面的原理2.练习一个完整的联合查询2.1.构造练习案例数据2.2 案例&#xff1a;⼀个完整的联合查询的过程2.2.1. 确定参与查询的表&#xff0c;学⽣表和班级表2.2.2. 确定连接条件&#xff0c;student表中的class_id与class表中id列的值相等2.…...

Java学习教程,从入门到精通, Java 基础语法(4)

1、Java 基础语法 一、Java 简介与开发环境搭建 Java 简介&#xff1a;Java 是一种面向对象的编程语言&#xff0c;具有跨平台、安全、稳定等特点。Java 主要应用于企业级应用、Android 应用开发、大数据处理等领域。开发环境搭建&#xff1a;搭建 Java 开发环境需要安装 JDK…...

反编译工具-Jclasslib的使用,与Java方法调用的探索

这里写目录标题 前言IDEA下查看字节码的两种方法使用idea自带的插件工具安装插件 为什么没有看出方法调用关系原因分析工厂举例 知识补充语言java可移植性 总结 前言 画时序图的时候&#xff0c;我想验证下方法的调用是否写的正确。方法调用不仅涉及到程序的基本逻辑流程&#…...

力扣 简单 876.快慢指针

文章目录 题目介绍题解 题目介绍 题解 class Solution {public ListNode middleNode(ListNode head) {ListNode slow head, fast head;while(fast ! null && fast.next ! null){slow slow.next;fast fast.next.next;}return slow;} }...

FineReport 计算同比增长

1、数据库查询 SELECTt1.年,t1.月,t1.总金额 AS 同期金额,t1.仓库名称,t2.总金额 AS 上期金额 FROMtest t1LEFT JOIN test t2 ON ( t1.年 t2.年 1 ) AND t1.月 t2.月 AND t1.仓库名称 t2.仓库名称2、配置字段 月份字段加后缀 月 数据列加后缀 计算同比增长率 if(LEN(B3)0 …...

从0开始深度学习(12)——多层感知机的逐步实现

依然以Fashion-MNIST图像分类数据集为例&#xff0c;手动实现多层感知机和激活函数的编写&#xff0c;大部分代码均在从0开始深度学习&#xff08;9&#xff09;——softmax回归的逐步实现中实现过 1 读取数据 import torch from torchvision import transforms import torchv…...

如何利用OpenCV和yolo实现人脸检测

在之前的blog里面&#xff0c;我们有介绍OpenCV和yolo的区别&#xff0c;本文就人脸检测为例&#xff0c;分别介绍下OpenCV和yolo的实现方式。 OpenCV实现人脸检测 一、安装 OpenCV 首先确保你已经安装了 OpenCV 库。可以通过以下方式安装&#xff1a; 使用包管理工具安装&…...

015集——c# 实现CAD excel交互(CAD—C#二次开发入门)

第一步&#xff1a;添加引用 程序集—>扩展 namespace WindowsFormsApp2 {public partial class Form1 : Form{public Form1(){InitializeComponent();}private void Form1_Load(object sender, EventArgs e){}private void 获取当前excel_Click(object sender, EventArgs e…...

【计网笔记】以太网

经典以太网 总线拓扑 物理层 Manchester编码 数据链路层 MAC子层 MAC帧 DIX格式与IEEE802.3格式 IEEE802.3格式兼容DIX格式 前导码&#xff08;帧开始定界符SOF&#xff09; 8字节 前7字节均为0xAA第8字节为0xAB前7字节的Manchester编码将产生稳定方波&#xff0c;用于…...

Java 入门基础篇14 - java面向对象思想以及特性

学习目标&#xff1a; 一、目标 面向对象思想类和对象对象的创建和使用属性和方法封装 开始学习&#xff1a; 二、编程思想 2.1 什么是编程思想 做人有做人的原则&#xff0c;编程也有编程的原则。这些编程的原则&#xff0c;就叫做编程思想。 2.2 面向过程和面向对象 二…...

第15篇:网络架构优化与综合案例分析

目录 引言 15.1 网络性能优化的方法与工具 15.1.1 带宽管理与流量控制 15.1.2 负载均衡 15.1.3 缓存优化 15.2 网络故障的排查与解决 15.2.1 常用的网络故障排查工具 15.2.2 网络故障排查案例 15.3 网络安全架构的综合设计案例 15.3.1 企业网络安全架构的要求 15.3.…...

UI自动化测试实战

补充&#xff1a;Selenium主要用于Web页面的自动化测试&#xff0c;它可以模拟用户的各种操作&#xff0c;如点击、输入、滚动等&#xff0c;来测试网页的功能。而Appium是一个开源的移动端自动化测试工具。 一、自动化测试实战章节 自动化测试流程测试用例编写项目自动化测试…...

东方智者颜廷利:以哲学思想促进世界和谐与无私奉献

【本社讯】在全球化的今天,东方智慧与哲学思想正逐渐成为促进世界和谐与理解的重要力量。近日,祖籍齐鲁大地山东济南的东方智者颜廷利以其深邃的哲学思想和对人类社会的深刻洞察,引起了国际社会的广泛关注。 颜廷利,一位致力于哲学研究与实践的智者,他的思想跨越古今,融合了东…...

基于 springboot vue停车场管理系统 设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...