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

CSS（快速入门）

news 来源：原创 2025/5/15 13:20:03

                                         欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦·~

点击这里了解更多内容

一、什么是CSS?
二、基本语法规范
三、CSS选择器
- 3.1 标签选择器
- 3.2 id选择器
- 3.3 class选择器
- 3.4 通配符选择器
- 3.5 复合选择器
四、常用CSS样式
- 4.1 color
- 4.2 font-size
- 4.3 border
- 4.4 background-color
- 4.5 改变显示模式
- 4.6 padding
- 4.7 margin

一、什么是CSS?

CSS(Cascading Style Sheet)，层叠样式表, 用于控制页面的样式。

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。

CSS 可以理解为"东方四大邪术" 之化妆术.
即对页面的展示进行"化妆“。

CSS前 VS CSS修饰后的效果展示：
在这里插入图片描述

二、基本语法规范

选择器 + {⼀条/N条声明}
• 选择器决定针对谁修改 (找谁)
• 声明决定修改啥. (干啥)
• 声明的属性是键值对. 使用; 区分键值对, 使用: 区分键和值。

CSS 要写到 style 标签中

CSS有3种引入方式：
行内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.

<body>
<div style="color:green";>我是一个行内样式的div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>

在这里插入图片描述

内部样式会出现大量的代码冗余, 不方便后期的维护，所以不常用。

定义

    <style>div{color:red;</style>

3.外部样式，html和css实现了完全分离

    <link rel="stylesheet" href="style.css">

然后再创建一个CSS文件，然后在这个style.css文件里面写,代码如下：

 div{color:blue;}

上面三个的整体代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title><style>div{color:red;</style><link rel="stylesheet" href="style.css">
</head>
<body>
<div style="color:green";>我是一个行内样式的div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>
</html>

效果：
在这里插入图片描述

注意;这个里面的行内样式优先，相当于局部变量，所以显示的是绿色，其他的全局被设置变成了蓝色。

三、CSS选择器

CSS 选择器的主要功能就是选中页面指定的标签元素. 选中了元素, 才可以设置元素的属性.。

3.1 标签选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title>
<!--    标签选择器--><style>div{color:red;}p{color:brown;}span{color:blue;}</style>
</head>
<body>
<div>我是一个div</div>
<p>我是一个段落</p>
<span>我是一个span</span>
</body>
</html>

这里的这些div,span,p等等标签，可以通过style然后定义选择他的颜色。

效果如下：

在这里插入图片描述

3.2 id选择器

在上面的标签选择器的基础上面，然后通过对标签再增加一个属性id（唯一）然后就可以根据id去选择,这个样子就叫做id选择器。

举个例子：我们先看一段代码和效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title><style>div{color:red;}</style></head>
<body>
<div>我是一个div1</div>
<div>我是一个div2</div>
<div>我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述
上面一段代码的效果如上图，我们如果想要第二个红色的字体变成蓝色字体这个要怎么办呢？那么就要用到id选择器。

<html>
<head><title>Document</title><style>div{color:red;}#div2{color:blue;}</style></head>
<body>
<div id="div1">我是一个div1</div>
<div id="div2">我是一个div2</div>
<div id="div3">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述
可以看到现在已经变成蓝色了。

注意： 这个id要有独特性不能有相同的id,然后这个id选择器使用时候要在前面加# 。

3.3 class选择器

作用:可以把一些有关联起来的东西用同一个class名字,然后他们就会变成一组然后class选择器对一个整大组进行渲染。

举个例子，我们把第一个和第三个用class选择器进行渲染：

<html>
<head><title>Document</title><style>div{color:red;}#div2{color:blue;}.fun1{font-size:40px;}</style></head>
<body>
<div id="div1"class="fun1">我是一个div1</div>
<div id="div2"class="fun">我是一个div2</div>
<div id="div3"class="fun1">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述

注意：使用class渲染时候,语法格式如下：

.class的赋值 {
}

3.4 通配符选择器

对全部class进行渲染

语法：

*{}

效果同上。

3.5 复合选择器

可以多个选择器一起

举一个例子：把两个id选择器放在一起

<html>
<head><title>Document</title><style>div{color:red;}#div1,#div2{color:blue;}</style></head>
<body>
<div id="div1"class="fun1">我是一个div1</div>
<div id="div2"class="fun">我是一个div2</div>
<div id="div3"class="fun1">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述

再举一个例子：想要上面的字体变成红色。

<html>
<head><title>复合选择器</title><style>ul li{color:red;}</style>
</head>
<body><ul><li>无序1</li><li>无序2</li><li>无序3</li><li>无序4</li></ul>
<ol><li>有序 1</li><li>有序 2</li><li>有序 3</li><li>有序 4</li>
</ol>
</body>
</html>

效果：
在这里插入图片描述

复合选择器是由多个单选择器组合（id选择器、class选择器），多个选择器之间用空格隔开。

四、常用CSS样式

4.1 color

color设置颜色

• 英文单词,如red,blue

  div{color:red;}

• rgb代码的颜色如rgb(255,0,0)

  div{color:rgb(24,46,37);}

• 十六进制的颜色如#ff00ff

  div{color:#ff00ff;}

4.2 font-size

设置字体大小

     ul li{color:red;font-size:60px;}

效果：
在这里插入图片描述

4.3 border

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body><h1>border-style 属性</h1><p>此属性规定要显示的边框类型：</p><p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p></body>
</html>

效果：
在这里插入图片描述

border的复合属性：

     ul li{border:red 1px solid;}

在这里插入图片描述

在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）/

<html>
<head>
<style>
p {border-top-style: dotted;border-right-style: solid;border-bottom-style: dotted;border-left-style: solid;
}
</style>
</head>
<body><h1>单独的边框</h1><p>两种不同的边框样式。</p></body>
</html>

在这里插入图片描述

border-color属性

<html>
<head>
<style>
p.one {border-style: solid;border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
</style>
</head>
<body><h1>border-color 属性</h1><p>border-color 属性可接受一到四个值（依次对应上、右、下、左边框）：</p><p class="one">多色的实线边框</p></body>
</html>

效果：
在这里插入图片描述

4.4 background-color

设置背景颜色。

<html>
<head><title>边框</title><style>ul li{border:red 1px solid;background-color:blue;}</style>
</head>
<body><ul><li>无序1</li><li>无序2</li><li>无序3</li><li>无序4</li></ul>
</body>
</html>

在这里插入图片描述

4.5 改变显示模式

使用display 属性可以修改元素的显示模式。
• display: block 改成块级元素 [常用]
• display: inline 改成行内元素 [很少用]

行内元素不能使用width和height,比如pan标签：

<html>
<head><title>边框</title><style>#fun1{width:50px;height:100px;border:1px red solid;}</style>
</head>
<body><span id="fun1">我是一个span</span>
</body>
</html>

效果：

在这里插入图片描述

如果想要用width/height的话就要用到display。

<html>
<head><title>边框</title><style>#fun1{display:block;width:50px;height:100px;border:1px red solid;}</style>
</head>
<body><span id="fun1">我是一个span</span>
</body>
</html>

效果：
在这里插入图片描述

4.6 padding

padding 属性用于在任何定义的边界内的元素内容周围生成空间。
Padding - 单独的边
CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-botton
padding-left

所有内边距属性都可以设置以下值：
length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距
提示：不允许负值。

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;
}
</style>
</head>
<body><h1>使用单独的内边距属性</h1><div>这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 80px。</div></body>
</html>

效果：
在这里插入图片描述

4.7 margin

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue;
}
</style>
</head>
<body><h1>使用单独的外边距属性</h1><div>这个 div 元素的上外边距为 100 像素，右外边距是 150 像素，下外边距是 100 像素，左外边距是 80 像素。</div></body>
</html>

效果：
在这里插入图片描述

在这里插入图片描述

欧耶！！！我学会啦！！

CSS（快速入门）

欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦~点击这里了解更多内容目录一、什么是CSS?二、基本语法规范三、CSS选择器3.1 标签选择器3.2 id选择器3.3 class选择器3.4 通配符选择器3.5 复合选择器四、常用CSS样式4.1 color4.2 font…...

编程日记 2025/5/15 13:20:03

架构技能（六）：软件设计（下）

我们知道，软件设计包括软件的整体架构设计和模块的详细设计。在上一篇文章（见《架构技能（五）：软件设计（上）》）谈了软件的整体架构设计，今天聊一下模块的详细设计。模…...

编程日记 2025/5/15 8:05:09

2. Java-MarkDown文件解析-工具类

2. Java-MarkDown文件解析-工具类 1. 思路读取markdown文件的内容，根据markdown的语法进行各个类型语法的解析。引入工具类 commonmark 和 commonmark-ext-gfm-tables进行markdown语法解析。 2. 工具类 pom.xml  <d…...

编程日记 2025/5/15 23:47:19

OpenEuler学习笔记（十五）：在OpenEuler上搭建Java运行环境

一、在OpenEuler上搭建Java运行环境在OpenEuler上搭建Java运行环境可以通过以下几种常见方式，下面分别介绍基于包管理器安装OpenJDK和手动安装Oracle JDK的步骤。使用包管理器安装OpenJDK OpenJDK是Java开发工具包的开源实现，在OpenEuler上可以方便…...

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

【Rust自学】15.4. Drop trait：告别手动清理，释放即安全

喜欢的话别忘了点赞、收藏加关注哦（加关注即可阅读全文），对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 15.4.1. Drop trait的意义类型如果实现了Drop trait，就可以让程序员自定义当值…...

编程日记 2025/5/10 5:54:42

深入探讨Web应用开发：从前端到后端的全栈实践

在数字化时代，Web应用已成为连接用户与服务的关键桥梁。无论是电商平台、社交媒体，还是企业内部管理系统，Web应用都扮演着不可或缺的角色。本文将深入探讨Web应用开发的全栈实践，从前端的用户体验设计到后端的数据处理与存储&…...

编程日记 2025/5/14 15:39:32

4.贪心算法

贪心贪心算法（Greedy Algorithms）是 C 等编程语言中常用的一种算法策略。定义贪心算法是指在对问题求解时，总是做出在当前看来是最好的选择。也就是说，不从整体最优上加以考虑，算法得到的是在某种意义上的局部最…...

编程日记 2025/5/11 20:45:36

js笔记（黑马程序员）

（Web APIs day4） 一、日期对象 1.实例化在代码中发现了 new 关键字时，一般将这个操作称为实例化创建一个时间对象并获取时间// 1．得到当前时间 2.日期对象方法因为日期对象返回的数据我们不能直接使用，所以需…...

编程日记 2025/5/15 15:12:07

LangChain：使用表达式语言优化提示词链

在 LangChain 里，LCEL 即 LangChain Expression Language（LangChain 表达式语言），本文为你详细介绍它的定义、作用、优势并举例说明，从简单示例到复杂组合示例，让你快速掌握LCEL表达式语言使用技巧。定义 …...

编程日记 2025/5/11 17:45:55

Python 有用的资源

Python 有用的资源引言 Python 作为一种强大的编程语言，因其简洁明了的语法和丰富的库资源，在数据分析、人工智能、网络开发等领域拥有广泛的应用。对于初学者和专业人士来说，掌握一些有用的Python资源可以大大提高编程效率。本文将为您介绍一些实用的Python资源，帮助您…...

编程日记 2025/5/13 0:54:11

汽车蓝牙钥匙定位仿真小程序

此需求来自于粉丝的真实需求，假期没事，牛刀小试。一、项目背景如今，智能车钥匙和移动端定位技术已经相当普及。为了探索蓝牙 Beacon 在短距离定位场景下的可行性，我们搭建了一个简易原型：利用 UniApp 在移动端采集蓝牙信标的 RSSI（信号强度），通过三边定位算法估算钥…...

编程日记 2025/5/11 20:45:29

项目开发实践——基于SpringBoot+Vue3实现的在线考试系统(九)（完结篇）

文章目录一、成绩查询模块实现1、学生成绩查询功能实现1.1 页面设计1.2 前端页面实现1.3 后端功能实现2、成绩分段查询功能实现2.1 页面设计2.2 前端页面实现2.3 后端功能实现二、试卷练习模块实现三、我的分数模块实现1、页面设计2、前端页面实现3、后端功能实现四、交流区…...

编程日记 2025/5/12 14:35:28

python学opencv|读取图像（四十九）原理探究：使用cv2.bitwise()系列函数实现图像按位运算

【0】基础定义按位与运算：两个等长度二进制数上下对齐，全1取1，其余取0。按位或运算：两个等长度二进制数上下对齐，有1取1，其余取0。按位异或运算： 两个等长度二进制数上下对齐，相…...

编程日记 2025/5/13 14:30:56

electron打包客户端在rk3588上支持h265硬解

目录前言 chromium是如何支持h265硬解 electron/chromium第一次编译 electron/chromium第二次编译前言我们的客户端程序是用electron打包的前端程序，其在rk3588主机上的linux环境运行。之前使用客户端查看h264编码的视频直播是没有问题的，但视频源…...

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

MyBatis 缓存机制详解

目录一、什么是缓存？ 1. 什么是缓存？ 2. 为什么使用缓存？ 3. 什么样的数据适合使用缓存？ 二、MyBatis 缓存机制 1. 一级缓存（也叫本地缓存） 2. 一级缓存失效的情况 3. 二级缓存 4. 二级缓存失效的…...

编程日记 2025/5/15 19:02:57

Cloudwego脚手架使用 cwgo脚手架 cwgo脚手架安装的命令： GOPROXYhttps://goproxy.cn/,direct go install github.com/cloudwego/cwgolatest依赖thriftgo的安装： go install github.com/cloudwego/thriftgolatest编辑echo.thrift文件用于生成项目&…...

编程日记 2025/5/12 22:26:28

数据结构选讲（更新中）

参考 smWCDay7 数据结构选讲2 by yyc 。可能会补充的： AT_cf17_final_j TreeMST 的 F2 Boruvka算法目录 AT_cf17_final_j Tree MST AT_cf17_final_j Tree MST link 题意给定一棵 n n n 个点的树，点有点权 w i w_i wi，边有边权。建立…...

编程日记 2025/5/15 12:05:00

springboot 简化 spring开发

什么是自动配置？ 简单概念： Spring Boot 自动配置是一种 “约定优于配置” 的做法。根据项目类路径（classpath）上存在的依赖、配置文件中的某些属性，Spring Boot 会自动为常见场景创建并配置相关 Bean，省…...

编程日记 2025/5/15 8:48:34

Yolo11 + OCR 营业执照识别+信息抽取（预期后续改用其他ocr更简单，推理预计使用onnxruntim加速，分c++和python两种方式部署）

目录一数据集制作 1 labelimg的安装与使用 2 标注方式 3 数据集制作二模型训练三使用Yolo11 + OCR 实现“营业执照”信息解析完整方案 1 cutLinesforcode.py 2 getBusinessLicenseContentPart.py 3 getPartWords.py 4 pdfTojpg.py 5 main.py 本项目可用于毕业…...

编程日记 2025/5/14 15:56:08

机器学习day3

自定义数据集使用框架的线性回归方法对其进行拟合 import matplotlib.pyplot as plt import torch import numpy as np # 1.散点输入 # 1、散点输入 # 定义输入数据 data [[-0.5, 7.7], [1.8, 98.5], [0.9, 57.8], [0.4, 39.2], [-1.4, -15.7], [-1.4, -37.3], [-1.8, -49.1]…...

编程日记 2025/5/11 20:45:16

C基础寒假练习(3)

一、求数组中的第二大值 #include <stdio.h> int main() {int arr[] {12, 35, 1, 10, 34, 1};int size sizeof(arr) / sizeof(arr[0]);if (size < 2) {printf("数组元素不足两个\n");return 0;}int first -2147483648, second -2147483648; // 使用IN…...

编程日记 2025/5/11 20:45:15

星际战争模拟系统：新月的编程之道

星际战争模拟系统：新月的编程之道作为一名在 25 世纪星际时代成长起来的科学家和军事战略家，我对编程和人工智能的热爱始于童年。我的父亲是一位著名的物理学家，母亲是一位杰出的生物工程师。在他们的影响下，我从小就对科学和技术…...

编程日记 2025/5/14 3:05:00

【Redis】 String 类型的介绍和常用命令

1. 介绍 Redis 中的 key 都是字符串类型Redis 中存储字符串是完全按照二进制流的形式保存的，所以 Redis 是不处理字符集编码的问题，客户端传入的命令中使用的是什么编码就采用什么编码，使得 Redis 能够处理各种类型的数据，包括文…...

编程日记 2025/5/11 18:20:50

U盘打开提示格式化：深度解析与数据恢复全攻略

在数字化时代，U盘作为便捷的数据存储和传输工具，广泛应用于各个领域。然而，当我们满怀期待地插入U盘，却遭遇“U盘打开提示格式化”的尴尬局面时，那份焦虑与无助感油然而生。本文将全面剖析U盘打开提示格式化的原因、应…...

编程日记 2025/5/13 20:33:22

vue2在线生成二维码

亲情提示：如果可以让后端生成就让后端生成实在不行再前端解决（分享方法只是为了让你快点下班不是为了让你能者多劳） 创建 npm install qrcodejs2 pnpm install qrcodejs2 <div ref"qrcode" id"myQrCode" class&…...

编程日记 2025/5/15 13:16:21

Linux中的几个基本指令（二）

文章目录 1、cp指令例一：例二：例三：例四：例五： 2、mv 指令例一：例二： 3、cat指令例一： 4、tac指令5、which指令6、date指令时间戳：7、zip指令今天我们继续学习Linux下的…...

编程日记 2025/5/14 17:48:42

基于Springboot的健身房管理系统【附源码】

基于Springboot的健身房管理系统效果如下： 系统登陆页面管理员主页面器材类型管理页面健身房管理页面教练管理页面用户管理页面个人信息页面课程管理页面研究背景随着健康意识的不断增强和人们生活水平的提高，健身房已经成为了现代城市中不…...

编程日记 2025/5/12 23:13:15

【HarmonyOS之旅】基于ArkTS开发(三) -＞兼容JS的类Web开发(一)

目录 1 -> 概述 1.1 -> 整体架构 2 -> 文件组织 2.1 -> 目录结构 2.2 -> 文件访问规则 2.3 -> 媒体文件格式 3 -> js标签配置 3.1 -> pages 3.2 -> window 3.3 -> 示例 4 -> app.js 4.1 -> 应用生命周期 4.2 -> 应用对象6…...

编程日记 2025/5/15 3:47:19

Spring Boot多环境配置实践指南

在开发Spring Boot应用时，我们常常需要根据不同的运行环境（如开发环境、测试环境和生产环境）来配置不同的参数。Spring Boot提供了非常灵活的多环境配置机制，通过使用profile-specific properties文件，我们可以轻松地管…...

编程日记 2025/5/14 2:10:34

知识图谱质量评估：构建高质量语义网络的关键

目录前言1. 知识图谱质量评估的必要性2. 知识图谱质量评估的核心维度2.1 数据层面2.2 结构层面2.3 语义层面2.4 性能层面 3. 知识图谱质量评估的方法3.1 定量评估方法3.2 定性评估方法 4. 知识图谱质量优化建议结语前言随着大数据和人工智能技术的飞速发展，知识…...

编程日记 2025/5/15 5:44:19

＜ OS 有关＞ Android 手机 SSH 客户端 app: connectBot

connectBot 开源且功能齐全的SSH客户端,界面简洁,支持证书密钥。下载量超 500万方便在 Android 手机上，连接 SSH 服务器，去运行命令。 Fail2ban 12小时内抓获的 IP ~ ~ ~ ~ rootjpn:~# sudo fail2ban-client status sshd Status for the jail: sshd …...

编程日记 2025/5/14 21:40:02

Unity游戏(Assault空对地打击)开发(1) 创建项目和选择插件

目录前言创建项目插件导入地形插件前言这是游戏开发第一篇，进行开发准备。创作不易，欢迎支持。我的编辑器布局是【Tall】，建议调整为该布局，如下。创建项目首先创建一个项目，过程略，名字请勿…...

编程日记 2025/5/15 12:48:03

SpringBoot 日志

目录一. 日志概述二. 日志的使用 1. 打印日志 (1) 获取日志对象 (2) 输出要打印的内容 2. 日志框架简介 (1) 门面模式简介 (2) SLF4J 框架简介 3. 日志的格式 4. 日志的级别 5. 日志配置 (1) 配置日志级别 (2) 日志持久化存储 ① 配置日志文件名 ② 配置日志的…...

编程日记 2025/5/11 20:44:52

每日 Java 面试题分享【第 16 天】

欢迎来到每日 Java 面试题分享栏目！ 订阅专栏，不错过每一天的练习今日分享 3 道面试题目！ 评论区复述一遍印象更深刻噢~ 目录问题一：Java 运行时异常和编译时异常之间的区别是什么？问题二：什么是 Jav…...

编程日记 2025/5/10 23:53:42

《多线程基础之互斥锁》

【互斥锁导读】互斥锁是大家使用最多的线程同步手段，但仅仅知道怎么用还是不够的？比如：面试官问你"互斥锁是属于内核层还是应用层的同步保护机制？性能怎样？"，"频繁加解锁，会有什…...

编程日记 2025/5/11 20:44:47

渲染流程概述

渲染流程包括 CPU应用程序端渲染逻辑和 GPU渲染管线一、CPU应用程序端渲染逻辑剔除操作对物体进行渲染排序打包数据调用Shader SetPassCall 和 Drawcall 1.剔除操作视椎体剔除 （给物体一个包围盒，利用包围盒和摄像机的视椎体进行碰撞检测&#xf…...

编程日记 2025/5/12 12:15:51

Android车机DIY开发之学习篇(七)NDK交叉工具构建

Android车机DIY开发之学习篇(七)NDK交叉工具构建 1.ubuntu安装GCC sudo apt-get update sudo apt-get install gcc g sudo gcc --version sudo g --version 2.测试GCC VSCODE中新建Hello.c编译 #include <stdio.h> int main(void) { printf(“Hello, this is a progr…...

编程日记 2025/5/14 6:21:39

c++ map/multimap容器学习笔记

1 map的基本概念简介： map中所有的元素都是pair pair中第一个元素是key（键），第二个元素是value（值） 所有元素都会根据元素的键值自动排序。本质： map/multimap 属于关联式容器，底…...

编程日记 2025/5/13 0:33:22

计算机网络之计算机网络体系结构

一、定义与概述计算机网络体系结构是计算机网络及其部件所应该完成功能的精确定义，这些功能由何种硬件或软件完成是遵循这种体系结构的。体系结构是抽象的，实现是具体的，是运行在计算机软件和硬件之上的。二、主流模型目前，…...

编程日记 2025/5/11 14:02:15

研发的立足之本到底是啥？

0 你的问题，我知道！ 本文深入T型图“竖线”的立足之本：专业技术技术赋能业务能力。研发在学习投入精力最多，也误区最多。某粉丝感发展遇到瓶颈，项目都会做，但觉无提升，想跳槽。于是&#x…...

编程日记 2025/5/11 20:44:36

最优化问题 - 内点法

以下是一种循序推理的方式，来帮助你从基础概念出发，理解内点法（Interior-Point Method, IPM） 是什么、为什么要用它，以及它是如何工作的。 1. 问题起点：带不等式约束的优化假设你有一个带不等式约束的优…...

编程日记 2025/5/11 20:44:33

Vue5---

目录一、学习目标 1.自定义指令 2.插槽 3.综合案例：商品列表 4.路由入门二、自定义指令 1.指令介绍 2.自定义指令 3.自定义指令的语法三、自定义指令-指令的值 1.需求 2.语法 3.代码示例五、插槽-默认插槽 1.作用 2.需求 4.使用插槽的基本语法…...

编程日记 2025/5/15 13:51:52

Helm Chart 实战指南

Helm 是 Kubernetes 的包管理工具，而 Helm Chart 是 Helm 的核心概念，用于定义、安装和升级 Kubernetes 应用。本文将带你从零开始，通过实战演练，掌握 Helm Chart 的创建、配置和部署，帮助你高效管理 Kubernetes 应用。 1. 环境准备在开始之前，确保你已经具备以下环境：…...

编程日记 2025/5/12 22:59:17

如何写一篇高质量的提示词？

不管是产品经理还是使用AI工具的用户，很多时候的烦恼是如何写提示词，我觉得写提示词就是在梳理思路，下边是一个提示词的结果，OpenAI 的总裁 Greg Brockman 曾转发过这个结构。这种结构可以创建一个清晰、简洁、可执行的提示&…...

编程日记 2025/5/11 18:16:14

系统架构设计师教材：信息系统及信息安全

信息系统信息系统的5个基本功能：输入、存储、处理、输出和控制。信息系统的生命周期分为4个阶段，即产生阶段、开发阶段、运行阶段和消亡阶段。信息系统建设原则 1. 高层管理人员介入原则：只有高层管理人员才能知道企业究竟需要什么样的信…...

编程日记 2025/5/15 0:58:39

在Windows系统中本地部署属于自己的大语言模型(Ollama + open-webui + deepseek-r1)

文章目录 1 在Windows系统中安装Ollama，并成功启动；2 非docker方式安装open-webui3下载并部署模型deepseek-r1 Ollama Ollama 是一个命令行工具，用于管理和运行机器学习模型。它简化了模型的下载与部署，支持跨平台使用&#xff0c…...

编程日记 2025/5/15 8:52:28

使用Redis生成全局唯一ID示例

全局ID生成器,一种在分布式系统下用来生成全局唯一ID的工具,一般满足一下要求特性 1.唯一性 2.高性能 3.安全性 4.递增性 5.高可用 Component public class RedisIdWorker {/*** 定义一个开始的时间戳(秒级)* param args*/private static final long BEGIN_TIMESTAMP 16…...

编程日记 2025/5/14 1:14:40

【llm对话系统】 LLM 大模型推理python实现：vLLM 框架

在 LLM 的应用中，推理 (Inference) 阶段至关重要。它指的是利用训练好的 LLM 模型，根据输入 (Prompt) 生成文本的过程。然而，LLM 的推理速度往往较慢，尤其是在处理长序列或高并发请求时，效率瓶颈尤为突出。为了解决这…...

编程日记 2025/5/13 4:39:49

16.Word：石油化工设备技术❗【28】

目录题目 NO1.2 NO3 NO4 题目 NO1.2 F12：另存为将“Word素材.docx”文件另存为“Word. docx”（“docx”为文件扩展名） 光标来到表格上方→插入→形状→新建画布→单击选中→格式→高度/宽度（格式→大小对话框→取消勾选✔锁定…...

编程日记 2025/5/13 21:12:09

《多阶段渐进式图像修复》学习笔记

paper：2102.02808 GitHub：swz30/MPRNet: [CVPR 2021] Multi-Stage Progressive Image Restoration. SOTA results for Image deblurring, deraining, and denoising. 目录摘要 1、介绍 2、相关工作 2.1 单阶段方法 2.2 多阶段方法 2.3 注意力机…...

编程日记 2025/5/14 10:16:52

目录

一、什么是CSS?

二、基本语法规范

三、CSS选择器

3.1 标签选择器

3.2 id选择器

3.3 class选择器

3.4 通配符选择器

3.5 复合选择器

四、常用CSS样式

4.1 color

4.2 font-size

4.3 border

4.4 background-color

4.5 改变显示模式

4.6 padding

4.7 margin

相关文章：