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

【CSS】常见 CSS 布局

news 2025/6/25 0:12:54

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

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2025/6/21 3:31:21

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局：PCB行业的时代之问在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/6/24 3:18:04

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法文章目录前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言前几天听说公司某个项…...

编程新知 2025/6/21 0:42:19

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日来简单学一下子来一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...

编程新知 2025/6/15 21:10:02

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/6/22 9:29:28

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/6/24 6:02:39

【Oracle】分区表

个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/6/22 19:18:38

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性本论文优点：（1）在ALOHA…...

编程新知 2025/6/21 1:40:08

Java 二维码

Java 二维码 **技术：**谷歌 ZXing 实现首先添加依赖 <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/6/21 12:56:10

动态 Web 开发技术入门篇

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

编程新知 2025/6/21 15:51:18

1. 响应式布局

2. 块级布局

3. 流式布局

4. 定位布局

5. 多列布局

6. 网格布局

7. 浮动布局

相关文章：