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

Web - CSS3浮动定位与背景样式

news 来源：原创 2025/5/11 4:31:43

概述

这篇文章主要介绍了 CSS3 中的浮动定位、背景样式、变形效果等内容。包括 BFC 规范与创建方法、浮动的功能与使用要点、定位的多种方式及特点、边框与圆角的设置、背景的颜色、图片等属性、多种变形效果及 3D 旋转等，还提到了浏览器私有前缀。

BFC规范与浏览器差异

BFC,(Box Formatting Content 块级格式化上下文)是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，原因是这个盒子没有行成BFC。

创建BFC

1、float的值不是none

2、position的值不是static 就是relative

3、display的值是inline-block、flex、inline-flex

4、overflow: hidden

浏览器差异

IE6、7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性，让盒子拥有layout

浮动

浮动的最本质功能，用来实现并排。

浮动的使用要点：

1、要浮动，并排的盒子都要设置浮动。
2、父盒子要有足够的宽度，否则子盒子会掉下去。
3、子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素。

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能设置宽度和高度，即使他是span、a标签。

使用浮动布局网页

注意事项：

1、垂直显示的盒子不需要浮动，不要设置浮动，只有并排显示的盒子才需要浮动！

2、大盒子带着小盒子跑，一个大盒子中，又是一个小天地，内部可以继续使用浮动。

定位

脱离标准文档流的方法：浮动、绝对定位、固定定位。相对定位是不会脱离文档流的。

固定定位

固定定位只能以页面为参考点，没有子固父相这个性质，固定定位脱离标准文档流。

p {position: fixed;top: 100px;
}

绝对定位

盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。

p {position: absolute;top: 100px;
}

位置描述词:left到左边的距离，right是到右边的距离，top是到上边的距离，bottom是到下面的距离。

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖。

绝对定位的盒子并不是永远以浏览器作为基准点，会以自己的祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相。

绝对定位的盒子垂直居中：

p {position: absolute;top: 50%;margin-top: "自己高度的一半";
}

z-index属性是一个没有单位的正整数，数值大的能够压住数值小的。

相对定位

盒子可以相对自己原来的位置进行调整，成为相对定位。

位置描述词:left向左边移动的距离，right向右边移动的距离，top向上边移动的距离，bottom向下面移动的距离，值可以为负数，既往相反方向移动。

p {position: relative;top: 100px;left: 100px;
}

相对定位的元素，会在老家留坑，本质上仍然是在原来的位置，只不过渲染在新的位置而已，渲染的图行可以比喻成影子，不会对其他元素产生任何影响。

相对定位的用途:相对定位用来微调元素的位置，相对定位的元素，可以当做绝对定位的参考盒子。

边框与圆角

边框

border属性的三要素:线宽度、线型、线颜色。

div {border: 1px solid red;
}p {border-width: 10px;   /**线宽*/border-style: dotted; /**线型*/border-color:red;     /**线颜色*/
}

线型值	意义
solid	实线
dashed	虚线
dotted	点状线

边框三要素可以拆分为小属性：

线型值	意义
solid	实线
dashed	虚线
dotted	点状线

border-left:none;属性即可去掉左边框，以此类推。

盒子阴影

css中使用box-shadow属性值来设置阴影，默认是外部阴影，添加inset属性是内部阴影。

 /**外部阴影*/.box2 {width: 200px;height: 200px;background-color: white;border: 1px solid #000;box-shadow: 2px 2px 10px 10px rgba(0,0,0,.4);margin-bottom: 10px;
}/**内部阴影*/
.box3 {width: 200px;height: 200px;background-color: white;border: 1px solid #000;box-shadow: inset 0px 0px 10px red;margin-bottom: 10px;
}

使用box-shadow属性值可以用逗号隔开多个，表示携带多个阴影,包括内外阴影都可以。

 .box4 {width: 200px;height: 200px;background-color: white;border: 1px solid #000;box-shadow: 2px 2px 30px red, 4px 4px 40px blue, 6px 6px 50px green, inset 0px 0px 6px orange;margin-bottom: 10px;
}

圆角

css3中使用border-radius属性设置圆角。

.box2 {width: 200px;height: 200px;border: 1px solid #000;border-radius: 20px;
}

背景

背景颜色

background-color属性表示背景颜色，背景颜色可以使用十六进制、rgb()、rgba()表示法表示，padding区域是有背景颜色的。

背景图片

css中使用background-image属性用来设置背景图片，图片路径要写到url圆括号中，可以是相对路径，也可以是http://开头的绝对路径。

如果样式表是外链的，那么要书写从css出发到图片的路径，而不是从html出发。

.box2 {background-image: url("images/bg.jpg");
}

背景图片位置

background-position属性可以设置背景图片出现在盒子的什么位置。

css精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做css精灵技术，也叫作css雪碧图。

css精灵可以减少Http请求数，加快网页显示速度。缺点也很明显：不方便测量、后期改动麻烦。

背景尺寸

background-size属性用来设置背景图片的尺寸，兼容到IE9，值也可以用百分数来设置，表示为盒子宽、高的百分之多少，需要等比例设置的值，写auto。

contain和cover是两个特殊的属性，contain表示将背景图片智能改变尺寸以容纳到盒子里，cover表示将背景图片智能改变尺寸以撑满盒子。

背景裁切

background-clip属性用来设置元素的背景裁切到那个盒子，兼容到IE9。

值	意义
border-box	背景延伸至边框(默认值)
padding-box	背景延伸至内边(padding)，不会绘制到边框处(仅在dotted、dashed边框可察觉)
content-box	背景被剪裁至内容区

背景固定

background-attachment属性决定背景图像的位置是在视口内固定，或者随着包含他的区块滚动。

值	意义
fixed	自己滚动条不动，外部滚动条不动
local	自己滚动条动，外部滚动条动
scroll	自己滚动条不动，外部滚动条动(默认值)

背景重复

background-repeat属性用来设置背景的重复模式

值	意义
repeat	x、y均平铺（默认）
repeat-x	x平铺
repeat-y	y平铺
no-repeat	不平铺

背景线性渐变

盒子的背景图片可以使用属性linear-gradient形式创建线性渐变背景。

.box {width: 200px;height: 200px;background-image: linear-gradient(to right,blue,red);
}

渐变方向也可以写成度数。

.box {width: 200px;height: 200px;background-image: linear-gradient(45deg,blue,red);
}

背景径直渐变

盒子的背景图片可以使用属性linear-gradient形式创建线性渐变背景,第一个参数指定的是圆心坐标。

.box {width: 200px;height: 200px;background-image: radial-gradient(50% 50%,red,blue);
}

浏览器私有前缀

不同浏览器有不同的私有前缀，用来对试验性质的css属性加以标识。

品牌	前缀
Chrome 、Safari	-webkit-
Firefox	-moz-
IE、Edge	-ms-
Opera	-o-

2D效果

旋转变形

css3样式中使用transform属性的值设置为rotate,即可实现旋转变形，若角度为正，则顺时针方向旋转，否则逆时针方向旋转,deg是旋转角度单位不能省略。

.box {width: 200px;height: 200px;background-color: #1b77cc;transform: rotate(45deg);
}

可以使用transform-origin属性设置自己的自定义变换原点，默认是绕着自己位置的中心点。

.box {width: 200px;height: 200px;transform: rotate(45deg);transform-origin: 0 0 ;
}

缩放变形

css3样式中使用transform属性的值设置为scale,即可实现缩放变形，当数值大于1，表示放大元素，当元素小于1，表示缩小元素。

斜切变形

css3样式中使用transform属性的值设置为skew,即可实现缩放变形，skew有两个参数，分别是x斜切角度，y斜切角度。

.box {width: 200px;height: 200px;background-color: #6f42c1;transform: skew(10deg,20deg);
}

位移变形

css3样式中使用transform属性的值设置为translate,即可实现位移变形,和相对定位非常像，位移变形也会老家留坑，形影分离。

.box {width: 200px;height: 200px;background-color: #6f42c1;transform: translate(100px,200px);
}

3D旋转

css3样式中使用transform属性的值设置为rotateX、rotateY,即可实现绕横轴、纵轴旋转，rotateZ(10deg)是平面旋转。

3D旋转虽然简单，但是3D效果存在舞台概念，必须设置perspective属性，用来定义透视强度，可以理解为人眼到舞台的距离，单位是px。

<body><div class="box1"><p></p></div><div class="box2"><p></p></div><div class="box3"><p></p></div>
</body>

/**旋转X轴*/
.box1 {width: 202px;height: 202px;border: 1px solid #000;margin: 50px auto;perspective: 300px;
}.box1 p {transform: rotateX(30deg);
}/**旋转Y轴*/
.box2 {width: 202px;height: 202px;border: 1px solid #000;margin: 50px auto;perspective: 300px;
}.box2 p {transform: rotateY(30deg);
}/**同时旋转X轴、Y轴*/
.box3 {width: 202px;height: 202px;border: 1px solid #000;margin: 50px auto;perspective: 300px;
}.box3 p {transform: rotateX(30deg) rotateY(30deg);
}

Web - CSS3浮动定位与背景样式

概述这篇文章主要介绍了 CSS3 中的浮动定位、背景样式、变形效果等内容。包括 BFC 规范与创建方法、浮动的功能与使用要点、定位的多种方式及特点、边框与圆角的设置、背景的颜色、图片等属性、多种变形效果及 3D 旋转等，还提到了浏览器私有前缀。 BFC规范与浏览…...

编程日记 2025/5/11 4:31:43

VUE之组件通信（二）

1、v-model v-model的底层原理：是:value值和input事件的结合 $event到底是啥？啥时候能.target 对于原生事件，$event就是事件对象 ，能.target对应自定义事件，$event就是触发事件时，所传递的数据&#xff…...

编程日记 2025/5/7 20:52:34

Gauss高斯:建表语法,存储方式,OLTP和OLAP,系统时间,数组,分组(grouping set,rollup)

数据库和表的语法数据库表 oracle,高斯, hive的默认存储方式都是列式存储存储方式高斯数据库（GaussDB）支持列式存储和行式存储 OLTP 与 OLAP OLTP（联机事务处理，Online Transaction Processing）是一种用于管理…...

编程日记 2025/5/2 1:25:51

Java基础进阶

Java基础进阶异常概述异常就是程序出现了不正常的情况具体分为：Throwable—>(Error Exception);Exception—>(RuntimeException 非RuntimeException) Throwable类是Java语言中所有错误和异常的祖宗类；（上面还有Object类) Thr…...

编程日记 2025/5/8 2:39:48

【数据结构】链表应用1

链表应用面试题 02.02.返回倒数第k个节点题目描述思路解题过程复杂度查找相同后缀题目描述解题思路完整代码： 删除绝对值相等的节点题目描述解题思路代码面试题 02.02.返回倒数第k个节点题目描述实现一种算法，找出单向链表中倒数第 k 个节点。返回…...

编程日记 2025/5/7 11:36:01

python gltf生成预览图

使用Python生成GLTF模型的预览图随着3D技术的不断发展，GLTF（GL Transmission Format）逐渐成为了Web和移动应用程序中最流行的3D文件格式之一。GLTF文件不仅能以较小的体积存储复杂的3D模型，还支持动画、材质、光照和纹理等特性。…...

编程日记 2025/5/1 4:45:14

HTTP和HTTPS协议详解

HTTP和HTTPS协议详解 HTTP详解什么是http协议http协议的发展史http0.9http1.0http1.1http2.0 http协议的格式URI和URL请求request响应response http协议完整的请求与响应流程 HTTPS详解为什么使用HTTPSSSL协议HTTPS通信过程TLS协议 HTTP详解什么是http协议 1、全称Hyper Tex…...

编程日记 2025/5/10 8:48:12

实战：利用百度站长平台加速网站收录

本文转自：百万收录网原文链接：https://www.baiwanshoulu.com/33.html 利用百度站长平台加速网站收录是一个实战性很强的过程，以下是一些具体的步骤和策略： 一、了解百度站长平台百度站长平台是百度为网站管理员提供的一系列工…...

编程日记 2025/5/5 14:41:58

专门记录台式电脑常见问题

1、蓝屏死机，检查内存硬盘和cpu 2、拆内存条，用橡皮擦金手指 3、放主板静电，扣主板电池 4、系统时间不正确，主板电池没电 5、开机键坏了 6、电脑主机的风扇转，正常通电运行，但显示器没信号。看键盘的num键&…...

编程日记 2025/5/7 9:20:42

数据库系统概念第六版记录一

1.关系型数据库关系型数据库（Relational Database，简称 RDB）是基于关系模型的一种数据库，它通过表格的形式来组织和存储数据。每个表由若干行（记录）和列（字段）组成，数据…...

编程日记 2025/5/11 3:36:13

本地Ollama部署DeepSeek R1模型接入Word

目录 1.本地部署DeepSeek-R1模型 2.接入Word 3.效果演示 4.问题反馈上一篇文章办公新利器：DeepSeekWord，让你的工作更高效-CSDN博客https://blog.csdn.net/qq_63708623/article/details/145418457?spm1001.2014.3001.5501https://blog.csdn.net/qq…...

编程日记 2025/5/3 22:49:30

Meta Sapiens AI论文解读：人类视觉模型基石初现，AI 未来走向何方？

一、引言在本文中，我们将深入探讨 Meta AI 的一项新成果，该成果发表于一篇题为《Sapiens：人类视觉模型的基础》的研究论文中。这篇论文介绍了一系列模型，这些模型针对四项以人类为中心的基本任务，正如我们在上面的演示…...

编程日记 2025/5/11 4:16:32

文章目录输入类控件QLineEdit Text EditCombo BoxSpin BoxDialSlider多元素控件QListWidget TableWidetTreeWidgetQGroupBoxTab Widget# QVBoxLayout# QHBoxLayoutQGridLayoutQFormLayout 输入类控件 QLineEdit 例如： 实现一个用户输入姓名密码电话性别的功能…...

编程日记 2025/5/9 0:28:43

一键开启/关闭deepseek

一键开启/关闭 Deepseek对应下载的模型一键开启 Deepseek，一键关闭Deepseek双击对应的bat，就可以启动https://mbd.pub/o/bread/Z56YmpZvbat 下载：https://mbd.pub/o/bread/Z56YmpZv 可以自己写下来，保存成bat文件，也可…...

编程日记 2025/5/6 19:57:04

gitea - fatal: Authentication failed

文章目录 gitea - fatal: Authentication failed概述run_gitea_on_my_pkm.bat 笔记删除windows凭证管理器中对应的url认证凭证启动gitea服务端的命令行正常用 TortoiseGit 提交代码备注END gitea - fatal: Authentication failed 概述本地的git归档服务端使用gitea. 原来的用…...

编程日记 2025/5/1 22:39:57

Spring AI 智能体通过 MCP 集成本地文件数据

作者：刘军 Model Context Protocol（MCP）简介模型上下文协议（即 Model Context Protocol，MCP） [ 1] 是一个开放协议，它规范了应用程序如何向大型语言模型（LLM）提供上下…...

编程日记 2025/5/4 22:05:53

音视频入门基础：RTP专题（5）——FFmpeg源码中，解析SDP的实现

一、引言 FFmpeg源码中通过ff_sdp_parse函数解析SDP。该函数定义在libavformat/rtsp.c中： int ff_sdp_parse(AVFormatContext *s, const char *content) {const char *p;int letter, i;char buf[SDP_MAX_SIZE], *q;SDPParseState sdp_parse_state { { 0 } }, *s1…...

编程日记 2025/4/30 22:48:50

MyBatis XML文件配置

目录一、配置连接字符串和MyBatis 二、书写持久层代码 2.1 添加Mapper接口 2.2 添加UserlnfoXMLMapper.xml 三、增删改查 3.1 、增（Insert） 3.2、删（Delete) 3.3、改 (Update) 3.4、查 (Select) MyBatisXML的方式需要以下两步&am…...

编程日记 2025/5/11 4:27:19

【Leetcode 热题 100】1143. 最长公共子序列

问题背景给定两个字符串 t e x t 1 text_1 text1 和 t e x t 2 text_2 text2，返回这两个字符串的最长公共子序列的长度。如果不存在公共子序列 ，返回 0 0 0。一个字符串的子序列是指这样一个新的字符串：它是由原字符串在不改变…...

编程日记 2025/5/9 22:31:27

【算法】动态规划专题④ ——LCS（最长公共子序列）+ LPS（最长回文子序列） python

目录前置知识LCS举一反三LPS 前置知识【算法】动态规划专题③ ——二维DP python 子序列定义为： 不改变剩余字符顺序的情况下，删除某些字符或者不删除任何字符形成的一个序列。 LCS 最长公共子序列 https://www.lanqiao.cn/problems/1189/learning/?p…...

编程日记 2025/5/9 7:21:03

Cesium点集中获取点的id，使用viewer.value.entities.getById报错的解决方法

错误代码： viewer.value.entities.getById(pickedObject.id) 报错： 可以正常获取movement.position但是一直出现如下报错，无法获得航点的id，通过断点定位为 viewer.value.entities.getById(pickedObject.id)导致的报错解决方…...

编程日记 2025/5/10 14:29:58

360手机刷机 360手机解Bootloader 360手机ROOT

360手机刷机 360手机解Bootloader 360手机ROOT 问：360手机已停产，现在和以后，能刷机吗？ 答：360手机，是肯定能刷机的 360手机资源下载网站 360手机-360手机刷机RootTwrp 360os.top 360rom.github.io 一、…...

编程日记 2025/5/7 7:15:45

深度探索DeepSeek-R1：AI大模型的本地应用与个人知识库构建

深度探索DeepSeek-R1：AI大模型的本地应用与个人知识库构建引言在当今这个信息爆炸的时代，如何高效地存储、处理和获取知识，已经成为每个人面临的挑战。想象一下，如果你能在没有互联网连接的情况下，构建一个属于自己…...

编程日记 2025/5/10 17:43:47

LabVIEW图像采集与应变场测量系统

开发了一种基于LabVIEW的图像采集与应变场测量系统，提供一种高精度、非接触式的测量技术，用于监测物体的全场位移和应变。系统整合了实时监控、数据记录和自动对焦等功能，适用于工程应用和科学研究。项目背景传统的位移和应变测量技术往往…...

编程日记 2025/5/6 10:26:01

解决DeepSeek服务器繁忙问题：本地部署与优化方案

deepseek服务器崩了，手把手教你如何在手机端部署一个VIP通道！ 引言随着人工智能技术的快速发展，DeepSeek等大语言模型的应用越来越广泛。然而，许多用户在使用过程中遇到了服务器繁忙、响应缓慢等问题。本文将探讨如何通过本地部…...

编程日记 2025/5/9 3:51:48

今日AI和商界事件(2025-02-05)

今日AI领域的相关事件主要包括以下几个方面： 一、DeepSeek引发全球关注性能与成本优势： DeepSeek推出的R1模型性能出色，成本较低，在全球AI行业引发震动。该模型在数学、代码处理等方面性能优异，受到广泛赞誉。平台…...

编程日记 2025/5/11 4:29:36

SQL 秒变 ER 图 sql转er图

🚀SQL 秒变 ER 图，校园小助手神了！ 学数据库的宝子们集合🙋‍♀️ 是不是每次碰到 SQL 转 ER 图就头皮发麻？看着密密麻麻的代码，脑子直接死机，好不容易理清一点头绪，又被复杂的表关…...

编程日记 2025/5/10 8:15:37

SQL server 创建DB Link 详解

在日常工作中，经常涉及到跨库操作，为使跨数据库的操作变得更加灵活高效，我们可以在 SQL Server 中建立数据库链接（ DB Link），实现 SQL Server 数据库与其他数据库（如 Oracle, MySQL 等&#xff…...

编程日记 2025/5/7 5:23:22

25.2.5学习记录

今天主要学的是哈希表的理论知识，但是都是c实现，C语言的代码实现还没有完全搞明白。在写题的时候，懵懂的学着正确代码，用C语言模拟实现哈希表去解题。在哈希表的理论知识中，学到哈希函数，了解哈希冲突产…...

编程日记 2025/5/9 8:34:09

C# List 列表综合运用实例⁓Hypak原始数据处理编程小结

C# List 列表综合运用实例⁓Hypak原始数据处理编程小结 1、一个数组解决很麻烦引出的问题1.1、RAW 文件尾部数据如下:1.2、自定义标头 ADD 或 DEL 的数据结构如下： 2、程序 C# 源代码的编写和剖析2.1、使用 ref 关键字，通过引用将参数传递，以…...

编程日记 2025/4/30 19:48:25

不可信的搜索路径（CWE-426）

漏洞描述：程序使用关键资源时（如动态链接库、执行文件、配置文件等）没有明确的指定资源的路径，而是依赖操作系统去搜索资源，这种行为可能被攻击者利用，通过在搜索优先级较高的目录放置不良资源，…...

编程日记 2025/5/7 11:27:59

Unity 2D实战小游戏开发跳跳鸟 - 记录显示最高分

上一篇文章中我们实现了游戏的开始界面，在开始界面中有一个最高分数的UI，本文将接着实现记录最高分数以及在开始界面中显示最高分数的功能。添加跳跳鸟死亡事件要记录最高分，则需要在跳跳鸟死亡时去进行判断当前的分数是否是最高分，如果是最高分则进行记录，如果低于之前…...

编程日记 2025/5/11 4:29:36

openeuler 22.03 lts sp4 使用 cri-o 和静态 pod 的方式部署 k8s-v1.32.0 高可用集群

前情提要整篇文章会非常的长…可以选择性阅读，另外，这篇文章是自己学习使用的，用于生产，还请三思和斟酌静态 pod 的部署方式和二进制部署的方式是差不多的，区别在于 master 组件的管理方式是 kubectl 还是 systemctl有 kubeadm 工具，为什么还要用静态 pod 的方式部署？…...

编程日记 2025/5/11 4:10:01

穷举vs暴搜vs深搜vs回溯vs剪枝系列一＞黄金矿工

目录决策树：代码设计代码： 决策树： 代码设计代码： class Solution {boolean[][] vis;int ret,m,n;public int getMaximumGold(int[][] grid) {m grid.length;n grid[0].length;vis new boolean[m][n]; for(int i 0; i <…...

编程日记 2025/5/11 4:23:54

SQL Server配置管理器无法连接到 WMI 提供程序

目录第一步第二部第一步发现没有资源管理器在文件夹找到管理器打开发现报这个错误配置管理器无法连接到 WMI 提供程序第二部 https://blog.csdn.net/thb369208315/article/details/126954074...

编程日记 2025/5/6 21:36:23

微信小程序获取openid和其他接口同时并发请求如何保证先获取到openid

在微信小程序中，如果你需要并发请求获取 openid 和其他接口的数据，并且希望确保先获取到 openid 之后再进行后续操作，可以考虑以下几种方法：方法一：使用 Promise 链 1, 先请求 openid：使用 Promise 来请求 openid。 2, 在获取到 openid 后再请求其他接口。 function g…...

编程日记 2025/5/11 4:28:24

为AI聊天工具添加一个知识系统之87 详细设计之28 Derivation 统一建模元模型之1

文本要点要点 Derivation 统一建模元模型 Derivation 统一建模元模型：意识原型的祖传代码，即支撑程序框架的符号学中的自然和逻辑树。这棵树的雏形中描述了三种建模工件：语用钩子，语法糖和语义胶水。三种工件对应的三“…...

编程日记 2025/5/8 8:43:26

java进阶知识点

java回收机制浅谈java中的反射依赖注入的简单理解通过接口的引用和构造方法的表达，将一些事情整好了反过来传给需要用到的地方~ 这样做得好处：做到了单一职责，并且提高了复用性，解耦了之后，任你如何实现&#xf…...

编程日记 2025/5/7 12:47:05

63.视频推荐的算法|Marscode AI刷题

1.题目问题描述西瓜视频正在开发一个新功能，旨在将访问量达到80百分位数以上的视频展示在首页的推荐列表中。实现一个程序，计算给定数据中的80百分位数。例如：假设有一个包含从1到100的整数数组，80百分位数的值为80&#xf…...

编程日记 2025/5/6 15:04:06

19.[前端开发]Day19-王者荣项目耀实战(二)

01_(掌握)王者荣耀-main-banner展示实现完整代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewpor…...

编程日记 2025/5/5 7:03:38

Leetcode面试高频题分类刷题总结

https://zhuanlan.zhihu.com/p/349940945 以下8个门类是面试中最常考的算法与数据结构知识点。排序类（Sort）： 基础知识：快速排序（Quick Sort）， 归并排序（Merge Sort）的…...

编程日记 2025/5/1 23:04:04

JPA使用@EntityGraph立即加载关联实体

在JpaRepository接口中实现自定义查询的时候，必然会遇到一个问题，通过findBy等语句查询出来的结果通常情况下不会加载到关联的实体。例如我有一个Material类，其中有一个属性supplier使用了多对一关联到Supplier类，并开启懒加载&am…...

编程日记 2025/5/7 12:14:40

python多版本管理工具之pyenv

pyenv 是一个用于管理多个 Python 版本的工具，允许用户在同一台机器上轻松安装、切换和隔离不同版本的 Python 解释器。它特别适合需要同时处理多个项目的开发者（例如，不同项目依赖不同 Python 版本的情况）。以下是 pyenv 的详细指南：本文基于Ubuntu 22.04版本进行安装，…...

编程日记 2025/5/10 17:25:04

107，【7】buuctf web [CISCN2019 华北赛区 Day2 Web1]Hack World

这次先不进入靶场看到红框里面的话就想先看看uuid是啥定义与概念 UUID 是 Universally Unique Identifier 的缩写，即通用唯一识别码。它是一种由数字和字母组成的 128 位标识符，在理论上可以保证在全球范围内的唯一性。UUID 的设计目的是让分布式系…...

编程日记 2025/5/7 1:57:12

9. k8s二进制集群之kube-controller-manager部署

同样在部署主机上创建证书请求文件（为之后的证书生成做准备）根据上面的证书文件创建证书（结果会在当前目录下产生kube-controller-manager证书）创建kube-controller-manager服务配置文件创建kube-controller-manager服务启动文件同步kube-controller-manager证书到对应mast…...

编程日记 2025/5/11 0:24:02

keil 单步调试技巧

一、常见错误分析 warningerror警告错误不影响编译过程能够输出Hex文件无法完成编译不输出Hex文件注意的是，warning的信息是要去关注的。下面的UNCALLED SEGMENT除外二、单步调试配置 1、在keil中添加单片机型号本文不详细介绍，如有需要可查看这篇文章：...

编程日记 2025/5/1 23:48:10

[leetcode]两数之和等于target

源代码 #include <iostream> #include <list> #include <iterator> // for std::prev using namespace std; int main() { int target 9; list<int> l{ 2, 3, 4, 6, 8 }; l.sort(); // 确保列表是排序的，因为双指针法要求输入是…...

编程日记 2025/5/6 8:08:33

Go语言的转义字符

文章目录 1. Go语言的转义字符(escapechar)2. 小结和提示 1. Go语言的转义字符(escapechar) 说明:常用的转义字符有如下: \t : 表示一个制表符，通常使用它可以排版\n ：换行符\\ ：一个\\" ：一个"\r ：一个回…...

编程日记 2025/5/1 23:47:38

低代码系统-产品架构案例介绍、蓝凌（十三）

蓝凌低代码系统，依旧是从下到上，从左至右的顺序。技术平台h/iPaas 指低层使用了哪些技术，例如：微服务架构，MySql数据库。个人认为，如果是市场的主流，就没必要赘述了。新一代门户门户设计器&a…...

编程日记 2025/5/7 2:31:59

【大数据技术】搭建完全分布式高可用大数据集群（Hadoop+MapReduce+Yarn）

搭建完全分布式高可用大数据集群（Hadoop+MapReduce+Yarn） jdk-8u361-linux-x64.tarhadoop-3.3.6.tar.gz注：请在阅读本篇文章前，将以上资源下载下来。写在前面本文主要介绍搭建完全分布式高可用集群Hadoop+MapReduce+Yarn的详细步骤。注意：统一约定将软件安装包存放…...

编程日记 2025/5/4 22:51:49

概述