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

【CSS】常见 CSS 布局

news 2025/11/22 17:13:27

1. 响应式布局

<!DOCTYPE html>
<html><head><title>简单的响应式布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: 20px;text-align: center;}/* 导航样式 */nav {background-color: #f2f2f2;padding: 10px;}nav ul {list-style-type: none;margin: 0;padding: 0;}nav ul li {display: inline;margin-right: 10px;}nav ul li a:hover {background-color: #ccc;}nav ul li a {color: #333;text-decoration: none;padding: 5px;}/* 主要内容样式 */main {padding: 20px;}section {margin-bottom: 20px;}/* 脚注样式 */footer {background-color: #333;color: #fff;padding: 10px;text-align: center;position: fixed;left: 0;bottom: 0;width: 100%;}</style>
</head><body><header><h1>响应式布局示例</h1></header><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></nav><main><section><h2>欢迎来到我们的网站！</h2><p>这是一个简单的响应式布局示例。</p></section></main><footer><p>版权所有 &copy; 2023</p></footer><script></script>
</body></html>

在这里插入图片描述

2. 块级布局

<!DOCTYPE html>
<html><head><title>简单的块级布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: 20px;text-align: center;}/* 主要内容样式 */main {display: flex;justify-content: space-between;padding: 20px;}section {flex-basis: 48%;background-color: #f2f2f2;padding: 20px;margin-bottom: 20px;}.left-section {/* order 规定 section 出现的先后顺序 */order: 1;}.right-section {order: 2;}/* 脚注样式 */footer {background-color: #333;color: #fff;padding: 10px;text-align: center;position: fixed;bottom: 0;left: 0;width: 100%;}</style>
</head><body><header><h1>块级布局示例</h1></header><main><section class="left-section"><h2>左侧区域</h2><p>这是左侧区域的内容。</p></section><section class="right-section"><h2>右侧区域</h2><p>这是右侧区域的内容。</p></section></main><footer><p>版权所有 &copy; 2023</p></footer><script src="main.js"></script>
</body></html>

在这里插入图片描述

3. 流式布局

<!DOCTYPE html>
<html><head><title>简单的流式布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: 20px;text-align: center;}/* 内容区域样式 */#content {display: flex;flex-wrap: wrap;justify-content: center;padding: 20px;}.box {flex-basis: 300px;background-color: #f2f2f2;padding: 20px;margin: 10px;}/* 脚注样式 */footer {background-color: #333;color: #fff;padding: 10px;text-align: center;position: fixed;bottom: 0;left: 0;width: 100%;}</style>
</head><body><header><h1>流式布局示例</h1></header><div id="content"><div class="box"><h2>盒子 1</h2><p>这是盒子 1 的内容。</p></div><div class="box"><h2>盒子 2</h2><p>这是盒子 2 的内容。</p></div><div class="box"><h2>盒子 3</h2><p>这是盒子 3 的内容。</p></div><div class="box"><h2>盒子 4</h2><p>这是盒子 4 的内容。</p></div></div><footer><p>版权所有 &copy; 2023</p></footer><script src="main.js"></script>
</body></html>

在这里插入图片描述

4. 定位布局

<!DOCTYPE html>
<html><head><title>简单的定位布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 容器样式 */#container {position: relative;width: 500px;height: 300px;background-color: #f2f2f2;}/* 盒子样式 */.box {position: absolute;padding: 20px;background-color: #333;color: #fff;}#box1 {top: 20px;left: 20px;}#box2 {bottom: 20px;right: 20px;}#box3 {top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head><body><div id="container"><divid="box1"class="box">盒子 1</div><divid="box2"class="box">盒子 2</div><divid="box3"class="box">盒子 3</div></div><script src="main.js"></script>
</body></html>

在这里插入图片描述

5. 多列布局

<!DOCTYPE html>
<html><head><title>简单的多列布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 容器样式 */#container {display: flex;justify-content: space-between;padding: 20px;}/* 列样式 */.column {flex-basis: 30%;background-color: #f2f2f2;padding: 20px;margin: 10px;}</style>
</head><body><div id="container"><div class="column"><h2>列 1</h2><p>这是列 1 的内容。</p></div><div class="column"><h2>列 2</h2><p>这是列 2 的内容。</p></div><div class="column"><h2>列 3</h2><p>这是列 3 的内容。</p></div></div><script src="main.js"></script>
</body></html>

在这里插入图片描述

6. 网格布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box {width: 1700px;height: 500px;border: 10px solid gray;margin: 100px auto;display: grid;/* 13 列，每列列宽为 100px */grid-template-columns: repeat(13, 100px);/* 4 行，每行高度为 100px */grid-template-rows: repeat(4, 100px);/* 单元格间距 垂直 水平 */grid-gap: 10px 10px;/* 整体网格居中 */place-content: center center;}.box>div {background: pink;}.box1 {/* 横向网格线起始位置 */grid-row: 1/3;/* 纵向网格线起始位置 */grid-column: 12/14;}.box2 {grid-row: 1/2;grid-column: 10/12;}</style>
</head><body><div class="box"><div class="box1">1</div><div class="box2">2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div><div>32</div><div>33</div><div>34</div><div>35</div><div>36</div><div>37</div><div>38</div><div>39</div><div>40</div><div>41</div><div>42</div><div>43</div><div>44</div><div>45</div><div>46</div><div>47</div><div>48</div><!-- <div>49</div> --><!-- <div>50</div><div>51</div><div>52</div> --></div>
</body></html>

在这里插入图片描述

7. 浮动布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav {width: 100%;overflow: hidden;}.nav li {float: left;margin-right: 15px;}.nav li a {display: block;padding: 10px;text-decoration: none;color: #000;}</style>
</head><body><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul>
</body></html>

在这里插入图片描述

【CSS】常见 CSS 布局

1. 响应式布局 <!DOCTYPE html> <html><head><title>简单的响应式布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: …...

编程日记 2023/10/22 22:38:59

数据结构---HashMap和HashSet

HashMap和HashSet都是存储在哈希桶之中，我们可以先了解一些哈希桶是什么。像这样，一个数组数组的每个节点带着一个链表，数据就存放在链表结点当中。哈希桶插入/删除/查找节点的时间复杂度是O(1) map代表存入一个key值，一个val值…...

编程日记 2023/10/22 22:37:59

SLAM中相机姿态估计算法推导基础数学总结

相机模型基本模型内参外参对极几何对极约束外积符号基础矩阵F和本质矩阵E 相机姿态估计问题分为如下两步: 本质矩阵 E t ∧ R Et^{\wedge}R Et∧R因为 t ∧ t^{\wedge} t∧其实就是个3x3的反对称矩阵，所以 E E E也是一个3x3的矩阵用八点法估计E…...

编程日记 2023/10/22 22:36:57

【RS】遥感影像/图片64位、16位（64bit、16bit）的意义和区别

在数字图像处理中，我们常常会听到不同的位数术语，比如64位、16位和8位（64bit、16bit、8bit）。这些位数指的是图像的深度，也就是图像中每个像素可以显示的颜色数。位数越高，图像可以显示的颜色数就越多&…...

编程日记 2023/10/22 22:35:55

【单元测试】--基础知识

一、什么是单元测试单元测试是软件开发中的一种测试方法，用于验证代码中的单个组件（通常是函数、方法或类）是否按预期工作。它旨在隔离和测试代码的最小单元，以确保其功能正确，提高代码质量和可维护性。单元测试通常…...

编程日记 2023/10/22 22:34:53

golang 反射机制

在 go 语言中，实现反射能力的是 reflect包，能够让程序操作不同类型的对象。其中，在反射包中有两个非常重要的类型和函数，两个函数分别是： reflect.TypeOfreflect.ValueOf 两个类型是 reflect.Type 和 reflect.Value…...

编程日记 2023/10/22 22:33:52

【Javascript】创建对象的几种方式

通过字面量创建对象通过构造函数创建对象 Object()-------------构造函数通过构造函数来实例化对象给person注入属性 Factory工厂 this指向的是对象的本身使⽤new 实例化⼀个对象，就像⼯⼚⼀样...

编程日记 2023/10/22 22:32:51

深度学习_3_实战_房价预测

梯度实战代码： # %matplotlib inline import random import torch import matplotlib.pyplot as plt # from d21 import torch as d21def synthetic_data(w, b, num_examples):"""生成 Y XW b 噪声。"""X torch.normal(0,…...

编程日记 2023/10/22 22:31:50

HCIA -- 动态路由协议之RIP

一、静态协议的优缺点： 缺点： 1、中大型网络配置量过大 2、不能基于拓扑的变化而实时的变化优点： 1、不会额外暂用物理资源 2、安全问题 3、计算路径问题简单、小型网络建议使用静态路由；中大型较复杂网络，建议使用…...

编程日记 2023/10/22 22:29:48

JS常用时间操作moment.js参考文档

Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。下面…...

编程日记 2023/10/22 22:27:46

基于 FFmpeg 的跨平台视频播放器简明教程（九）：Seek 策略

系列文章目录基于 FFmpeg 的跨平台视频播放器简明教程（一）：FFMPEG Conan 环境集成基于 FFmpeg 的跨平台视频播放器简明教程（二）：基础知识和解封装（demux）基于 FFmpeg 的跨平台视频…...

编程日记 2023/10/22 22:25:45

设计模式_备忘录模式

备忘录模式介绍设计模式定义案例问题堆积在哪里解决办法备忘录模式行为型模式， 保存了数据某一个时间点的状态在需要的时候进行回档单机游戏的角色数据保存并且回档保存和回档加一个状态管理类类图代码 MomentData using UnityEngine;public class MomentD…...

编程日记 2023/10/22 22:24:44

双势阱模型

双势阱模型原子钟传统的原子钟利用氨分子由于隧道效应，上顶点的氮原子可以贯穿三个氢原子形成的势垒，到达下顶点对体系注入微波能量后，氮原子在上下定点之间振荡，体系的能量在两个稳定态之间交替变换，其振荡频率决…...

编程日记 2023/10/22 22:21:40

文献阅读：The Reversal Curse: LLMs trained on “A is B” fail to learn “B is A”

文献阅读：The Reversal Curse: LLMs trained on “A is B” fail to learn “B is A” 1. 文章简介2. 实验 & 结果考察 1. finetune实验2. 真实知识问答 3. 结论 & 思考文献链接：https://arxiv.org/abs/2309.12288 1. 文章简介这篇文章是前…...

编程日记 2023/10/22 22:20:39

真实感受：是智能家居在选择合适的技术！

科技从来都是为了让我们的生活更加的简单、舒适，而智能家居的智能，体现在如何更更更方便的使用我需要控制的家居。例如：下班躺在床上想休息，房间和大厅的灯还开着，这时你会选择什么产品躺着解决问题？ 红外…...

编程日记 2023/10/22 22:19:38

前端 TS 快速入门之二：接口

1. 接口有什么用通过 interface 定义接口。检测对象的属性，不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。 interface IPerson {name: string;age: number; } function say(person: IPerson): void {console.log(my name is ${pers…...

编程日记 2023/10/22 22:18:36

论文生成器（论文、文献综述、开题报告……），Java、Python、C++

“让论文生成器为您省时省力，轻松写出高质量的论文！” 2022年，腾讯全球数字生态大会腾讯云智能专场发布。链接：http://xiezuo.saiertewl.cn/tb/xrWQed?dCodeh1xDrXmuhZbKPKgI&couponCodexiaoweilunwen...

编程日记 2023/10/22 22:17:35

【Java基础面试三十六】、遇到过异常吗，如何处理？

文章底部有个人公众号：热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享？ 踩过的坑没必要让别人在再踩，自己复盘也能加深记忆。利己利人、所谓双赢。面试官：遇到过异常吗&#xff0…...

编程日记 2023/10/22 22:16:33

DASCTF-CBCTF-2023 Crypto部分复现

文章目录 EzRSACB backpack 这次比赛没打，记错时间了，看了一下，如果去做的话大概也只能做出那两道简单的题，还是太菜啦 EzRSA 题目描述： from Crypto.Util.number import * import random from gmpy2 import * from …...

编程日记 2023/10/22 22:15:30

为什么要做字节对齐 alignment？

下面这段 C 代码的输出是什么？定义的 Type 占用的字节数（下面简称为字节数）是多少呢？ #include <iostream>struct Type {char a;int b; };int main(void) {std::cout << sizeof(Type) << \n; }经过编译运行&am…...

编程日记 2023/10/22 22:14:29

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录一、问题背景与挑战二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/11/19 11:58:43

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...

编程新知 2025/11/19 11:48:51

Robots.txt 文件

什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

【决胜公务员考试】求职OMG——见面课测验1

2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础协议全称 ：HyperText Transfer Protocol（超文本传输协议） 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。请求方法 ： GET ：用于获取资源，…...

编程新知 2025/10/3 0:42:17

JavaScript基础-API 和 Web API

在学习JavaScript的过程中，理解API（应用程序接口）和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能，使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码，因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式我们在写代码的时候通常会进行网上保存，无论是github还是gittee，都是一种基于git去保存代码的形式，这样保存代码…...

编程新知 2025/11/17 14:17:39

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...

编程新知 2025/11/18 6:23:20

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行： rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...

编程新知 2025/11/16 22:31:25

1. 响应式布局

2. 块级布局

3. 流式布局

4. 定位布局

5. 多列布局

6. 网格布局

7. 浮动布局

相关文章：