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

CSS经典布局之圣杯布局和双飞翼布局

news 来源：原创 2025/7/12 19:08:00

目标：

中间自适应，两边定宽，并且三栏布局在一行展示。

圣杯布局

实现方法：

通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置；

给外部容器添加padding，通过相对定位调整左右两列的位置。

<div id="header">#header</div><div id="container"><div id="center" class="column">#center</div><div id="left" class="column">#left</div><div id="right" class="column">#right</div></div>
<div id="footer">#footer</div>

#header, #footer {background: rgba(29, 27, 27, 0.726);text-align: center;height: 60px;line-height: 60px;clear: both;
}
#container{padding: 0 200px;overflow: hidden;/*形成BFC撑开文档*/
}
.column{height: 200px;float: left;position: relative;
}
#center{width: 100%;background-color: tomato;
}
#left{width: 200px;margin-left: -100%; /* 把left移动到和center同一行并且左边对齐 */left: -200px; /* 再向左移动到main的padding区域,就不会挡住center了 */background-color: aqua;
}
#right{width: 200px;margin-left: -200px; /* 把right移动到和center同一行并且右边对齐 */right: -200px; /* 向右移动到右边的padding区域*/background-color: wheat;
}

圣杯布局效果

双飞翼布局

实现方法：

通过float+margin，不使用相对定位；

在中间层外面套一层div，加上margin将 center内容挤到中间

<div id="header">#header</div><div id="container"><div id="center" class="column"><div id="center-content">#center</div></div><div id="left" class="column">#left</div><div id="right" class="column">#right</div>
</div><div id="footer">#footer</div>

#header, #footer {background: rgba(29, 27, 27, 0.726);text-align: center;height: 60px;line-height: 60px;clear: both;
}
.column{height: 200px;float: left;
}
#center{width: 100%;background-color: tomato;
}
#center-content{margin: 0 200px;
}
#left{width: 200px;margin-left: -100%; /* 作用和圣杯一样 */background-color: aqua;}
#right {width: 200px;margin-left: -200px; /* 作用和圣杯一样 */background-color: wheat;
}

双飞翼布局

两者本质区别

CSS经典布局之圣杯布局和双飞翼布局

目标： 中间自适应，两边定宽，并且三栏布局在一行展示。圣杯布局实现方法： 通过float搭建布局margin使三列布局到一行上relative相对定位调整位置； 给外部容器添加padding，通过相对定位调整左右两列的…...

编程日记 2025/7/12 19:08:00

超声波传感器模块

欢迎来到破晓的历程的博客 ⛺️不负时光，不负己✈️ 文章目录 1.HC-SR04介绍2.HC-SR04原理介绍2.1原理概述3.2原理详解 4驱动代码编写4.1写前思考4.2硬件连线 5.总结hcsr04.hhcsr04.c 1.HC-SR04介绍超声波传感器有很多种类的型号：HC-SR04、UC-025、…...

编程日记 2025/7/12 18:57:06

使用scp命令拷贝hadoop100中文件到其他虚拟机中

以下是使用 scp 命令将 hadoop100 主机中的文件拷贝到其他虚拟机的操作步骤（假设其他主机名为 hadoop101 、 hadoop102 ，系统为 Linux）： 1. 基本语法 bash scp [选项] 源文件路径目标主机用户名目标主机IP:目标路径 - 选…...

编程日记 2025/6/28 23:04:09

Linux基础 -- 用户态Generic Netlink库高性能接收与回调框架

用户态Generic Netlink库高性能接收与回调框架一、概述在 Linux 系统中，Netlink 是用户态与内核态通信的强大机制。libnl 是一个专为简化 Netlink 编程而设计的库，提供了接收和处理 Netlink 消息的高级接口。libnl-genl 是其通用 Netlink (Generic N…...

编程日记 2025/6/29 0:57:03

java中的Optional

在 Java 8 中，Optional 是一个用于处理可能为 null 的值的容器类，旨在减少空指针异常（NullPointerException）并提升代码的可读性。以下是 Optional 的核心用法和最佳实践： 1. 创建 Optional 对象 1.1 常规创建方式 Op…...

编程日记 2025/6/29 0:27:11

原型和原型链

原型（Prototype） 和原型链（Prototype Chain） 是 JavaScript 中非常重要的概念，它们是 JavaScript 实现继承和共享属性和方法的核心机制。理解原型和原型链可以帮助你更好地掌握 JavaScript 的面向对象编程&#xff08…...

编程日记 2025/6/28 23:12:04

解锁Python TDD：从理论到实战的高效编程之道（9/10）

引言在 Python 开发的广袤天地中，确保代码质量与稳定性是每位开发者的核心追求。测试驱动开发（TDD，Test-Driven Development）作为一种强大的开发理念与实践方法，正逐渐成为 Python 开发者不可或缺的工具。TDD 强调在…...

编程日记 2025/6/29 1:26:56

OpenMCU(七)：STM32F103开发环境搭建

概述本文主要讲述了使用Keil软件搭建STM32F103嵌入式开发环境的步骤，主要面向想从事嵌入式行业的入门同学，如果下面的讲述过程中有不对的地方，欢迎大家给我留言。本文主要讲述了Keil 5.43的安装教程，主要用于学习交流&#xf…...

编程日记 2025/6/29 1:10:45

六、Hive 分桶

作者：IvanCodes 日期：2025年5月13日专栏：Hive教程在 Hive 中，除了常见的分区（Partitioning），分桶（Bucketing）是另一种重要且有效的数据组织和性能优化手段。它允许我们…...

编程日记 2025/6/28 23:04:05

INFINI Console 纳管 Elasticsearch 9（一）：指标监控、数据管理、DSL 语句执行

Elasticsearch v9.0 版本最近已发布，而 INFINI Console 作为一款开源的非常轻量级的多集群、跨版本的搜索基础设施统一管控平台，是否支持最新的 Elasticsearch v9.0 集群管理呢？本文以 INFINI Console v1.29.2 为例，从指标监控、数…...

编程日记 2025/6/29 0:57:04

ansible进阶版01

ansible进阶版01 欢迎使用Markdown编辑器最佳实践保持简单保持井然有序（有组织的）经常测试 git工作原理 chapter 2编写ymal格式的主机清单欢迎使用Markdown编辑器最佳实践保持简单使用yaml的原生语法使用自带模块尽量使用专用模块，不…...

编程日记 2025/6/29 1:10:16

python文件打包成exe文件

✅ 一、安装 PyInstaller 打开cmd，输入以下代码 pip install pyinstaller✅ 二、打包指令比如说你有如下的文件需要打包。首先复制你的文件所在目录，比如我的是C:\Users\Administrator\Desktop\BearingSearchSystem 在cmd中切换到该目录来&#xf…...

编程日记 2025/6/28 23:51:28

人脸识别系统中的隐私与数据权利保障

首席数据官高鹏律师创作如今人脸识别技术以其高效、便捷的特性广泛应用于各个领域，从安防监控到移动支付，从门禁系统到社交媒体。然而，这项技术在为我们的生活带来诸多便利的同时，也引发了一系列关于隐私与数据权利的深刻担忧。…...

编程日记 2025/6/29 0:36:32

电脑关机再开机会换IP吗？深入解析分配机制

在日常使用电脑时，许多用户可能会好奇：‌关机后再开机，IP地址会不会变化？‌ 这个问题看似简单，但实际上涉及多个因素。本文将详细解析电脑IP地址的变化机制，帮助大家理解其中的原理，并提供相关的…...

编程日记 2025/6/29 0:36:34

经典中的经典-比特币白皮书中文版

AI是一切假的集合，如果任凭AI如此聪明下去，所有的人都将被AI愚弄与股掌之间，那么能限制AI的只有区块链这个让一切数据都无处遁形的真神，而比特币作为区块链的鼻祖，开创了公开账本的先河，当互联网上所有的信…...

编程日记 2025/6/29 0:39:40

Spring事务失效的全面剖析

文章目录 1. Spring事务基础1.1 什么是Spring事务1.2 Spring事务的实现原理1.3 `@Transactional`注解的主要属性1.4 使用Spring事务的简单示例2. Spring事务失效的常见场景及解决方案2.1 方法不是public的问题描述问题示例解决方案技术原理解释2.2 自调用问题（同一个类中的方法…...

编程日记 2025/6/29 8:36:15

本地的ip实现https访问-OpenSSL安装+ssl正式的生成(Windows 系统)

1.下载OpenSSL软件网站地址：Win32/Win64 OpenSSL Installer for Windows - Shining Light Productions 安装: 一直点击下一步就可以了 2.设置环境变量在开始菜单右键「此电脑」→「属性」→「高级系统设置」→「环境变量」在Path 中添加一个: xxxx\OpenSSL-…...

编程日记 2025/6/29 0:01:32

【go】binary包，大小端理解，read，write使用，自实现TCP封包拆包案例

binary.LittleEndian 是 Go 语言 encoding/binary 包中的一个常量，用于指定字节序（Byte Order）。字节序是指多字节数据在内存中存储的顺序，有两种主要方式： 小端序（Little Endian）：…...

编程日记 2025/7/12 18:54:21

[万字]qqbot开发记录，部署真寻bot+自编插件

这是我成功部署真寻bot以及实现一个自己编写的插件（连接deepseek回复内容）的详细记录，几乎每一步都有截图。正文： 我想玩玩qqbot。为了避免重复造轮子，首先选一个github的高星项目作为基础吧。看了一眼感觉真寻bot不…...

编程日记 2025/6/28 23:17:38

国内USB IP商业解决方案新选择：硬件USB Server

在数字化办公日益普及的今天，USB OVER NETWORK技术，即USB IP技术，为企业带来了前所未有的便捷与高效。作为这一领域的佼佼者，朝天椒USB Server以其卓越的性能和贴心的设计，正逐步成为众多中国企业的首选USB IP商业解决…...

编程日记 2025/6/28 23:30:17

百度导航广告“焊死”东鹏特饮：商业底线失守，用户安全成隐忧

近日，百度地图因导航时植入“广告”的问题登上社交媒体热搜，并引发广泛争议。截图自微博导航途中出现“焊死”在路面的广告安全隐患引争议多位网友发帖称，在使用百度地图导航时，导航界面中的公路路面上出现了“累了困了喝东…...

编程日记 2025/6/28 23:56:32

yolo11n-obb训练rknn模型

必备： 准备一台ubuntu22的服务器或者虚拟机（x86_64） 1、数据集标注： 1）推荐使用X-AnyLabeling标注工具 2）标注选【旋转框】 3）可选AI标注，再手动补充，提高标注速度 …...

编程日记 2025/6/29 0:09:24

GNU Screen 曝多漏洞：本地提权与终端劫持风险浮现

SUSE安全团队全面审计发现，广泛使用的终端复用工具GNU Screen存在一系列严重漏洞，包括可导致本地提权至root权限的缺陷。这些问题同时影响最新的Screen 5.0.0版本和更普遍部署的Screen 4.9.x版本，具体影响范围取决于发行版配置。尽管GNU Sc…...

编程日记 2025/6/29 0:11:19

无人机避障——如何利用MinumSnap进行对速度、加速度进行优化的轨迹生成（附C++python代码）

🔥轨迹规划领域的 “YYDS”——minimum snap！作为基于优化的二次规划经典，它是无人机、自动驾驶轨迹规划论文必引的 “开山之作”。从优化目标函数到变量曲线表达，各路大神疯狂 “魔改”，衍生出无数创新方案。 &#…...

编程日记 2025/6/29 0:21:07

2025 3D工业相机选型及推荐

3D工业相机是专门为工业应用设计的三维视觉采集设备，能够获取物体的三维空间信息，在智能制造、质量检测、机器人引导等领域有广泛应用。一、主要类型 1.结构光3D相机通过投射特定光斑或条纹图案并分析变形来重建三维形状典型代表：双目结构…...

编程日记 2025/6/29 0:23:14

芋道(yudao-cloud)项目，后端接口报401-账号未登录解决方案

一、需求最近公司有新的业务需求，调研了一下，决定使用芋道（yudao-cloud）框架,于是从github（https://github.com/YunaiV/yudao-cloud）上克隆项目，选用的是jdk17版本的。根据项目启动手册&#…...

编程日记 2025/6/28 23:09:38

动态域名服务ddns怎么设置？如何使用路由器动态域名解析让外网访问内网？

设置路由器的动态域名解析（DDNS），通常需先选择支持 DDNS 的路由器和提供 DDNS 服务的平台，然后在路由器管理界面中找到 DDNS 相关设置选项，填入在服务平台注册的账号信息，完成配置后保存设置并等待生效。 …...

编程日记 2025/6/29 1:14:02

论文《Collaboration-Aware Graph Convolutional Network for Recommender Systems》阅读

论文《Collaboration-Aware Graph Convolutional Network for Recommender Systems》阅读论文概况Introduction and MotivationMethodologyLightGCN 传播形式CIRCAGCNImplementation Experiments 论文概况论文《Collaboration-Aware Graph Convolutional Network for Recomm…...

编程日记 2025/6/28 23:04:03

Codis集群搭建和集成使用的详细步骤示例

以下是Codis集群搭建和集成使用的详细步骤示例： 环境准备安装Go语言环境下载并安装适配操作系统的Go语言版本。配置环境变量GOROOT和GOPATH。安装ZooKeeper 下载ZooKeeper压缩包，解压并进入目录。复制conf/zoo_sample.cfg为conf/zoo.cfg。启动ZooKe…...

编程日记 2025/6/28 23:30:40

利用比较预言机处理模糊的偏好数据

论文标题 ComPO:Preference Alignment via Comparison Oracles 论文地址 https://arxiv.org/pdf/2505.05465 模型地址 https://huggingface.co/ComparisonPO 作者背景哥伦比亚大学，纽约大学，达摩院动机 DPO算法直接利用标注好的数据来做偏好对…...

编程日记 2025/6/29 0:43:35

《数据库原理》部分习题解析

《数据库原理》部分习题解析 1. 课本pg196.第1题。 （1）函数依赖若对关系模式 R(U) 的任何可能的关系 r，对于任意两个元组 t₁ 和 t₂，若 t₁[X] t₂[X]，则必须有 t₁[Y] t₂[Y]，则称属性集 Y 函数依赖…...

编程日记 2025/6/29 0:52:43

【HCIA】浮动路由

前言我们通常会在出口路由器配置静态路由去规定流量进入互联网默认应该去往哪里。那么，如果有两个运营商的路由器都能为我们提供上网服务，我们应该如何配置默认路由呢？浮动路由又是怎么一回事呢？ 文章目录前言1. 网络拓扑图2. …...

编程日记 2025/6/29 0:21:14

基于机器学习的卫星钟差预测方法研究HPSO-BP

摘要本文研究了三种机器学习方法（BP神经网络、随机森林和支持向量机）在卫星钟差预测中的应用。通过处理GPS和GRACE卫星的钟差数据，构建了时间序列预测模型，并比较了不同方法的预测性能。实验结果表明，优化后的BP神经…...

编程日记 2025/6/28 23:42:02

机器学习中分类模型的常用评价指标

评价指标是针对模型性能优劣的一个定量指标。一种评价指标只能反映模型一部分性能，如果选择的评价指标不合理，那么可能会得出错误的结论，故而应该针对具体的数据、模型选取不同的的评价指标。本文将详细介绍机器学习分类任务的常用评价指…...

编程日记 2025/6/29 0:58:48

AI 检测原创论文：技术迷思与教育本质的悖论思考

当高校将 AI 写作检测工具作为学术诚信的 "电子判官"，一场由技术理性引发的教育异化正在悄然上演。GPT-4 检测工具将人类创作的论文误判为 AI 生成的概率高达 23%（斯坦福大学 2024 年研究数据），这种 "以 AI 制 AI&…...

编程日记 2025/6/28 23:06:18

langchain学习

无门槛免费申请OpenAI ChatGPT API搭建自己的ChatGPT聊天工具 https://nuowa.net/872 基本概念 LangChain 能解决大模型的两个痛点，包括模型接口复杂、输入长度受限离不开自己精心设计的模块。根据LangChain 的最新文档，目前在 LangChain 中一共有六大…...

编程日记 2025/6/28 23:42:08

蓝桥杯 10. 全球变暖

全球变暖原题目链接题目描述你有一张某海域 N x N 像素的照片： . 表示海洋# 表示陆地例如如下所示： ....... .##.... .##.... ....##. ..####. ...###. .......在照片中，“上下左右”四个方向上连在一起的一片陆地组成一座岛屿。例…...

编程日记 2025/6/28 23:04:12

OpenTiny icons——超轻量的CSS图标库，引领图标库新风向

我们非常高兴地宣布 opentiny/icons 正式发布啦！ 源码：https://github.com/opentiny/icons（欢迎 Star ⭐） 官网：https://opentiny.github.io/icons/ 图标预览：https://opentiny.github.io/icons/brow…...

编程日记 2025/6/29 0:52:27

python使用OpenCV 库将视频拆解为帧并保存为图片

python使用OpenCV 库将视频拆解为帧并保存为图片 import cv2 import osdef video_to_frames(video_path, output_folder, frame_prefixframe_, interval1, target_sizeNone, grayscaleFalse):"""将视频拆分为帧并保存为图片参数:video_path (str): 视频文件路径…...

编程日记 2025/6/29 0:10:54

[论文阅读]ControlNET: A Firewall for RAG-based LLM System

ControlNET: A Firewall for RAG-based LLM System [2504.09593] ControlNET: A Firewall for RAG-based LLM System RAG存在数据泄露风险和数据投毒风险。相关研究探索了提示注入和投毒攻击，但是在控制出入查询流以减轻威胁方面存在不足文章提出一种ai防火墙CO…...

编程日记 2025/6/28 23:04:06

机器学习 --- 数据集

机器学习 — 数据集文章目录机器学习 --- 数据集一，sklearn数据集介绍二，sklearn现实世界数据集介绍三，sklearn加载数据集3.1 加载鸢尾花数据集3.2 加载糖尿病数据集3.3 加载葡萄酒数据集四，sklearn获取现实世界数据集五&#…...

编程日记 2025/6/28 23:04:15

在Ubuntu服务器上部署Label Studio

一、拉取镜像 docker pull heartexlabs/label-studio:latest 二、启动容器 （回到用户目录，例：输入pwd，显示 /home/<user>） docker run -d --name label-studio -it -p 8081:8080 -v $(pwd)/mydata:/label-st…...

编程日记 2025/6/29 1:25:18

机器学习07-归一化与标准化

归一化与标准化一、基本概念归一化（Normalization） 定义：将数据缩放到一个固定的区间，通常是[0,1]或[-1,1]，以消除不同特征之间的量纲影响和数值范围差异。公式：对于数据 ( x )，归一化后的值…...

编程日记 2025/6/28 23:04:16

用vue和go实现登录加密

前端使用CryptoJS默认加密方法： var pass CryptoJS.AES.encrypt(formData.password, key.value).toString()使用 CryptoJS.AES.encrypt() 时不指定加密模式和参数时，CryptoJS 默认会执行以下操作 var encrypted CryptoJS.AES.encrypt("明文&quo…...

编程日记 2025/6/29 0:51:30

服务器制造业中，L2、L6、L10等表示什么意思

在服务器制造业中，L2、L6、L10等是用于描述服务器生产流程集成度的分级体系，从基础零件到完整机架系统共分为L1-L12共12个等级。不同等级对应不同的生产环节和交付形态，以下是核心级别的具体含义： L2（Level 2&#xf…...

编程日记 2025/6/28 23:04:13

mysql8常用sql语句

查询结果带行号 -- 表名为 mi_user， 假设包含列 id ，address SELECT ROW_NUMBER() OVER (ORDER BY id) AS row_num, t.id, t.address FROM mi_user t ; SELECT ROW_NUMBER() OVER ( ) AS row_num, t.id, t.address FROM mi_user t ; 更新某列数…...

编程日记 2025/6/29 1:08:16

多模态RAG与LlamaIndex——1.deepresearch调研

摘要关键点： 多模态RAG技术通过结合文本、图像、表格和视频等多种数据类型，扩展了传统RAG（检索增强生成）的功能。LlamaIndex是一个开源框架，支持多模态RAG，提供处理文本和图像的模型、嵌入和索引功能。研…...

编程日记 2025/6/28 23:43:36

汽车工厂数字孪生实时监控技术从数据采集到三维驱动实现

在工业智能制造推动下，数字孪生技术正成为制造业数字化转型的核心驱动力。今天详细介绍数字孪生实时监控技术在汽车工厂中的应用，重点解析从数据采集到三维驱动实现的全流程技术架构，并展示其在提升生产效率、降低成本和优化决策方面的显著价…...

编程日记 2025/6/28 23:38:56

深度解码双重订阅用户：高价值流量池的掘金指南

在流量红利消退的当下，内容平台与电商平台的竞争已进入白热化阶段。数据显示，2023年全球用户平均每日切换应用频次超过200次，但仅有3%的用户愿意为多个平台持续付费。这3%的群体——“双重订阅用户”，正成为商业价值最高的流量金矿…...

编程日记 2025/6/29 1:26:35

MATLAB Simulink在Autosar和非Autosar工程下的开发流程

软件开发有两种方法：自上而下和自下而上。自上而下就是从整体出发去设计各个模块和模块间的接口，要求架构设计人员对产品功能非常清楚；自下而上就是从一个一个模块出发去设计，进而组成一个整体。自下而上可能会带来冗余代码过多和…...

编程日记 2025/6/29 0:09:16

目标：

圣杯布局

双飞翼布局

两者本质区别

相关文章：