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

深入理解CSS基础【代码审计实战指南】

news 文章来源：https://blog.csdn.net/2301_80064376/article/details/140478747 2024/9/22 10:01:09

文章目录

  • 为什么需要css
  • CSS语法
      • CSS的组成
      • css注释：
  • 快速入门示例：
  • 常用样式
    • 字体颜色和边框
      • 颜色介绍
      • 颜色示例：
      • 边框
      • 边框的宽度与高度
    • 字体样式
    • 背景样式
    • 文本居中
  • 字体颜色和边框
      • 颜色介绍
      • 颜色示例：
      • 边框
      • 边框的宽度与高度
  • 字体样式
  • 背景样式
  • 文本居中
  • css使用三种方式
  • CSS选择器
    • 元素选择器
    • ID选择器
    • class选择器

学习参考：CSS 教程 (w3school.com.cn)

为什么需要css

  1. 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，费心费力。所以CSS就出现了。
  2. 使用CSS将HTML页面的 内容与样式分离提高web开发的工作效率(针对前端开发）
  3. CSS 可以让 html 元素(内容)+ 样式(CSS)分离，更好的控制页面

CSS语法

  1. CSS的组成

  2. 在这里插入图片描述

    1. 选择器

    2. 声明

      1. 由属性与值组成
      2. 用分号分隔

  3. css注释：

    1. /注释内容/

快速入门示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css 快速入门</title>
</head>
<body><div>hello,北京</div><br/><div>hello,上海</div><br/><div>hello,天津</div><br/>
</body>
</html>
<!--课堂代码-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css 快速入门</title><!--老师解读1. 在 head 标签内，出现了 <style type="text/css"></style>2. 表示要写 css 内容3. div{} 表示对 div 元素进行样式的指定4. width: 300px; (属性) 表示对 div 样式的具体指定，可以有多个5. 如果有多个，使用 ; 分开即可6. 当运行页面时，div 就会被 div{} 渲染，修饰--><style type="text/css">div {width: 200px;height: 100px;background-color: gold;}</style>
</head>
<body><!--先使用传统的方法--><div>hello,北京</div><br/><div>hello,上海</div><br/><div>hello,天津</div><br/><div>hello,深圳</div><br/>
</body>
</html>

在这里插入图片描述

常用样式

字体颜色和边框

  1. 颜色介绍

    1. 颜色可以写颜色名 比如 green，也可以写rgb 值比如rgb(200,200,200)和十六进制表示值比如#70809

  2. 颜色示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>颜色</title><style type="text/css">/* 为了讲课方便，我们就在这里写 css 样式 *//*说明:颜色可以写颜色名 比如 green，也可以写 rgb 值 比如 rgb(200, 200, 200) 和十六进制表示值比如 #708090color: rgb(255, 222, 1); // color: #ff7d44; // color: red;*/div {/* 有三种方式，指定颜色1. 英文2. 16进制 #ff7d44 [使用最多]3. 三原色 rgb(100, 100, 100)*/color: #ff7d44;}</style></head><body><div>韩顺平教育</div></body></html>

    在这里插入图片描述

  3. 边框

    1. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>边框</title><style type="text/css">div {width: 300px;height: 100px;border: 1px dashed blue;}</style></head><body><div>韩顺平教育</div></body></html>

    在这里插入图片描述

  4. 边框的宽度与高度

    1. 介绍：

      1. 宽度/高度像素值：100px；也可以是百分比值：50%

    2. 代码示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在这里插入图片描述

字体样式

  1. 介绍

    1. font-size: 指定大小，可以按照像素大小
    2. font-weight : 指定是否粗体
    3. font-family : 指定类型

  2. 代码示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>字体样式</title><style type="text/css">/**/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: '华文新魏', sans-serif;}</style></head><body>说明:1. font-size: 指定大小，可以按照像素大小<br>2. font-weight : 指定是否是粗体<br>3. font-family : 指定字体类型<br><div>hello，word</div></body></html>

在这里插入图片描述

背景样式

  1. 代码示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在这里插入图片描述

文本居中

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本居中</title><style type="text/css">div {border: 1px solid blue; /*顺序不要求*/width: 300px;background: aliceblue;font-size: 40px;font-weight: bold;font-family: '新宋体', sans-serif;margin-left: auto;margin-right: auto;text-align: center;}</style>
</head>
<body><div>hello，word</div>
</body>
</html>

在这里插入图片描述

字体颜色和边框

  1. 颜色介绍

    1. 颜色可以写颜色名 比如 green，也可以写rgb 值比如rgb(200,200,200)和十六进制表示值比如#70809

  2. 颜色示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>颜色</title><style type="text/css">/* 为了讲课方便，我们就在这里写 css 样式 *//*说明:颜色可以写颜色名 比如 green，也可以写 rgb 值 比如 rgb(200, 200, 200) 和十六进制表示值比如 #708090color: rgb(255, 222, 1); // color: #ff7d44; // color: red;*/div {/* 有三种方式，指定颜色1. 英文2. 16进制 #ff7d44 [使用最多]3. 三原色 rgb(100, 100, 100)*/color: #ff7d44;}</style></head><body><div>韩顺平教育</div></body></html>

在这里插入图片描述

  1. 边框

    1. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>边框</title><style type="text/css">div {width: 300px;height: 100px;border: 1px dashed blue;}</style></head><body><div>韩顺平教育</div></body></html>

在这里插入图片描述

  1. 边框的宽度与高度

    1. 介绍：

      1. 宽度/高度像素值：100px；也可以是百分比值：50%

    2. 代码示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在这里插入图片描述

字体样式

  1. 介绍

    1. font-size: 指定大小，可以按照像素大小
    2. font-weight : 指定是否粗体
    3. font-family : 指定类型

  2. 代码示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>字体样式</title><style type="text/css">/**/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: '华文新魏', sans-serif;}</style></head><body>说明:1. font-size: 指定大小，可以按照像素大小<br>2. font-weight : 指定是否是粗体<br>3. font-family : 指定字体类型<br><div>hello，word</div></body></html>

在这里插入图片描述

背景样式

  1. 代码示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在这里插入图片描述

文本居中

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本居中</title><style type="text/css">div {border: 1px solid blue; /*顺序不要求*/width: 300px;background: aliceblue;font-size: 40px;font-weight: bold;font-family: '新宋体', sans-serif;margin-left: auto;margin-right: auto;text-align: center;}</style>
</head>
<body><div>hello，word</div>
</body>
</html>

在这里插入图片描述

css使用三种方式

  1. 在标签的 style 属性上设置CSS样式

    1. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>在标签的style属性上设置CSS样式</title></head><body><div style="color: red;">hello,北京</div><br/><div style="color: blue;">hello,上海</div><br/><div style="color: green;">hello,天津</div><br/></body></html>

在这里插入图片描述

  1. 在head标签中，使用style标签来定义需要的CSS样式

    1. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>在head标签中，使用style标签来定义需要的CSS样式</title><style>div {color: blue;}span {color: red;}</style></head><body><div>hello,北京</div><br/><div>hello,上海</div><br/><span>hello,span</span></body></html>

在这里插入图片描述

  1. 把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入

    1. 代码示例

      1.  /* test.css 内容 */div {width: 300px;height: 100px; /* 这是一个注释信息 */background: beige;}span {border: 3px solid red;}===================================use-css-style.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入</title><!-- link 标签专门用来引入 css 样式代码 --><link rel="stylesheet" href="test.css"/></head><body><div>hello, 北京~</div><br/><div>hello, 上海</div><br/><span>hello, span</span></body></html>

CSS选择器

  1. 元素选择器

    1. 通常是某个 HTML 元素， 比如 p、h1、adiv等

    2. 代码示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>元素选择器</title></head><body><h1>hello，word</h1><p>hello, world~</p></body></html>
      2. 在这里插入图片描述

  2. ID选择器

    1. 可以为标有特定id的HTML元素指定特定的样式。

    2. id选择器以"#"来定义

    3. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>id 选择器</title><!-- 我们就在这里写css样式解读：1. 使用id选择器，需要先在要修饰元素指定id属性, id值是程序员自己指定2. id 是唯一的，不能重复3. 在<style> 标签中指定id选择器时，前面需要有 #id值 --><style type="text/css">#hsp1 {color: gold;}#css2 {color: green;}</style></head><body><h1 id="hsp1">hello，word</h1><p id="css2">hello, world~</p></body></html>
      2. 在这里插入图片描述

  3. class选择器

    1. ，可以通过 class 属性选择去使用这个样式

    2. 基本语法：

      1. .class 属性值{属性:值；}

    3. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>类选择器</title><!-- 我们就在这里写css样式解读：1. 使用class选择器，需要在被修饰的元素上，设置class属性，属性值由程序员指定2. class 属性的值，可以重复3. 需要在 <style></style> 指定类选择器的具体样式，前面需要是 .类选择器名 --><style type="text/css">.css1 {color: red;}.css2 {color: sandybrown;}</style></head><body><div class="css1">hello，word</div><div class="css1">hello，word 8</div><p class="css2">hello, world~</p></body></html>
      2. 在这里插入图片描述

文本来源：韩顺平java课程笔记

相关文章：

深入理解CSS基础【代码审计实战指南】

文章目录 为什么需要cssCSS语法CSS的组成css注释&#xff1a; 快速入门示例&#xff1a;常用样式字体颜色和边框颜色介绍颜色示例&#xff1a;边框边框的宽度与高度 字体样式背景样式文本居中 字体颜色和边框颜色介绍颜色示例&#xff1a;边框边框的宽度与高度 字体样式背景样式…...

编程日记 2024/7/23 22:30:21

html改写vue日志

本人最近学了vue&#xff0c;想着练手的方法就是改写之前在公司开发的小系统前端&#xff0c;将前端的AJAXJSThymeleaf改为axiosvue。 改写html 将<html>中的<head>和<body>结构移除&#xff0c;将css部分移入<style>&#xff0c; 重新定义了全局的&…...

编程日记 2024/7/23 22:27:19

Transformer-Bert---散装知识点---mlm，nsp

本文记录的是笔者在了解了transformer结构后嗑bert中记录的一些散装知识点&#xff0c;有时间就会整理收录&#xff0c;希望最后能把transformer一个系列都完整的更新进去。 1.自监督学习 bert与原始的transformer不同&#xff0c;bert是使用大量无标签的数据进行预训…...

编程日记 2024/7/23 22:25:17

基于术语词典干预的机器翻译挑战赛笔记 Task3 #Datawhale AI 夏令营

书接上回&#xff0c;上回在这捏&#xff1a; 基于术语词典干预的机器翻译挑战赛笔记Task2 #Datawhale AI 夏令营-CSDN博客文章浏览阅读223次&#xff0c;点赞10次&#xff0c;收藏5次。基于术语词典干预的机器翻译挑战赛笔记Task2https://blog.csdn.net/qq_23311271/article/…...

编程日记 2024/7/23 22:20:12

定制QCustomPlot 带有ListView的QCustomPlot 全网唯一份

定制QCustomPlot 带有ListView的QCustomPlot 文章目录 定制QCustomPlot 带有ListView的QCustomPlot摘要需求描述实现关键字： Qt、 QCustomPlot、 魔改、 定制、 控件 摘要 先上效果，是你想要的，再看下面的分解，顺便点赞搜藏一下；不是直接右上角。 QCustomPlot是一款…...

编程日记 2024/7/23 22:18:10

Fast Planner规划算法（一）—— Fast Planner前端

本系列文章用于回顾学习记录Fast-Planner规划算法的相关内容&#xff0c;【本系列博客写于2023年9月&#xff0c;共包含四篇文章&#xff0c;现在进行补发第一篇&#xff0c;其余几篇文章将在近期补发】 一、Fast Planner前端 Fast Planner的轨迹规划部分一共分为三个模块&…...

编程日记 2024/7/23 22:09:02

问题记录-SpringBoot 2.7.2 整合 Swagger 报错

详细报错如下 报错背景&#xff0c;我将springboot从2.3.3升级到了2.7.2&#xff0c;报了下面的错误&#xff1a; org.springframework.context.ApplicationContextException: Failed to start bean documentationPluginsBootstrapper; nested exception is java.lang.NullPo…...

编程日记 2024/7/23 22:04:59

【视觉SLAM】 十四讲ch5习题

1.*寻找一个相机&#xff08;你手机或笔记本的摄像头即可&#xff09;&#xff0c;标定它的内参。你可能会用到标定板&#xff0c;或者自己打印一张标定用的棋盘格。 参考我之前写过的这篇博客&#xff1a;【OpenCV】 相机标定 calibrateCamera Code来源是《学习OpenCV3》18.…...

编程日记 2024/7/23 22:03:58

Webpack基础学习-Day01

Webpack基础学习-Day01 1.1 webpack 是什么 webpack 是一种前端资源构建工具&#xff0c;一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析&#xff0c;打包生成…...

编程日记 2024/7/23 22:02:57

如何防止热插拔烧坏单片机

大家都知道一般USB接口属于热插拔&#xff0c;实际任意带电进行连接的操作都可以属于热插拔。我们前面讲过芯片烧坏的原理&#xff0c;那么热插拔就是导致芯片烧坏的一个主要原因之一。 在电子产品的整个装配过程、以及产品使用过程经常会面临接口热插拔或者类似热插拔的过程。…...

编程日记 2024/7/23 22:00:55

JQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询

本文详细讲解了如何使用 JQueryHTMLJavaScript 实现移动端页面中的地图位置选取功能。本文逐步展示了如何构建基本的地图页面&#xff0c;如何通过点击地图获取经纬度和地理信息&#xff0c;以及如何实现模糊查询地址并在地图上标注。最后&#xff0c;提供了完整的代码示例&…...

编程日记 2024/7/23 21:57:52

ArcGIS Pro SDK （九）几何 13 多部件

ArcGIS Pro SDK &#xff08;九&#xff09;几何 13 多部件 文章目录 ArcGIS Pro SDK &#xff08;九&#xff09;几何 13 多部件1 获取多部分要素的各个部分2 获取多边形的最外层环 环境&#xff1a;Visual Studio 2022 .NET6 ArcGIS Pro SDK 3.0 1 获取多部分要素的各个部分…...

编程日记 2024/7/23 21:50:45

【Node】npm i --legacy-peer-deps，解决依赖冲突问题

文章目录 &#x1f356; 前言&#x1f3b6; 一、问题描述✨二、代码展示&#x1f3c0;三、运行结果&#x1f3c6;四、知识点提示 &#x1f356; 前言 npm i --legacy-peer-deps&#xff0c;解决依赖冲突问题 &#x1f3b6; 一、问题描述 node执行安装指令时出现报错&#xff…...

编程日记 2024/7/23 21:48:43

h5点击电话号跳转手机拨号

需要使用到h5的 <a>标签 我们首先在<head>标签中添加代码 <meta name"format-detection" content"telephoneyes"/>然后再想要的位置添加代码 <a href"tel:10086"> 点击拨打&#xff1a;10086 </a> 这样功能就实现…...

编程日记 2024/7/23 21:47:42

从数据湖到湖仓一体：统一数据架构演进之路

文章目录 一、前言二、什么是湖仓一体&#xff1f;起源概述 三、为什么要构建湖仓一体&#xff1f;1. 成本角度2. 技术角度 四、湖仓一体实践过程阶段一&#xff1a;摸索阶段(仓、湖并行建设)阶段二&#xff1a;发展阶段方式一、湖上建仓(湖在下、仓在上)方式二&#xff1a;仓外…...

编程日记 2024/7/23 21:44:38

Electron 渲染进程直接调用主进程的API库@electron/remote引用讲解

背景 remote是个老库&#xff0c;早期Electron版本中有个remote对象&#xff0c;这个对象可以横跨所有进程&#xff0c;随意通信&#xff0c;后来官方认为不安全&#xff0c;被干掉了&#xff0c;之后有人利用Electron的IPC通信&#xff0c;底层通过Promise的await能力&#x…...

编程日记 2024/7/23 21:41:35

在python中使用正则表达式

正则表达式是什么&#xff1f;就是要寻找的数据的规律&#xff0c;使用正则表达式的步骤有三 第一&#xff0c;寻找规律&#xff0c;第二使用正则符号表示规律&#xff0c;第三&#xff0c;提取信息 看下面的代码 import re wenzhang (小草偷偷地从土里钻出来&#xff0c;嫩…...

编程日记 2024/7/23 21:40:34

华清数据结构day4 24-7-19

链表的相关操作 linklist.h #ifndef LINKLIST_H #define LINKLIST_H #include <myhead.h> typedef int datatype; typedef struct Node {union{int len;datatype data;};struct Node *next; } Node, *NodePtr;NodePtr list_create(); NodePtr apply_node(datatype e); …...

编程日记 2024/7/23 21:37:31

【深度学习图像】拼接图的切分

用户常常将多张图拼成一张图。 如果将这张图拆为多个子图&#xff0c;下面是一种opencv的办法&#xff0c;后面要训练一个模型来识别边缘更为准确。 import osimport cv2 import numpy as npdef detect_lines(image_path):# 读取图片image cv2.imread(image_path)if image i…...

编程日记 2024/7/23 21:35:30

Covalent（CXT）运营商网络规模扩大 42%，以满足激增的需求

Covalent Network&#xff08;CXT&#xff09;是领先的人工智能模块化数据基础设施&#xff0c;网络集成了超过 230 条链并积累了数千名客户&#xff0c;目前 Covalent Network&#xff08;CXT&#xff09;网络迎来了五位新运营商的加入&#xff0c;包括 Graphyte Labs、PierTw…...

编程日记 2024/7/23 21:34:29

Java 集合框架：HashMap 的介绍、使用、原理与源码解析

大家好&#xff0c;我是栗筝i&#xff0c;这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 020 篇文章&#xff0c;在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验&#xff0c;并希望进…...

编程日记 2024/7/23 21:31:26

单周期CPU（三）译码模块（minisys）（verilog）（vivado）

timescale 1ns / 1ps //module Idecode32 (input reset,input clock,output [31:0] read_data_1, // 输出的第一操作数output [31:0] read_data_2, // 输出的第二操作数input [31:0] Instruction, // 取指单元来的指令input [31:0] …...

编程日记 2024/7/23 21:29:24

理想化相机模型的相机内参

文章目录 理想化相机模型的相机内参计算1. 相机内参定义2. 根据视角和图像分辨率计算相机内参2.1 计算焦距 fx 和 fy2.2 计算主点 cx 和 cy3. 示例计算3.1 计算 fx3.2 假设 fy = fx（因为没有垂直视场角的信息）3.3 计算主点4. 相机内参矩阵理想化相机模型的相机内参计算 在理…...

编程日记 2024/7/23 21:27:21

【数据脱敏】⭐️SpringBoot 整合 Jackson 实现隐私数据加密

目录 &#x1f378;前言 &#x1f37b;一、Jackson 序列化库 &#x1f37a;二、方案实践 2.1 环境准备 2.2 依赖引入 2.3 代码编写 &#x1f49e;️三、接口测试 &#x1f379;四、章末 &#x1f378;前言 小伙伴们大家好&#xff0c;最近也是很忙啊&#xff0c;上次的文章…...

编程日记 2024/7/23 21:25:19

骑砍2霸主MOD开发(18)-多人联机模式开发环境搭建

一.多人联机模式网络拓扑图 二.专用服务器搭建(DedicatedServer) <1.Token生成(用于LobbyServer的校验): 进入多人联机大厅,ALT~打开RGL控制台,输入customserver.gettoken Token文件路径:C:\Users\taohu\Documents\Mount and Blade II Bannerlord\Tokens <2.启动专用服务…...

编程日记 2024/7/23 21:24:18

【HZHY-AI300G智能盒试用连载体验】在华为IoTDA平台上建立设备

目录 华为IoTDA平台 注册IoTDA实例 创建产品 添加设备 本文首发于&#xff1a;【HZHY-AI300G智能盒试用连载体验】 智能工业互联网网关 - 北京合众恒跃科技有限公司 - 电子技术论坛 - 广受欢迎的专业电子论坛! 在上一篇博文中介绍了如何在HZHY-AI300G智能盒创建南向设备&a…...

编程日记 2024/7/23 21:18:13

【LLM】-05-提示工程-部署Langchain-Chat

目录 1、软硬件要求 1.1、软件要求 1.2、硬件要求 1.3、个人配置参考 2、创建cuda环境 3、下载源码及模型 4、配置文件修改 5、初始化知识库 5.1、训练自己的知识库 6、启动 7、API接口调用 7.1、使用openai 参考官方wiki&#xff0c;本文以Ubuntu20.04_x64&#xf…...

编程日记 2024/7/23 21:17:12

【漏洞复现】Next.js框架存在SSRF漏洞(CVE-2024-34351)

0x01 产品简介 ZEIT Next.js是ZEIT公司的一款基于Vue.js、Node.js、Webpack和Babel.js的开源Web应用框架。 0x02 漏洞概述 ZEIT Next.js 13.4版本至14.1.1之前版本存在代码问题漏洞&#xff0c;该漏洞源于存在服务器端请求伪造 (SSRF) 漏洞 0x03 搜索引擎 body"/_nex…...

编程日记 2024/7/23 21:16:10

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 小区小朋友统计(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ，一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 ｜ 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录，全、新、准，题目覆盖率达 95% 以上，支持题目在线…...

编程日记 2024/7/23 21:15:08

Vuex看这一篇就够了

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…...

编程日记 2024/7/23 21:13:07

Kafka集群创建

这样就创建好了docker4个镜像&#xff0c;三个node&#xff0c;一个manager。 其中&#xff0c;浏览器访问的是manager对应的那个url&#xff0c;直接在里面加Cluster...

编程日记 2024/7/23 21:09:03

2024.7.22 作业

1.将双向链表和循环链表自己实现一遍&#xff0c;至少要实现创建、增、删、改、查、销毁工作 循环链表 looplinklist.h #ifndef LOOPLINKLIST_H #define LOOPLINKLIST_H#include <myhead.h>typedef int datatype;typedef struct Node {union {int len;datatype data;}…...

编程日记 2024/7/23 21:07:02

如何使用aiohttp或requests-async等库并发地执行多个HTTP请求

在Python中&#xff0c;要并发地执行多个HTTP请求&#xff0c;可以使用aiohttp这样的异步HTTP客户端库&#xff0c;因为它支持异步编程&#xff0c;能够显著提高IO密集型任务的性能&#xff0c;比如网络请求。requests-async并不是一个广泛认知的库&#xff08;虽然可能存在类似…...

编程日记 2024/7/23 21:02:59

Golang | Leetcode Golang题解之第257题二叉树的所有路径

题目&#xff1a; 题解&#xff1a; func binaryTreePaths(root *TreeNode) []string {paths : []string{}if root nil {return paths}nodeQueue : []*TreeNode{}pathQueue : []string{}nodeQueue append(nodeQueue, root)pathQueue append(pathQueue, strconv.Itoa(root.V…...

编程日记 2024/7/23 21:01:58

关于css中flex布局垂直居中失效问题的原因

项目中遇到用flex进行页面布局后&#xff0c;使用上下居中设置&#xff1a;align-item: center; 目标效果如下&#xff1a; 但是失效&#xff0c;不起作用&#xff0c;如下图所示&#xff1a; 各种排查过后发现设置了子模块 align-self 属性&#xff0c;这会覆盖容器上的 al…...

编程日记 2024/7/23 21:00:56

用Redisson写一个库存扣减的方法

使用Redisson来处理库存操作可以确保在高并发环境下库存数据的一致性和完整性。以下是使用Redisson实现库存管理的一些通用方法&#xff0c;包括获取库存、扣减库存、设置库存等。我们将使用Redisson的ReentrantLock来确保并发安全。 首先&#xff0c;确保你已经正确设置了Red…...

编程日记 2024/7/23 20:57:53

第2节课：文本内容与格式化——HTML中的文本处理技巧

目录 文本内容与格式化&#xff1a;段落和标题&#xff1a;构建文本基础段落 <p>标题 <h1> 到 <h6> 格式化&#xff1a;强调和样式加粗 <b>斜体 <i>下划线 <u> 列表&#xff1a;组织内容无序列表 <ul>有序列表 <ol>定义列表 &…...

编程日记 2024/7/23 20:55:52

temu平台电池/锂电池UN38.3资质合规解析

UN38.3资质合规解析 为满足相关法律法规和商品运输安全需求含锂电池商品需要提供对应的UN38.3资质。截至7月29日&#xff0c;相关类目下UN38.3资质待上传或上传失败的商品可能面临下架。 -01什么是UN38.3- 1&#xff09;UN38.3是指由联合国危险货物运输专家委员会编写的《试验…...

编程日记 2024/7/23 20:47:45

Huawei、Cisco 路由中 RIP 协议 summary 的用法

华为路由中 RIP summary summary用来使能 RIP 有类聚合&#xff0c;聚合后的路由以使用自然掩码的路由形式发布。undo summary用来取消有类聚合以便在子网之间进行路由&#xff0c;此时&#xff0c;子网的路由信息就会被发布出去。路由聚合降低了路由表中路由信息量。说明 有类…...

编程日记 2024/7/23 20:45:43

智能图像信息提取(飞桨OCR+ERNIE-Layout)

嘿&#xff0c;技术大佬们&#xff0c;今天我要分享的是一个超级棒的OCR技术方案&#xff0c;它结合了飞桨OCR和ERNIE-Layout&#xff0c;绝对是图像信息提取的利器&#xff01; 线上体验地址&#xff1a;智能图像信息提取(飞桨OCRERNIE-Layout) 它基于ERNIE -Layout和多版本Pa…...

编程日记 2024/7/23 20:44:42

Ubuntu 24.04 LTS Noble安装 FileZilla Server

FileZilla Server 是一款使用图形用户界面快速创建 FTP 服务器的软件。它有助于测试需要 FTP 服务器功能的各种项目。虽然早期的 FileZilla FTP 服务器仅适用于 Windows 和 macOS&#xff0c;但现在我们也可以在 Linux&#xff08;例如 Ubuntu 24.04&#xff09;上安装 FileZil…...

编程日记 2024/7/23 20:43:41

【关于使用swoole的知识点整理】

目录 &#xff08;1&#xff09;Swoole 如何理解&#xff0c;能解决你项目中的哪些痛点&#xff1f; &#xff08;2&#xff09;Swoole里的协程是什么&#xff0c;怎么用&#xff1f;为什么协程可以提高并发&#xff1f; &#xff08;3&#xff09;简述Swoole有哪些优点&…...

编程日记 2024/7/23 20:42:40

迁移学习：目标检测的加速器

迁移学习&#xff1a;目标检测的加速器 在深度学习领域&#xff0c;目标检测是一项至关重要的任务&#xff0c;广泛应用于从视频监控到自动驾驶等众多领域。然而&#xff0c;训练一个高性能的目标检测模型不仅需要大量的标注数据&#xff0c;还需要大量的计算资源和时间。迁移…...

编程日记 2024/7/23 20:41:39

gitee的怎么上传项目

前提 1.先下载Git Bash (如果没有下载的宝子们下载连接如下: 链接: link ) 项目上传到Gitee步骤 1.在Gitee上建立远程仓库 2.填写相关信息 3.进入本地你想要上传的文件目录下&#xff0c;右键单击空白处&#xff0c;点击Git Bash Here 4.配置你的用户名和邮箱 git con…...

编程日记 2024/7/23 20:40:39

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（二十三）

课程地址&#xff1a; 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程&#xff0c;一套精通鸿蒙应用开发 &#xff08;本篇笔记对应课程第 33 节&#xff09; P33《32.通知-进度条通知》 下载按钮对应的逻辑&#xff1a; 取消按钮对应的逻辑&#xff1a; 暂停按钮对应的…...

编程日记 2024/7/23 20:37:35

.NET C# 配置 Options

.NET C# 配置 Options 使用 options 模式可以带来许多好处&#xff0c;包括清晰的配置管理、类型安全、易于测试和灵活性。但在使用过程中&#xff0c;也需要注意配置复杂性、性能开销和依赖框架等问题。通过合理设计和使用&#xff0c;可以充分发挥 options 模式的优势&#…...

编程日记 2024/7/23 20:36:33

42、PHP 实现把二叉树打印成多行

题目&#xff1a; PHP 实现把二叉树打印成多行 描述&#xff1a; 从上到下按层打印二叉树&#xff0c;同一层结点从左至右输出。每一层输出一行。 <?php/*class TreeNode{var $val;var $left NULL;var $right NULL;function __construct($val){$this->val $val;} }…...

编程日记 2024/7/23 20:34:31

verilog bug记录——正点原子spi_drive存在的问题

verilog bug记录——正点原子spi_drive存在的问题 问题概述代码修改—spi_drive.v遗留问题 问题概述 因为项目需求&#xff0c;需要利用spi对flash进行擦除和写入操作&#xff0c;所使用的开发板是正电原子的达芬奇开发板&#xff0c;我事先往Flash里面存了两个bit&#xff0c…...

编程日记 2024/7/23 20:32:29

vue+watermark-dom实现页面水印效果

前言 页面水印大家应该都不陌生&#xff0c;它可以用于验证数字媒体的来源和完整性&#xff0c;还可以用于版权保护和信息识别&#xff0c;这些信息可以在不影响媒体质量的情况下嵌入&#xff0c;‌并在需要时进行提取。‌本文将通过 vue 结合 watermark-dom 库&#xff0c;教大…...

编程日记 2024/7/23 20:31:28

为什么要学习网安技术？

学习网络安全&#xff08;网安&#xff09;技术在当今社会变得尤为重要&#xff0c;这主要源于以下几个方面的原因&#xff1a; 保护个人隐私&#xff1a;随着互联网的普及&#xff0c;个人信息如姓名、地址、电话号码、甚至银行账户信息等都在网络上留下了痕迹。学习网安技术可…...

编程日记 2024/7/23 20:30:27