【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: 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>版权所有 © 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>版权所有 © 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>版权所有 © 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: …...
数据结构---HashMap和HashSet
HashMap和HashSet都是存储在哈希桶之中，我们可以先了解一些哈希桶是什么。 像这样，一个数组数组的每个节点带着一个链表，数据就存放在链表结点当中。哈希桶插入/删除/查找节点的时间复杂度是O(1) map代表存入一个key值，一个val值…...
SLAM中相机姿态估计算法推导基础数学总结
相机模型 基本模型 内参 外参 对极几何 对极约束 外积符号 基础矩阵F和本质矩阵E 相机姿态估计问题分为如下两步: 本质矩阵 E t ∧ R Et^{\wedge}R Et∧R因为 t ∧ t^{\wedge} t∧其实就是个3x3的反对称矩阵，所以 E E E也是一个3x3的矩阵 用八点法估计E…...
【RS】遥感影像/图片64位、16位（64bit、16bit）的意义和区别
在数字图像处理中，我们常常会听到不同的位数术语，比如64位、16位和8位（64bit、16bit、8bit）。这些位数指的是图像的深度，也就是图像中每个像素可以显示的颜色数。位数越高，图像可以显示的颜色数就越多&…...
【单元测试】--基础知识
一、什么是单元测试 单元测试是软件开发中的一种测试方法，用于验证代码中的单个组件（通常是函数、方法或类）是否按预期工作。它旨在隔离和测试代码的最小单元，以确保其功能正确，提高代码质量和可维护性。单元测试通常…...
golang 反射机制
在 go 语言中，实现反射能力的是 reflect包，能够让程序操作不同类型的对象。其中，在反射包中有两个非常重要的 类型和 函数，两个函数分别是： reflect.TypeOfreflect.ValueOf 两个类型是 reflect.Type 和 reflect.Value…...
【Javascript】创建对象的几种方式
通过字面量创建对象 通过构造函数创建对象 Object()-------------构造函数 通过构造函数来实例化对象 给person注入属性 Factory工厂 this指向的是对象的本身使⽤new 实例化⼀个对象，就像⼯⼚⼀样...
深度学习_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,…...
HCIA -- 动态路由协议之RIP
一、静态协议的优缺点： 缺点： 1、中大型网络配置量过大 2、不能基于拓扑的变化而实时的变化 优点： 1、不会额外暂用物理资源 2、安全问题 3、计算路径问题 简单、小型网络建议使用静态路由；中大型较复杂网络，建议使用…...
JS常用时间操作moment.js参考文档
Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。下面…...
基于 FFmpeg 的跨平台视频播放器简明教程（九）：Seek 策略
系列文章目录 基于 FFmpeg 的跨平台视频播放器简明教程（一）：FFMPEG Conan 环境集成基于 FFmpeg 的跨平台视频播放器简明教程（二）：基础知识和解封装（demux）基于 FFmpeg 的跨平台视频…...
设计模式_备忘录模式
备忘录模式 介绍 设计模式定义案例问题堆积在哪里解决办法备忘录模式行为型模式， 保存了数据某一个时间点的状态 在需要的时候进行回档单机游戏的角色 数据保存并且回档保存和回档加一个状态管理类 类图 代码 MomentData using UnityEngine;public class MomentD…...
双势阱模型
双势阱模型 原子钟 传统的原子钟利用氨分子 由于隧道效应，上顶点的氮原子可以贯穿三个氢原子形成的势垒，到达下顶点对体系注入微波能量后，氮原子在上下定点之间振荡，体系的能量在两个稳定态之间交替变换，其振荡频率决…...
文献阅读：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. 文章简介 这篇文章是前…...
真实感受：是智能家居在选择合适的技术！
科技从来都是为了让我们的生活更加的简单、舒适，而智能家居的智能，体现在如何更更更方便的使用我需要控制的家居。 例如：下班躺在床上想休息，房间和大厅的灯还开着，这时你会选择什么产品躺着解决问题？ 红外…...
前端 TS 快速入门之二：接口
1. 接口有什么用 通过 interface 定义接口。 检测对象的属性，不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。 interface IPerson {name: string;age: number; } function say(person: IPerson): void {console.log(my name is ${pers…...
论文生成器（论文、文献综述、开题报告……），Java、Python、C++
“让论文生成器为您省时省力，轻松写出高质量的论文！” 2022年，腾讯全球数字生态大会腾讯云智能专场发布。 链接：http://xiezuo.saiertewl.cn/tb/xrWQed?dCodeh1xDrXmuhZbKPKgI&couponCodexiaoweilunwen...
【Java基础面试三十六】、遇到过异常吗，如何处理？
文章底部有个人公众号：热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享？ 踩过的坑没必要让别人在再踩，自己复盘也能加深记忆。利己利人、所谓双赢。 面试官：遇到过异常吗࿰…...
DASCTF-CBCTF-2023 Crypto部分复现
文章目录 EzRSACB backpack 这次比赛没打，记错时间了，看了一下，如果去做的话大概也只能做出那两道简单的题，还是太菜啦 EzRSA 题目描述： from Crypto.Util.number import * import random from gmpy2 import * from …...
为什么要做字节对齐 alignment？
下面这段 C 代码的输出是什么？定义的 Type 占用的字节数（下面简称为字节数）是多少呢？ #include <iostream>struct Type {char a;int b; };int main(void) {std::cout << sizeof(Type) << \n; }经过编译运行&am…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程？ 2. Java创建对象的过程？ 3. 对象的生命周期？ 4. 类加载器有哪些？ 5. 双亲委派模型的作用（好处）？ 6. 讲一下类的加载和双亲委派原则？ 7. 双亲委派模…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版，莫兰迪调色板清新简约工作汇报PPT模版，莫兰迪时尚风极简设计PPT模版，大学生毕业论文答辩PPT模版，莫兰迪配色总结计划简约商务通用PPT模版，莫兰迪商务汇报PPT模版，…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时，性能会显著下降。以下是优化思路和简易实现方法： 一、核心优化思路 减少 JOIN 数量 数据冗余：添加必要的冗余字段（如订单表直接存储用户名）合并表：将频繁关联的小表合并成…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机，点进去 点进去 查看URL，有 ?fileflag.php说明存在文件包含，原理是php://filter 协议 当它与包含函数结合时，php://filter流会被当作php文件执行。 用php://filter加编码，能让PHP把文件内容…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...