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

CSS3 grid网格布局

news 文章来源：https://blog.csdn.net/qq_14876133/article/details/130365870 2024/11/17 9:50:27

文章目录

  • CSS3 grid网格布局
    • 概述
    • grid属性说明
    • 使用
      • grid-template-rows & grid-template-columns 定义行高和列宽
      • grid-auto-flow 定义项目的排列顺序
      • grid-auto-rows & grid-auto-columns 定义多余网格的行高和列宽
      • row-gap & column-gap 设置行间距和列间距
      • gap 简写形式
      • grid-template-areas 定义区域
      • justify-items & align-items 设置项目的水平位置和垂直位置
      • place-items 简写形式
      • align-content & justify-content 设置整个内容的位置
      • place-content 简写形式
      • grid-row-start & grid-row-end & grid-column-start & grid-column-end 指定项目位置
      • grid-column & grid-row 简写形式
      • grid-area 简写形式
      • align-self & justify-self 设置项目的垂直位置和水平位置
      • place-self 简写形式
    • 案例
      • 圣杯布局

CSS3 grid网格布局

概述

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

grid元素是块元素。

grid属性说明

在这里插入图片描述

容器属性

属性说明
grid-template-rows定义行高
grid-template-columns定义列宽
grid-auto-flow定义项目的排列顺序
grid-auto-rows定义多余网格的行高
grid-auto-columns定义多余网格的列宽
row-gap行间距
column-gap列间距
gaprow-gap和column-gap的简写
grid-template-areas定义区域
justify-items设置项目的水平位置
align-items设置项目的垂直位置
place-itemsalign-items和justify-items的简写
align-content设置整个内容区域的垂直位置
justify-content设置整个内容区域的水平位置
place-contentalign-content和justify-content的简写
grid-templategrid-template-columns、grid-template-rows 和 grid-template-areas的简写

项目属性

属性说明
grid-row-start & grid-row-end & grid-column-start & grid-column-end指定项目位置
grid-columngrid-column-start 和 grid-column-end 的合并简写形式
grid-rowgrid-row-start 和 grid-row-end 的合并简写形式
grid-areagrid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式
align-self项目的垂直位置
justify-self项目的水平位置
place-selfalign-self 和 justify-self的简写形式

使用

grid-template-rows & grid-template-columns 定义行高和列宽

grid-template-rows和 grid-template-columns属性取值

属性值说明
px固定值
%百分比
fr片段，分配剩余空间
auto先于fr计算，获取必要的最小空间
repeat()简化重复值

固定值使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: grid;grid-template-rows: 50px 50px 50px;grid-template-columns: 50px 50px 50px;}.item {display: flex;align-items: center;justify-content: center;color: white;font-size: 12px;}.item-1 {background-color: lightseagreen;}.item-2 {background-color: lightsteelblue;}.item-3 {background-color: lightgreen;}.item-4 {background-color: #ffd200;}.item-5 {background-color: lightskyblue;}.item-6 {background-color: pink;}.item-7 {background-color: gray;}.item-8 {background-color: orange;}.item-9 {background-color: yellowgreen;}</style></head><body><div class="wrap"><div class="item item-1">1</div><div class="item item-2">2</div><div class="item item-3">3</div><div class="item item-4">4</div><div class="item item-5">5</div><div class="item item-6">6</div><div class="item item-7">7</div><div class="item item-8">8</div><div class="item item-9">9</div></div></body>
</html>

在这里插入图片描述

百分比使用

.container {display: grid;width: 150px;height: 150px;grid-template-rows: 33.33% 33.33% 33.33%;grid-template-columns: 33.33% 33.33% 33.33%;
}

在这里插入图片描述

fr使用

.container {display: grid;width: 150px;height: 150px;grid-template-rows: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;
}

在这里插入图片描述

.container {display: grid;width: 150px;height: 150px;grid-template-rows: 20px 1fr 20px;grid-template-columns: 20px 1fr 20px;
}

在这里插入图片描述

auto使用

.container {display: grid;width: 150px;height: 150px;grid-template-rows: 20px auto 20px;grid-template-columns: 20px auto 20px;
}

在这里插入图片描述

.container {display: grid;width: 150px;height: 150px;grid-template-rows: auto 1fr 50px;grid-template-columns: auto auto auto;
}

在这里插入图片描述

repeat()使用

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}

在这里插入图片描述

grid-auto-flow 定义项目的排列顺序

grid-auto-flow属性取值

属性说明
row先填入第一行
column先填入第一列
row dense按行填充空白
column dense按列填充空白

使用

.container {
display: grid;
width: 150px;
height: 150px;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
grid-auto-flow: row;
}

在这里插入图片描述

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);grid-auto-flow: column;
}

在这里插入图片描述

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);grid-auto-flow: row dense;
}.item-1 {grid-column-start: 1;grid-column-end: 3;
}

在这里插入图片描述

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);grid-auto-flow: column dense;
}.item-1 {grid-column-start: 1;grid-column-end: 3;
}

在这里插入图片描述

grid-auto-rows & grid-auto-columns 定义多余网格的行高和列宽

使用

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);grid-auto-rows: 100px;grid-auto-columns: 100px;
}

在这里插入图片描述

row-gap & column-gap 设置行间距和列间距

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);row-gap: 10px;column-gap: 40px;
}

在这里插入图片描述

gap 简写形式

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);gap: 10px 40px;
}

在这里插入图片描述

grid-template-areas 定义区域

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);grid-template-areas:"a b c""e f g""h i j";
}.item-1 {grid-area: c;
}.item-3 {grid-area: a;
}

在这里插入图片描述

justify-items & align-items 设置项目的水平位置和垂直位置

justify-items & align-items属性取值

属性值说明
stretch默认值，拉伸
start开始位置
center居中位置
end结束位置

使用

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);justify-items: center;align-items: center;
}

在这里插入图片描述

place-items 简写形式

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);place-items: center center;
}

在这里插入图片描述

align-content & justify-content 设置整个内容的位置

align-content & justify-content属性取值

属性说明
stretch默认值，没有指定大小时，拉伸
start开始位置
center居中位置
end结束位置
space-around每个项目的间隔相等
space-between每个项目的间隔相等，项目与边框之间没有间隔
space-evenly每个项目的间隔相等，项目与边框之间也是一样的间隔

使用

.container {display: grid;height: 500px;border: 1px dashed green;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);align-content: center;justify-content: center;
}

在这里插入图片描述

place-content 简写形式

.container {display: grid;height: 500px;border: 1px dashed green;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);place-content: center;
}

在这里插入图片描述

grid-row-start & grid-row-end & grid-column-start & grid-column-end 指定项目位置

属性取值

属性值说明
number从第几个网格线开始，到第几个网格线结束
name需要先定义网格线
span number表示跨域几个网格

使用

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {grid-row-start: 1;grid-row-end: 3;grid-column-start: 1;grid-column-end: 3;
}

在这里插入图片描述

.container {display: grid;grid-template-rows: [c1] 50px [c2] 50px [c3] 50px [c4];grid-template-columns: [r1] 50px [r2] 50px [r3] 50px [r4];
}.item-1 {grid-row-start: c1;grid-row-end: c3;grid-column-start: r1;grid-column-end: r3;
}

在这里插入图片描述

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {grid-row-start: span 2;grid-column-start: span 2;
}

在这里插入图片描述

grid-column & grid-row 简写形式

grid-column 是 grid-column-start 和 grid-column-end 的合并简写形式

grid-row 是 grid-row-start 和 grid-row-end 的合并简写形式

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {grid-column: 1 / 3;grid-row: 1 / 3;
}

在这里插入图片描述

grid-area 简写形式

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {grid-area: 1/1/3/3;
}

在这里插入图片描述

align-self & justify-self 设置项目的垂直位置和水平位置

属性取值

属性值说明
stretch默认值，拉伸
start开始位置
center居中位置
end结束位置

使用

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {align-self: end;justify-self: end;
}

在这里插入图片描述

place-self 简写形式

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {place-self: end;
}

在这里插入图片描述

案例

圣杯布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>圣杯布局（grid）</title><style>* {padding: 0;margin: 0;}html {width: 100%;height: 100%;}body {display: grid;grid-template-rows: 80px 1fr 80px;grid-template-columns: 200px auto 200px;grid-template-areas:"header header header""left main right""footer footer footer";height: 100%;}.header {grid-area: header;background-color: red;}.left {grid-area: left;background-color: yellow;}.main {grid-area: main;background-color: aqua;}.right {grid-area: right;background-color: bisque;}.footer {grid-area: footer;background-color: gray;}.grid-center {display: grid;justify-items: center;align-items: center;}</style></head><body><header class="header grid-center">header</header><div class="left grid-center">left</div><div class="main grid-center">main</div><div class="right grid-center">right</div><footer class="footer grid-center">footer</footer></body>
</html>

相关文章：

CSS3 grid网格布局

文章目录 CSS3 grid网格布局概述grid属性说明使用grid-template-rows & grid-template-columns 定义行高和列宽grid-auto-flow 定义项目的排列顺序grid-auto-rows & grid-auto-columns 定义多余网格的行高和列宽row-gap & column-gap 设置行间距和列间距gap 简写形…...

编程日记 2023/6/1 5:50:38

SPSS如何进行均值比较和T检验之案例实训？

文章目录 0.引言1.均值过程2.单样本T检验3.独立样本T检验4.成对样本T检验 0.引言 因科研等多场景需要进行数据统计分析&#xff0c;笔者对SPSS进行了学习&#xff0c;本文通过《SPSS统计分析从入门到精通》及其配套素材结合网上相关资料进行学习笔记总结&#xff0c;本文对均值…...

编程日记 2023/6/1 5:54:50

Packet Tracer - 配置交换机端口安全

Packet Tracer - 配置交换机端口安全 地址分配表 设备 接口 IP 地址 子网掩码 S1 VLAN 1 10.10.10.2 255.255.255.0 PC1 NIC 10.10.10.10 255.255.255.0 PC2 NIC 10.10.10.11 255.255.255.0 非法笔记本电脑 NIC 10.10.10.12 255.255.255.0 目标 第 1 部…...

编程日记 2023/6/1 5:59:05

一图看懂 aiohttp 模块：基于 asyncio 的异步HTTP网络库, 资料整理+笔记（大全）

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 aiohttp 模块&#xff1a;基于 asyncio 的异步HTTP网络库, 资料整理笔记&#xff08;大全&#xff09; 摘要模块图类关系图模块全展开【aiohttp】统计常量模块1 aiohttp.hd…...

编程日记 2023/6/1 6:03:21

Linux + 香橙派 + V4L2 + http 实现远程监控摄像头在网页端显示

项目场景&#xff1a; 项目需求&#xff0c;需要做一个基于边缘端的人脸识别远程监控摄像头并在网页前端展示 &#xff0c;这里采用国产香橙派作为边缘计算终端&#xff0c;安装ubuntu系统&#xff0c;系统中采用v4l2接口对摄像头进行获取&#xff0c;当客户端通过网页进行请求…...

编程日记 2023/6/1 6:08:08

《编码——隐匿在计算机软硬件背后的语言》精炼——第15-16章（十六进制，RAM）

“学习如春起之苗&#xff0c;不见其增&#xff0c;日有所长。” —— 宋代朱熹 文章目录 十六进制十六进制概述十六进制表字节到十六进制 存储器特定的读功能特定的写功能RAM大型RAM阵列 十六进制 十六进制概述 十六进制是一种适用于计算机的进制法。在十进制中&#xff0c;…...

编程日记 2023/6/1 6:12:39

leetcode.1376 通知所有员工所需的时间 - bfs/dfs + 树

1376. 通知所有员工所需的时间 目录 一、bfs 二、dfs 题目&#xff1a; 公司里有 n 名员工&#xff0c;每个员工的 ID 都是独一无二的&#xff0c;编号从 0 到 n - 1。公司的总负责人通过 headID 进行标识。在 manager 数组中&#xff0c;每个员工都有一个直属负责人&#x…...

编程日记 2023/6/1 6:17:23

AtCoder Beginner Contest 300——A-G题讲解

蒟蒻来讲题&#xff0c;还望大家喜。若哪有问题&#xff0c;大家尽可提&#xff01; Hello, 大家好哇&#xff01;本初中生蒟蒻讲解一下AtCoder Beginner Contest 300这场比赛的A-G题&#xff01; A - N-choice question 原题 Problem Statement Given integers A A A and…...

编程日记 2023/6/1 6:21:50

Go：值与指针

1. 计算机中的值 在百万年的演化历史中&#xff0c;人类对事物的属性进行了抽象&#xff0c;有了数量、精度、信息等概念的表示&#xff0c;对应的我们称之为整数、小数、文本文字等。计算机出现后&#xff0c;我们使用计算机对真实世界的问题进行建模&#xff0c;通过计算机的…...

编程日记 2023/6/1 6:26:34

【Linux】进程学习（2）---理解进程操作

文章目录 查看进程通过系统目录查看通过ps命令查看 通过系统调用获取进程标识符通过系统调用创建进程初识fork函数fork函数的返回值 进程状态阻塞与运行状态Linux内核源码中的进程状态运行状态-R浅度睡眠状态-S深度睡眠状态-D暂停状态-T僵尸状态-Z死亡状态-X 查看进程 通过系统…...

编程日记 2023/6/1 6:31:16

基于springcloud实现的医院信息系统

访问【WRITE-BUG数字空间】_[内附完整源码和文档] 医疗信息就诊系统&#xff0c;系统主要功能按照数据流量、流向及处理过程分为临床诊疗、药品管理、财务管理、患者管理。诊疗活动由各工作站配合完成&#xff0c;并将临床信息进行整理、处理、汇总、统计、分析等。本系统包括以…...

编程日记 2023/6/1 8:04:04

设计模式-创建型模式-(工厂、简单工厂、抽象工厂)

一、简单工厂模式 上代码 public class FoodFactory {public static Food makeFood(String name) {if (name.equals("noodle")) {Food noodle new LanZhouNoodle();noodle.addSpicy("more");return noodle;} else if (name.equals("chicken")…...

编程日记 2023/6/1 8:14:28

JAVA12新特性

JAVA12新特性 概述 2019年3月19日,java12正式发布了,总共有8个新的JEP(JDK Enhancement Proposals) JDK 12 is the open-source reference implementation of version 12 of the Java SE12 Platform as specified by by JSR 386 in the Java Community Process. JDK 12 reac…...

编程日记 2023/6/1 6:38:45

Nginx 静态文件、反向代理、负载均衡、缓存、SSL/TLS 加密、gzip 压缩 等等

Nginx的功能 1. 静态文件服务器2. 反向代理服务器3. 负载均衡4. 缓存5. SSL/TLS 加密6. URL 重写7. HTTP/28. WebSocket9. 反向代理缓存10. 安全限制11. gzip 压缩12. 请求限速13. 日志记录14. SSL 证书续订 Nginx 是一个高性能的开源 Web 服务器和反向代理服务器&#xff0c;它…...

编程日记 2023/6/1 6:42:47

Linux设备驱动模型（一）

一、sysfs文件系统 sysfs是一个虚拟文件系统&#xff0c;将内核总的设备对象的链接关系&#xff0c;以文件目录的方式表示出来&#xff0c;并提对设备提供读写接口。 二、kobject kobject是内核中对象表示的基类&#xff0c;可以认为所有的内核对象都是一个kobject kobject单…...

编程日记 2023/6/1 6:51:05

【Python入门篇】——Python基础语法（标识符与运算符）

作者简介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; Python入门&#xff0c;本专栏主要内容为Python的基础语法&#xff0c;Python中的选择循环语句…...

编程日记 2023/6/1 6:58:33

扩展 VirtualBox 已分配磁盘的方法

扩展 VirtualBox 已分配磁盘的方法 第一步&#xff1a;用VirtualBox命令行调整已分配磁盘的大小第二步&#xff1a;用windows磁盘管理工具扩展磁盘空间其他无关配置如何选择虚拟机的芯片组 注意&#xff1a;扩展操作只支持 vdi 格式的磁盘&#xff0c;就是VirtualBox自己的磁盘…...

编程日记 2023/6/1 6:46:59

【LeetCode】646. 最长数对链

646. 最长数对链&#xff08;中等&#xff09; 思路 这道题和 300. 最长递增子序列 类似&#xff0c;我们可以定义 dp 数组&#xff0c;其中 dp[i] 表示以 i 结尾的子序列的性质。在处理好每个位置后&#xff0c;统计一遍各个位置的结果即可得到题目要求的结果。 但是题目中强…...

编程日记 2023/6/1 6:54:59

Makefile教程（Makefile的结构）

文章目录 前言一、Makefile的结构二、深入案例三、Makefile中的一些技巧总结 前言 一、Makefile的结构 Makefile 通常由一系列规则组成&#xff0c;每条规则定义了如何从源文件生成目标文件。每个规则又由目标、依赖和命令三部分组成。 下面是 Makefile 规则的基本结构&…...

编程日记 2023/6/1 7:02:51

SpringMVC(后)SSM整合

10、文件上传和下载 10.1、文件下载 ResponseEntity用于控制器方法的返回值类型&#xff0c;该控制器方法的返回值就是响应到浏览器的响应报文 使用ResponseEntity实现下载文件的功能 RequestMapping("/testDown") public ResponseEntity<byte[]> testResp…...

编程日记 2023/6/1 7:07:10

【博弈论】【第一章】博弈论导论

博弈论导论 【例题】选择数字【例题】巴什博弈【例题】射手博弈博弈论的基本概念&#xff1a;参与人战略行动信息支付函数【例题】分100元 课程概述&#xff1a; 【例题】选择数字 两个参与人A和B&#xff0c;轮流选择[3,4,5,6,7,8,9]中的一个整数&#xff08;可重复)。当累计…...

编程日记 2023/6/1 7:12:04

keil移植linux（makefile）

文章目录 运行环境&#xff1a;1.1 freeRTOS_LED工程移植1)修改cubeMX配置2)setting设置3)launch设置4)修改makefile5)修改代码6)实验效果 运行环境&#xff1a; ubuntu18.04.melodic 宏基暗影骑士笔记本 stm32f427IIH6 stlink 9-24v可调电源 robomaster A 板 1.1 freeRTOS_L…...

编程日记 2023/6/1 7:17:18

C++——类和对象（3）

作者&#xff1a;几冬雪来 时间&#xff1a;2023年5月6日 内容&#xff1a;C类和对象内容讲解 目录 前言&#xff1a; 1.运算符重载&#xff08;续&#xff09;&#xff1a; 2.赋值重载&#xff1a; 结尾&#xff1a; 前言&#xff1a; 在上一篇博客中我们再一次讲解了…...

编程日记 2023/6/1 2:08:05

itop-3568开发板驱动学习笔记（24）设备树（三）时钟实例分析

《【北京迅为】itop-3568开发板驱动开发指南.pdf》 学习笔记 文章目录 生产者属性#clock-cells 属性clock-output-namesclock-frequencyassigned-clockclock-indicesassigned-clock-parents 消费者属性 设备树中的时钟信息以时钟树形式体现&#xff0c;时钟树包括时钟的属性和结…...

编程日记 2023/6/1 7:25:43

linux中使用docker部署微服务

目录 一、制作jar包&#xff08;如果看一眼很简单&#xff0c;可以直接使用结尾的jar&#xff09; 1.首先创建一个微服务 demo2 2.启动微服务&#xff08;在DemoApplication上右键执行启动就行&#xff09; 注意&#xff1a;其他操作导致的 可能遇到的报错 3.修改端口 4.新…...

编程日记 2023/6/1 7:31:03

操作系统考试复习—第三章 优先级倒置 死锁问题

当前OS广泛采用优先级调度算法和抢占方式&#xff0c;然而在系统中存在着影响进程运行的资源从而可能产生"优先级倒置"现象 具体解释为&#xff1a;在原本的调度算法设计中&#xff0c;高优先级进程可以抢占低优先级的CPU资源&#xff0c;先执行高优先级任务。但是存…...

编程日记 2023/6/1 7:35:57

OpenHarmony送显流程分析

OpenHarmony送显流程分析 引言 本文档主要记录OpenHarmony在渲染完成之后如何进行合成和送显流程的。这个过程牵涉的代码很多&#xff0c;而且流程也是比较繁琐的。所以我一定要坚持下来。千万不能半途而废&#xff0c;也不要想着一口气吃出一个胖子&#xff0c;路漫漫其修远兮…...

编程日记 2023/6/1 7:40:32

Java面试题字节流字符流

String 编码UTF-8 和GBK的区别 GBK编码&#xff1a;是指中国的中文字符&#xff0c;其实它包含了简体中文与繁体中文字符&#xff0c;另外还有一种字符 “gb2312”&#xff0c;这种字符仅能存储简体中文字符。 UTF-8编码&#xff1a;它是一种全国家通过的一种编码&#x…...

编程日记 2023/5/31 8:51:11

Self-Attention结构细节及计算过程

一、结构 上面那个图其实不是那么重要&#xff0c;只要知道将输入的x矩阵转换成三个矩阵进行计算即可。自注意力结构的输入为 输入矩阵的三个变形 Q&#xff08;query矩阵&#xff09;、K&#xff08;key矩阵&#xff09;、V&#xff08;value矩阵&#xff09;构成&#xff0c;…...

编程日记 2023/6/1 7:50:24

在Ubuntu18.04中安装uWebSockets库

目录 1.下载uWebSockets库2.下载uSockets3.安装openssl开发包4.编译首先说明这里使用的Ubuntu版本为18.04。 1.下载uWebSockets库 下载uWebSockets库有两种方式，一是终端，从Github中克隆uWebSockets库到Ubuntu本地文件夹，二是打开uWebSockets库下载链接自己下载到Windows，然…...

编程日记 2023/6/1 7:57:44

医疗网站做药品是干嘛/哈尔滨seo优化公司

eigen 与 opencv 矩阵的相互转换 需要包含以下头文件&#xff1a; #include <Eigen/Dense> #include <Eigen/Core> // eigen 头文件必须放在 opencv 前面 #include <opencv2/opencv.hpp> #include <opencv2/core/eigen.hpp>然后使用 cv::cv2eigen 和…...

编程日记 2024/11/17 6:19:44

wordpress关于我们插件/武汉官网优化公司

今天&#xff0c;接到一个朋友的电话。他是做集成项目的&#xff0c;当时正在客户那边验收Cisco交换机&#xff0c;打电话问我如何鉴别Cisco设备的真伪。 老实说&#xff0c;这方面我也没什么经验&#xff0c;不过确实听说过目前市面上Cisco的假冒和水货很多&#xff0c;一不小…...

编程日记 2024/11/17 6:08:33

张家界seo网站优化/自己建网站

运算符1.算数运算 运算符 描述 实例 a10&#xff0c;b20 加&#xff0c;两个对象相加 ab输出30 - 减&#xff0c;一个数减去另一个数 a-b输出-10 * 乘&#xff0c;两个数相乘或是返回一个被重复若干次的字符串 a*b输出200 / 除&am…...

编程日记 2024/11/17 3:59:33

性价比高的广州网站建设/如何做网络推广外包

...

编程日记 2024/11/17 3:26:51

wordpress手机菜单/营销失败案例分析

GO语法简单小结&#xff08;一&#xff09;1、 for循环中“ _, ”的用法&#xff1f;2、 Result()3、 转义字符转和原始字符串1、 for循环中“ _, ”的用法&#xff1f; for _, node : range c.nodesfor key, value : range []int{1, 2, 3, 4} {fmt.Printf("key:%d valu…...

编程日记 2024/11/17 3:20:47

成都最正规的装修公司/优化设计五年级下册数学答案

1、cloudera 数据压缩的一般准则 一般准则 是否压缩数据以及使用何种压缩格式对性能具有重要的影响。在数据压缩上&#xff0c;需要考虑的最重要的两个方面是 MapReduce 作业和存储在 HBase 中的数据。在大多数情况下&#xff0c;每个的原则都类似。您需要平衡压缩和解压缩数据…...

编程日记 2024/11/17 3:12:42