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

CSS 两栏布局和三栏布局的实现

news 文章来源：https://blog.csdn.net/qq_63299825/article/details/132307362 2024/10/8 2:17:37

文章目录

    • 一、两栏布局的实现
      • 1. float+margin
      • 2. flaot+BFC
      • 3. 定位+margin
      • 4. flex 布局
      • 5. grid布局
    • 二、三栏布局的实现
      • 1. float + margin
      • 2. float + BFC
      • 3. 定位 + margin(或者定位+BFC)
      • 4. flex布局
      • 5. 圣杯布局
      • 6. 双飞翼布局

一、两栏布局的实现

两栏布局其实就是左侧定宽，右侧自适应的布局

1. float+margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

2. flaot+BFC

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

知识课堂
先来看两个相关的概念:
     ●Box: Box是CSS布局的对象和基本单位，一个页面是由很多个Box组成的，这个Box就是我们所说的盒模型。
     ●Formatting context: 块级上下文格式化，它是页面中的一块渲染区域，并且有一 套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

块格式化上下文(Block Formatting Context, BFC) 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲: BFC是一 -个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC的条件:
●根元素: body;
●元素设置浮动: float除none以外的值;
●元素设置绝对定位: position (absolute、 fixed);
●display值为: inline-block、 table-cell、 table-caption、 flex等 ;
●overflow值为: hidden、 auto、 scroll;

BFC的特点:
●垂直方向上，自.上而下排列，和文档流的排列方式-致。
●在BFC中上下相邻的两个容器的margin会重叠
●计算BFC的高度时，需要计算浮动元素的高度
●BFC区域不会与浮动的容器发生重叠
●BFC是独立的容器，容器内部元素不会影响外部元素●每个元素的左margin值和容器的左border相接触

3. 定位+margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.left {position: absolute;left: 0;width: 100px;height: 300px;background: red;}.right {margin-left: 100px;height: 300px;background: green;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>

4. flex 布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

5. grid布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: grid;grid-template-columns: 100px 1fr;box-sizing: border-box;height: 300px;}.left {background: red;}.right {background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

二、三栏布局的实现

左右定宽，中间自适应

1. float + margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS实现三栏布局1</title><style type="text/css">.left {width: 200px;height: 300px;background-color: #dc698a;float: left;}.middle {height: 300px;background-color: #8cb08b;margin: 0 200px;}.right {width: 200px;height: 300px;background-color: #3eacdd;float: right;}</style></head><body><div class="left">左栏</div><div class="right">右栏</div><div class="middle">中间栏</div></body>
</html>

2. float + BFC

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS实现三栏布局1</title><style type="text/css">.left {width: 200px;height: 300px;background-color: #dc698a;float: left;}.middle {height: 300px;background-color: #8cb08b;overflow: hidden;}.right {width: 200px;height: 300px;background-color: #3eacdd;float: right;}</style></head><body><div class="left">左栏</div><div class="right">右栏</div><div class="middle">中间栏</div></body>
</html>

注意：上面两种方法都必须先渲染right,否则right会被middle挤下来

3. 定位 + margin(或者定位+BFC)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS实现三栏布局3</title><style type="text/css">.container {position: relative;}.left {width: 200px;height: 300px;background-color: #dc698a;position: absolute;}.middle {height: 300px;background-color: #8cb08b;margin: 0 200px;}.right {position: absolute;right: 0;top: 0;width: 200px;height: 300px;background-color: #3eacdd;}</style></head><body><div class="container"><div class="left">左栏</div><div class="middle">中间栏</div><div class="right">右栏</div></div></body>
</html>

4. flex布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {height: 300px;display: flex;}.left,.right {width: 100px;background: red;}.center {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div></div></body>
</html>

5. 圣杯布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>.container {height: 200px;overflow: hidden;padding: 0 200px;}.center {width: 100%;height: 200px;background-color: green;float: left;}.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;position: relative;left: -200px;}.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;position: relative;right: -200px;}</style></head><body><div class="container"><div class="center"></div><div class="left"></div><div class="right"></div></div></body>
</html>

6. 双飞翼布局

相关文章：

CSS 两栏布局和三栏布局的实现

文章目录 一、两栏布局的实现1. floatmargin2. flaotBFC3. 定位margin4. flex 布局5. grid布局 二、三栏布局的实现1. float margin2. float BFC3. 定位 margin(或者定位BFC)4. flex布局5. 圣杯布局6. 双飞翼布局 一、两栏布局的实现 两栏布局其实就是左侧定宽&#xff0c;…...

编程日记 2023/8/20 2:26:46

消息中间件相关面试题

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱发博客的嗯哼&#xff0c;爱好Java的小菜鸟 &#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&#x1f44d;一下博主哦 &#x1f4dd;社区论坛&#xff1a;希望大家能加入社区共同进步…...

编程日记 2023/8/20 2:25:44

成集云 | 电子签署集成腾讯云企业网盘 | 解决方案

源系统成集云目标系统 方案介绍 电子签署是通过电子方式完成合同、文件或其他文件的签署过程。相较于传统的纸质签署&#xff0c;电子签署具有更高效、更便捷、更安全的优势。 在电子签署过程中&#xff0c;使用电子签名技术来验证签署者的身份并确保签署文件的完整性。电子…...

编程日记 2023/8/20 2:24:42

提升大数据技能，不再颓废！这6家学习网站是你的利器！

随着国家数字化转型&#xff0c;大数据领域对人才的需求越来越多。大数据主要研究计算机科学和大数据处理技术等相关的知识和技能&#xff0c;从大数据应用的三个主要层面&#xff08;即数据管理、系统开发、海量数据分析与挖掘&#xff09;出发&#xff0c;对实际问题进行分析…...

编程日记 2023/8/20 2:23:40

uniapp开发小程序-有分类和列表时，进入页面默认选中第一个分类

一、效果&#xff1a; 如下图所示&#xff0c;进入该页面后&#xff0c;默认选中第一个分类&#xff0c;以及第一个分类下的列表数据。 二、代码实现&#xff1a; 关键代码&#xff1a; 进入页面时&#xff0c;默认调用分类的接口&#xff0c;在分类接口里做判断&#xff…...

编程日记 2023/8/20 2:22:39

小程序-uni-app：hbuildx uni-app 安装 uni-icons 及使用

一、官方文档找到uni-icons uni-app官网 二、下载插件 三、点击“打开HBuildX” 四、选择要安装的项目 五、勾选要安装的插件 六、安装后&#xff0c;项目插件目录 根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件&#xff0c;使用组件 <uni-icons type&qu…...

编程日记 2023/8/20 2:21:36

PHP中in_array()函数用法详解

in_array() 函数是PHP中常用的数组函数之一&#xff0c;用于搜索数组中是否存在指定的值。 语法 bool in_array ( mixed $needle , array $haystack [, bool $strict FALSE ] ) 参数描述needle必需。规定要在数组搜索的值。haystack必需。规定要搜索的数组。strict可选。如…...

编程日记 2023/8/20 2:20:34

热电联产在综合能源系统中的选址定容研究（matlab代码）

目录 1 主要内容 目标函数 程序模型 2 部分代码 3 程序结果 1 主要内容 该程序参考《热电联产在区域综合能源系统中的定容选址研究》&#xff0c;主要针对电热综合能源系统进行优化&#xff0c;确定热电联产机组的位置和容量&#xff0c;程序以33节点电网和17节点热网为例…...

编程日记 2023/8/20 2:19:33

校园网安全风险分析

⒈物理层的安全风险分析 网络的物理安全风险主要指网络周边环境和物理特性引起的网络设备和线路的不可用 , 而 造成网络系统的不可用。我们在考虑校园网络安全时&#xff0c;首先要考虑物理安全风险&#xff0c;它是整个 网络系统安全的前提。物理安全风险有&#xff1a;设备…...

编程日记 2023/8/20 2:18:31

kafka--kafka的基本概念-topic和partition

一、kafka的基本概念-topic和partition 1、topic &#xff08;主题 &#xff09; topic是逻辑概念 以Topic机制来对消息进行分类的&#xff0c;同一类消息属于同一个Topic&#xff0c;你可以将每个topic看成是一个消息队列。 生产者&#xff08;producer&#xff09;将消息发…...

编程日记 2023/8/20 2:17:30

【LVS】3、LVS+Keepalived群集

为什么用它&#xff0c;为了做高可用 服务功能 1.故障自动切换 2.健康检查 3.节点服务器高可用-HA Keepalived的三个模块&#xff1a; core&#xff1a;Keepalived的核心&#xff0c;负责主进程的启动、维护&#xff1b;调用全局配置文件进行加载和解析 vrrp&#xff1a;实…...

编程日记 2023/8/20 2:16:27

对前端PWA应用的部分理解和基础Demo

一、什么是PWA应用&#xff1f; 1、PWA简介 ​ 渐进式Web应用&#xff08;Progressive Web App&#xff09;&#xff0c;简称PWA&#xff0c;是 Google 在 2015 年提出的一种使用web平台技术构建的应用程序&#xff0c;官方认为其核心在于Reliable&#xff08;可靠的&#xf…...

编程日记 2023/8/20 2:15:25

CSGO饰品价格会一直下跌吗？市场何时止跌回升？

最后一届巴黎major终于落下帷幕&#xff0c;Vitality小蜜蜂2-0战胜GL成功赢下本次Major冠军&#xff0c;也是首次夺得Major冠军&#xff01;有人欢喜有人忧啊&#xff0c;csgo搬砖的饰品商人们一点也高兴不起来。 4月-5月&#xff0c;csgo皮肤饰品已持续走低快两个月了。手里满…...

编程日记 2023/8/20 2:14:22

线程池原理

一、线程池的定义 线程池&#xff0c;按照配置参数&#xff08;核心线程数、最大线程数等&#xff09;创建并管理若干线程对象&#xff0c;没有任务的时候&#xff0c;这些线程都处于等待空闲状态。如果有新的线程任务&#xff0c;就分配一个空闲线程执行。如果所有线程都处于…...

编程日记 2023/8/20 2:13:19

拷贝构造函数

1. 拷贝构造函数是构造函数的一个重载形式。 2. 拷贝构造函数的参数只有一个且必须是类类型对象的引用&#xff0c;使用传值方式编译器直接报错&#xff0c; 因为会引发无穷递归调用。 class Date { public:Date(int year 1900, int month 1, int day 1){_year year;_mont…...

编程日记 2023/8/20 2:12:17

数据库： MySQL安装部署、主从

单机部署 mkdir -p /opt/soft/archive cd /opt/soft/archivewget -i -c https://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm yum install -y mysql80-community-release-el7-7.noarch.rpm yum-config-manager --enable mysql80-community yum install -y …...

编程日记 2023/8/20 2:11:15

Java IO流（二）IO模型(BIO|NIO|AIO)

概述 Java IO模型同步阻塞IO&#xff08;BIO&#xff09;、同步非阻塞IO&#xff08;NIO&#xff09;、异步非阻塞IO&#xff08;AIO/NIO2&#xff09;,Java中的BIO、NIO和AIO理解为是Java语言对操作系统的各种IO模型的封装 IO模型 BIO(Blocking I/O) 概述 BIO是一种同步并阻…...

编程日记 2023/8/20 2:10:13

java版本spring cloud 企业工程系统管理 工程项目管理系统源码em

工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#xff…...

编程日记 2023/8/20 2:09:11

飞天使-k8s简单搭建

文章目录 k8s概念安装部署-第一版无密钥配置与hosts与关闭swap开启ipv4转发安装前启用脚本开启ip_vs安装指定版本docker 安装kubeadm kubectl kubelet,此部分为基础构建模版 k8s一主一worker节点部署k8s三个master部署,如果负载均衡keepalived 不可用&#xff0c;可以用单节点做…...

编程日记 2023/8/20 2:08:10

java中把一个list转tree的方法

环境 我们有个需求&#xff0c;数据库要存一个无限级联的tree&#xff0c;比如菜单&#xff0c;目录&#xff0c;或者地区等数据&#xff0c;现有两个问题&#xff1a; 问如何设计表。怎么返回给前端一个无线级联的json数据。 思考 第一个问题 在设计表的时候&#xff0c;…...

编程日记 2023/8/20 2:07:08

QT设置widget背景图片

首先说方法&#xff0c;在给widget或者frame或者其他任何类型的控件添加背景图时&#xff0c;在样式表中加入如下代码&#xff0c;指定某个控件&#xff0c;设置其背景。 类名 # 控件名 { 填充方式&#xff1a;图片路径 } 例如&#xff1a; QWidget#Widget {border-image: url…...

编程日记 2023/8/20 2:06:05

【ROS】话题通信--从理论介绍到模型实现(C++)

1.简单介绍 话题通信是ROS中使用频率最高的一种通信模式&#xff0c;话题通信是基于发布订阅模式的&#xff0c;也即:一个节点发布消息&#xff0c;另一个节点订阅该消息。像雷达、摄像头、GPS… 等等一些传感器数据的采集&#xff0c;也都是使用了话题通信&#xff0c;换言之…...

编程日记 2023/8/20 2:05:03

服务器数据恢复-EqualLogic存储RAID5数据恢复案例

服务器数据恢复环境&#xff1a; 一台DELL EqualLogic存储中有一组由16块SAS硬盘组建的RAID5阵列。存储存放虚拟机文件&#xff0c;采用VMFS文件系统&#xff0c;划分了4个lun。 服务器故障&检测&分析&#xff1a; 存储设备上有两个硬盘指示灯显示黄色&#xff0c;存储…...

编程日记 2023/8/20 2:04:00

qsort函数详解

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解qsort函数&#xff0c;如果你觉得我写的不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 文章目录 一. qsort函数参数详解1.数组首元素地址base2.数组的元素个数num和元素所占内存空间大小w…...

编程日记 2023/8/20 2:02:58

C#学习，委托，事件，泛型，匿名方法

目录 委托 声明委托 实例化委托 委托的多播 委托的用途 事件 通过事件使用委托 声明事件 泛型 泛型的特性 泛型方法 泛型的委托 匿名方法 编写匿名方法的语法 委托 类似于指针&#xff0c;委托是存有对某个方法的引用的一种引用类型变量&#xff0c;引用可以在运…...

编程日记 2023/8/20 2:01:56

2023最新版本~KEIL5使用C++开发STM32

先看效果 开始教学 因为是第一次写这个配置教程 我会尽量详细些 打开一个Keil工程 移除本地core 添加在线core 第一次编译代码 不会有报错 修改main.c文件类型为C 点击魔术棒 把ARM编译器修改为V6 第二次编译会报错语法不兼容 我把汇编部分的这些代码做了…...

编程日记 2023/8/20 2:00:55

汽车领域专业术语

1. DMS/OMS/RMS/IMS DMS&#xff1a;即Driver Monitoring System&#xff0c;监测对象为Driver&#xff08;驾驶员&#xff09;。DMS三大核心&#xff1a; OMS&#xff1a;即Occupancy Monitoring System&#xff0c;监测对象为乘客。 RMS&#xff1a;后排盲区检测系统 IMS&…...

编程日记 2023/8/20 1:59:53

H3C交换机如何配置本地端口镜像并在PC上使用Wireshake抓包

环境： H3C S6520-26Q-SI version 7.1.070, Release 6326 Win 10 专业版 Wireshake Version 4.0.3 问题描述： H3C交换机如何配置本地端口镜像并在PC上使用Wireshake抓包 解决方案： 配置交换机本地端口镜像 1.进入系统视图，并创建本地镜像组1 <H3C>system-vie…...

编程日记 2023/8/20 1:58:49

零基础自学：2023 年的今天，请谨慎进入网络安全行业

前言 2023 年的今天&#xff0c;慎重进入网安行业吧&#xff0c;目前来说信息安全方向的就业对于学历的容忍度比软件开发要大得多&#xff0c;还有很多高中被挖过来的大佬。 理由很简单&#xff0c;目前来说&#xff0c;信息安全的圈子人少&#xff0c;985、211 院校很多都才…...

编程日记 2023/8/20 1:57:48

向gitee推送代码

目录 一、Gitee创建仓库 二、将刚刚创建的仓库放到虚拟机上 2.1 https 方式克隆仓库 2.2 ssh的方式克隆仓库 三、本地开发&#xff0c;推送 3.1 查看是否有远程库 3.2 推送代码 3.3 查看是否推送成功 一、Gitee创建仓库 二、将刚刚创建的仓库放到虚拟机上 2.1 https 方式…...

编程日记 2023/8/20 1:56:47

双指针算法实例1（移动零）

常⻅的双指针有两种形式&#xff1a; 1 对撞指针&#xff08;左右指针&#xff09;&#xff1a; a 对撞指针从两端向中间移动。⼀个指针从最左端开始&#xff0c;另⼀个从最右端开始&#xff0c;然后逐渐往中间逼 近 b 终止条件一般是两指针相遇or错过&#xff08;也可能在循…...

编程日记 2023/8/20 1:55:45

C#程序随系统启动例子 - 开源研究系列文章

今天讲讲C#中应用程序随系统启动的例子。 我们知道&#xff0c;应用程序随系统启动&#xff0c;都是直接在操作系统注册表中写入程序的启动参数&#xff0c;这样操作系统在启动的时候就根据启动参数来启动应用程序&#xff0c;而我们要做的就是将程序启动参数写入注册表即可。此…...

编程日记 2023/8/20 1:54:43

最全攻略之人工智能顶会论文发表

最全攻略之人工智能顶会论文发表 1. 人工智能顶会1.1 CCF 顶会列表2023年人工智能顶会时间线 2.人工智能顶会论文发表流程2.1 顶会论文发表流程2.2 顶会论文审稿流程 3.1顶会论文发表指南3.1 顶会论文七要素3.2 顶会论文写作要点 4.人工智能发展趋势4.1 人工智能未来趋势4.2 人…...

编程日记 2023/8/20 1:53:41

Redis基于内存的key-value结构化NOSQL（非关系型）数据库

Redis Redis介绍Redis的优点Redis的缺点Redis的安装Redis的连接Redis的使用Redis中的数据类型String的使用get setsetex（expire）ttlsetnx(not exit)HashList列表（队列）Set集合ZSet集合Redis 通用命令Redis图形客户端Redis在Java中的使用RedisTemplate...

编程日记 2023/8/20 1:52:40

Spring学习笔记+SpringMvc+SpringBoot学习笔记

壹、核心概念&#xff1a; 1.1. IOC和DI IOC&#xff08;Inversion of Control&#xff09;控制反转&#xff1a;对象的创建控制权由程序转移到外部&#xff0c;这种思想称为控制反转。/使用对象时&#xff0c;由主动new产生对象转换为由外部提供对象&#xff0c;此过程种对象…...

编程日记 2023/8/20 1:50:37

如何在 3Ds Max 中准确地将参考图像调整为正确的尺寸？

您是否想知道如何在 3Ds Max 中轻松直观地调整参考图像的大小&#xff0c;而无需借助第三方解决方案、插件或脚本&#xff1f; 我问自己这个问题&#xff0c;并高兴地发现了FFD Box 2x2x2&#xff0c;我无法停止钦佩这个修改器的多功能性。 在本文中&#xff0c;我想与您分享一…...

编程日记 2023/8/20 1:49:32

集简云推出的全国第一款 AI+连接器解决方案产品语聚AI

语聚AI是集简云推出的全国第一款 AI连接器解决方案产品&#xff0c;官网&#xff1a;https://yuju.jijyun.cn 语聚AI包括了多个不同的AI功能&#xff0c;协助企业和个人更好的使用AI语言模型所带来的能力&#xff0c;包括&#xff1a; 应用助手 希望通过AI智能助手帮助您查询C…...

编程日记 2023/8/20 1:48:30

git错误记录

露id没有影响&#xff0c;搞得微软不知道我ip一样 git fatal: 拒绝合并无关的历史的错误解决(亲测有效)...

编程日记 2023/8/20 1:47:28

linux使用jmeter进行压测

1.准备好服务器&#xff0c;这里默认服务器用的系统镜像为contos7.9.2009 2.准备好jmeter的测试计划文件 .jmx 这里默认测试计划的jmx文件在 /nas目录下 3.安装JDK与jmeter进行测试 #创建JDK与jmeter目录&#xff0c;并复制安装文件 mkdir /jmeter mkdir /jmeter/jav…...

编程日记 2023/8/20 1:46:25

leetcode 139. 单词拆分

2023.8.18 本题可以看作完全背包问题&#xff0c;字符串s为背包&#xff0c;字符串列表worddict中的字符串为物品。由于本题的物品集合是排列问题(即物品的排列顺序对结果有影响)&#xff0c;所以遍历顺序为&#xff1a;先遍历背包再遍历物品。 接下来看代码&#xff1a; clas…...

编程日记 2023/8/20 1:45:23

若依的使用(token补充、HTTPS（网络安全）、分页前后端配置)

本文章转载于公众号&#xff1a;王清江唷,仅用于学习和讨论&#xff0c;如有侵权请联系 QQ交流群&#xff1a;298405437 本人QQ&#xff1a;4206359 具体视频地址:8 跑后端_哔哩哔哩_bilibili 1、HTTP&#xff1f; 曾经我们在讲JWT的时候&#xff0c;当时JWT需要配合https…...

编程日记 2023/8/20 1:44:22

Java源码分析（一）Integer

当你掌握Java语言到了一定的阶段&#xff0c;或者说已经对Java的常用类和API都使用的行云流水。你会不会有一些思考&#xff1f;比如&#xff0c;这个类是如何设计的&#xff1f;这个方法是怎么实现的&#xff1f;接下来的一系列文章&#xff0c;我们一起学习下Java的一些常见类…...

编程日记 2023/8/20 1:43:21

WebRTC音视频通话-WebRTC视频自定义RTCVideoCapturer相机

WebRTC音视频通话-WebRTC视频自定义RTCVideoCapturer相机 在之前已经实现了WebRTC调用ossrs服务&#xff0c;实现直播视频通话功能。但是在使用过程中&#xff0c;RTCCameraVideoCapturer类提供的方法不能修改及调节相机的灯光等设置&#xff0c;那就需要自定义RTCVideoCaptur…...

编程日记 2023/8/20 1:42:20

【基于鲲鹏及openEuler20.03TLS下MySQL8.0.17性能调优】

【基于鲲鹏及openEuler20.03TLS下MySQL8.0.17性能调优】 一、环境说明二、实验过程三、实验小结 一、环境说明 华为云ECS 规格&#xff1a;8vCPU 32G arm架构操作系统&#xff1a;openEuler 20.03.TLSMySQL版本&#xff1a;8.0.17 二、实验过程 创建用户及用户组&#xff1a;…...

编程日记 2023/8/20 1:41:18

GRPC 学习记录

GRPC 安装 安装 grpcio、grpcio-tools、protobuf、 pip install grpcio -i https://pypi.tuna.tsinghua.edu.cn/simple pip install grpcio-tools -i https://pypi.tuna.tsinghua.edu.cn/simple pip install protobuf -i https://pypi.tuna.tsinghua.edu.cn/simple常用类型 p…...

编程日记 2023/8/20 1:40:16

C++语言的QT写软件界面，结合python深度学习模型的综合应用处理方案

C与python问题合集&#xff1a; 后面内容涉及到api的创建问题 如果我用C语言的QT写软件界面&#xff0c;然后用python语言去写和人工智能相关的东西。就比如说一些模型&#xff0c;那么现在我想将用python写的模型放在QT写的软件当中调用&#xff0c;那么请问是否会导致C语言…...

编程日记 2023/8/20 1:39:14

Linux环境下python连接Oracle教程

下载Oracle client需要的 安装包 rpm包下载地址&#xff1a;Oracle官方下载地址 选择系统版本 选择Oracle版本 下载3个rpm安装包 oracle-instantclient12.2-basic-12.2.0.1.0-1.i386.rpm oracle-instantclient12.2-devel-12.2.0.1.0-1.i386.rpm oracle-instantclient12.2-sq…...

编程日记 2023/8/20 1:38:13

第 7 章 排序算法(1)

7.1排序算法的介绍 排序也称排序算法(Sort Algorithm)&#xff0c;排序是将一组数据&#xff0c;依指定的顺序进行排列的过程。 7.2排序的分类&#xff1a; 内部排序: 指将需要处理的所有数据都加载到**内部存储器(内存)**中进行排序。外部排序法&#xff1a; 数据量过大&am…...

编程日记 2023/8/20 1:37:11

wsl，字体乱码问题

配置wsl&#xff0c;字体乱码问题 一、前言 用zsh配置好wsl&#xff0c;每次打开还是会出现乱码&#xff0c;只有再新打开一个终端才会显示字体 如下图&#xff1a;第一次打开&#xff0c;出现乱码 如图&#xff1a;按加号&#xff0c;再开一个新终端才会显示字体。 二、解…...

编程日记 2023/8/20 1:36:09

【NetCore】10-路由定义

文章目录 路由与终结点&#xff1a;如何规划好Web Api1. 路由1.1 路由映射1.2 路由注册方式1.3 路由约束总结: Web Api定义 路由与终结点&#xff1a;如何规划好Web Api 1. 路由 1.1 路由映射 路由系统核心作用是指URL和应用程序Controller的对应关系的一种映射 这种映射的作…...

编程日记 2023/8/20 1:35:08