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

【css】基础（一）

news 2025/7/11 16:01:23

本专栏内容为：前端专栏 记录学习前端，分为若干个子专栏，html js css vue等

💓博主csdn个人主页：小小unicorn
⏩专栏分类：css专栏
🚚代码仓库：小小unicorn的代码仓库🚚
🌹🌹🌹关注我带你学习编程知识

目录

  • 什么是css
  • CSS语法：
  • CSS使用
    • 内部CSS
    • 行内CSS
    • 外部CSS
  • 选择器
    • CSS 元素选择器
    • id选择器
    • 类选择器
    • CSS 通用选择器
    • 分组选择器
    • 后代选择器
    • 子选择器
    • 伪类选择器
      • 锚伪类
      • 伪类和 CSS 类
      • 悬停在 ``<div>`` 上
      • 简单的工具提示悬停
      • force 伪类选择器
      • 为超链接添加不同样式
      • 小结

什么是css

  • CSS 指的是层叠样式表* (Cascading Style Sheets)
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • CSS 节省了大量工作。它可以同时控制多张网页的布局
  • 外部样式表存储在 CSS 文件中
  • *：也称级联样式表。

CSS演示，一个html页面可以有不同的效果：
在这里插入图片描述

CSS语法：

CSS 规则集（rule-set）由选择器和声明块组成：
在这里插入图片描述

  • 选择器指向您需要设置样式的 HTML 元素。

  • 声明块包含一条或多条用分号分隔的声明。

  • 每条声明都包含一个CSS属性名称和一个值，以冒号分隔。

  • 多条CSS声明用分号分隔，声明块用花括号括起来。

举个例子：

在此例中，所有 <p>元素都将居中对齐，并带有红色文本颜色：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个实例</title><style>body{background-color: lightblue;}h1{color:green;text-align: center;}p{font-family: Verdana;color:red;text-align: center;font-size: 20px;}</style>
</head>
<body><h1>我的第一个CSS实例</h1><p>在此例子中,所有p元素都将居中对齐,并带有红色文本颜色</p><p>这是一个段落</p>
</body>
</html>

在这里插入图片描述
例子解释：

  • p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：

    ）。

  • color 是属性，red 是属性值
  • text-align 是属性，center 是属性值

注意：

  • CSS要写到style标签中
  • style标签可以放到页面任意位置，一般放到head标签内
  • css使用/**/作为注释（使用ctrl+/快速切换）

CSS使用

有三种插入样式表的方法：

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

内部CSS

如果一张HTML页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的<style>元素中进行定义。

示例：

内部样式在 HTML 页面的 <head> 部分内的<style>元素中进行定义

<!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>body{background-color: linen;}h1{color:maroon;margin-left: 40px;}</style>
</head>
<body><h1>这是一个内部引入</h1><p>这是一个段落</p>
</body>
</html>

在这里插入图片描述

行内CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<!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>body{background-color: linen;}h1{color:maroon;margin-left: 40px;}</style>
</head>
<body><h1>这是一个内部引入</h1><p>这是一个段落</p><h1 style="color: blue;text-align: left;">这是一个行内引入</h1><p style="color: red;text-align: left;">这是一个段落</p>
</body>
</html>

在这里插入图片描述

外部CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的<link>元素内包含对外部样式表文件的引用。

而这个也是我们开发中最常用的方式

1.创建一个css文件
2.使用link标签引入css

<link rel="stylesheet" href="[css路径]">

创建demo.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head>
<body><div>上帝为你关上一扇门，然后去睡觉了</div>
</body>
</html>

创建style.css

div{color:aqua;font-size: 80px;
}

在这里插入图片描述

选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML元素。

我们可以将 CSS 选择器分为五类：

  • 简单选择器（根据名称、id、类来选取元素）
  • 组合器选择器（根据它们之间的特定关系来选取元素）
  • 伪类选择器（根据特定状态选取元素）
  • 伪元素选择器（选取元素的一部分并设置其样式）
  • 属性选择器（根据属性或属性值来选取元素）

此页会讲解最基本的 CSS 选择器。

CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

实例

在这里，页面上的所有<p>元素都将居中对齐，并带有红色文本颜色：

<!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>p{text-align: center;color:red;}</style>
</head>
<body><p>每个段落都会受影响</p><p>我也是</p>
</body>
</html>

在这里插入图片描述

id选择器

id 选择器使用HTML元素的id属性来选择特定元素。

元素的id在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

实例
这条CSS规则将应用于id="para1"的 HTML 元素：

<!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>#para1{text-align: center;color:red;}</style>
</head>
<body><p id="para1">你好世界</p><p>本段不受影响</p>
</body>
</html>

在这里插入图片描述
注意：id 名称不能以数字开头。

类选择器

类选择器选择有特定class属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

实例
在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

<!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>#para1{text-align: center;color:red;}.center{text-align: center;color:red;}</style>
</head>
<body><p id="para1">你好世界</p><p>本段不受影响</p><h1 class="center">这是一个类选择器</h1><p class="center">居中的红色段落</p>
</body>
</html>

在这里插入图片描述
当然我们 还可以指定只有特定的HTML元素会受类的影响。
在这个例子中，只有具有class="center"的<p>元素会居中对齐：

<!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>#para1{text-align: center;color:red;}.center{text-align: center;color:red;}p.center{text-align: left;color:black;}</style>
</head>
<body><p id="para1">你好世界</p><p>本段不受影响</p><h1 class="center">这是一个类选择器</h1><p class="center">居中的红色段落</p>
</body>
</html>

在这里插入图片描述
HTML 元素也可以引用多个类。
在这个例子中，<p> 元素将根据 class="center" 和 class="large" 进行样式设置：

<p class="center large">这个段落引用两个类。</p>

<!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>#para1{text-align: center;color:red;}.center{text-align: center;color:red;}p.center{text-align: center;color:black;}p.lage{font-size: 300%;}</style>
</head>
<body><p id="para1">你好世界</p><p>本段不受影响</p><h1 class="center">这是一个类选择器</h1><p class="center">居中的红色段落</p><p class="center lage">本段是居中并且使用大号字体的</p>
</body>
</html>

在这里插入图片描述
注意：类名不能以数字开头！

CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

下面的 CSS 规则会影响页面上的每个HTML元素：

* {text-align: center;color: blue;
}

<!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>*{text-align: center;color: blue;}#para1{text-align: center;color:red;}.center{text-align: center;color:red;}p.center{text-align: center;color:black;}p.lage{font-size: 300%;}</style>
</head>
<body><p id="para1">你好世界</p><h1>Hello world!</h1><p>页面上的每个元素都会受到样式的影响。</p><p >我也是！</p><p>还有我！</p><h1 class="center">这是一个类选择器</h1><p class="center">居中的红色段落</p><p class="center lage">本段是居中并且使用大号字体的</p>
</body>
</html>

在这里插入图片描述

分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

h1 {text-align: center;color: red;
}h2 {text-align: center;color: red;
}p {text-align: center;color: red;
}

最好对选择器进行分组，以最大程度地缩减代码。

如需对选择器进行分组，请用逗号来分隔每个选择器。

实例：
在这个例子中，我们对上述代码中的选择器进行分组：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>h1,h2,p{text-align: center;color:red;font-size: 300%;}</style>
</head>
<body><h1>这是一个分组选择器</h1><h2>更小的标题</h2><p>这是一个段落</p>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
基础选择器小结：
在这里插入图片描述

后代选择器

又叫包含选择器. 选择某个父元素中的某个子元素.

元素1 元素2 {样式声明}
  • 元素 1 和 元素 2 要使用空格分割
  • 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

代码示例1: 把 ol 中的 li 修改颜色, 不影响 ul

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>h1,h2,p{text-align: center;color:red;font-size: 300%;}ol li{color: green;}</style>
</head>
<body><h1>这是一个分组选择器</h1><h2>更小的标题</h2><p>这是一个段落</p><ul><li>aaa</li><li>bbb</li><li>ccc</li></ul><ol><li>ddd</li><li>eee</li><li>fff</li></ol>
</body>
</html>

在这里插入图片描述
代码示例2: 元素 2 不一定非是 儿子, 也可以是孙子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>h1,h2,p{text-align: center;color:red;font-size: 300%;}ol li{color: green;}ul a{color:yellow;}</style>
</head>
<body><h1>这是一个分组选择器</h1><h2>更小的标题</h2><p>这是一个段落</p><ul><li>aaa</li><li>bbb</li><li>ccc</li><li>还可以是孙子</li><li><a href="#">mmmm</a></li></ul><ol><li>ddd</li><li>eee</li><li>fff</li></ol>
</body>
</html>

在这里插入图片描述
代码示例3: 可以是任意基础选择器的组合. (包括类选择器, id 选择器)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>h1,h2,p{text-align: center;color:red;font-size: 300%;}ol li{color: green;}ul a{color:yellow;}.one li a{color: red;}</style>
</head>
<body><h1>这是一个分组选择器</h1><h2>更小的标题</h2><p>这是一个段落</p><ul><li>aaa</li><li>bbb</li><li>ccc</li><li>还可以是孙子</li><li><a href="#">mmmm</a></li></ul><ol><li>ddd</li><li>eee</li><li>fff</li></ol><ol class="one"><li>可以是基础选择器的组合</li><li>ddd</li><li>eee</li><li><a href="#">fff</a></li><li><a href="#">fff</a></li><li><a href="#">fff</a></li></ol>
</body>
</html>

在这里插入图片描述

子选择器

和后代选择器类似, 但是只能选择子标签.

元素1>元素2 { 样式声明 }
  • 使用大于号分割
  • 只选亲儿子, 不选孙子元素
   <div class="two"><a href="#">链接1</a><p><a href="#">链接2</a></p></div>

后代选择器的写法, 会把链接1 和 2 都选中

.two a{color: aquamarine;}

在这里插入图片描述
子选择器的写法, 只选链接 1

       .two>a{color: aquamarine;}

在这里插入图片描述
练习1：

  1. 把以下代码中的 “小猫” 改成红色
    <div class="cat"><ul><li>练习1</li><li><a href="#">小猫</a></li><li><a href="#">小猫</a></li><li><a href="#">小猫</a></li></ul></div>

css：

       /* 练习1 */.cat a{color:red;}

在这里插入图片描述

  1. 把以下代码中的 “小猫” 改成红色
    <div class="cat"><li>练习2</li><a href="#">小猫</a><ul><li><a href="#">小狗</a></li><li><a href="#">小狗</a></li></ul></div>

css:

       .cat>a{color: red;}

在这里插入图片描述

伪类选择器

伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

伪类的语法：

selector:pseudo-class {property: value;
}

锚伪类

链接能够以不同的方式显示

  • a:link 选择未被访问过的链接
  • a:visited 选择已经被访问过的链接
  • a:hover 选择鼠标指针悬停上的链接
  • a:active 选择活动链接(鼠标按下了但是未弹起)
<!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>/* 未访问的链接 */a:link{color:black;/* 去掉链接中的下划线 */text-decoration: none;}/* 已访问的链接 */a:visited{color:red;}/* 鼠标悬停链接 */a:hover{color:aqua;}/* 已经选择的链接 */a:active{color:green;}</style>
</head>
<body><h1>CSS 链接</h1><p><b><a href="https://blog.csdn.net/weixin_72066135?spm=1011.2124.3001.5343" target="_blank">这是一个链接</a></b></p><p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p><p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>
</body>
</html>

在这里插入图片描述

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致active失效. 记忆规则 “绿化”
浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.
实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多.

伪类和 CSS 类

伪类可以与CSS类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

a.highlight:hover {color: #ff0000;
}

悬停在 <div> 上

在

元素上使用 :hover 伪类的实例： 

div:hover {background-color: blue;
}

<!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>/* 未访问的链接 */a:link{color:black;/* 去掉链接中的下划线 */text-decoration: none;}/* 已访问的链接 */a:visited{color:red;}/* 鼠标悬停链接 */a:hover{color:aqua;}/* 已经选择的链接 */a:active{color:green;}div{background-color: green;color: white;padding: 25px;text-align: center;}div:hover{background-color: blue;}</style>
</head>
<body><h1>CSS 链接</h1><p><b><a href="https://blog.csdn.net/weixin_72066135?spm=1011.2124.3001.5343" target="_blank">这是一个链接</a></b></p><p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p><p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p><p>请把鼠标移动到最下面的div元素来改变其背景色</p><div>把鼠标移到我上面</div>
</body>
</html>

在这里插入图片描述

简单的工具提示悬停

把鼠标悬停到 <div> 元素以显示<p>元素（类似工具提示的效果）：

悬停到我上面来显示<p>元素。

<!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>/* 未访问的链接 */a:link{color:black;/* 去掉链接中的下划线 */text-decoration: none;}/* 已访问的链接 */a:visited{color:red;}/* 鼠标悬停链接 */a:hover{color:aqua;}/* 已经选择的链接 */a:active{color:green;}/* div{background-color: green;color: white;padding: 25px;text-align: center;}div:hover{background-color: blue;} */p{display: none;background-color: yellow;padding: 20px;}div:hover p{display: block;}</style>
</head>
<body><h1>CSS 链接</h1><p><b><a href="https://blog.csdn.net/weixin_72066135?spm=1011.2124.3001.5343" target="_blank">这是一个链接</a></b></p><p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p><p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p><!-- <p>请把鼠标移动到最下面的div元素来改变其背景色</p><div>把鼠标移到我上面</div> --><div>请把鼠标移动到我上面来显示p元素<p>哈哈！我在这里</p></div>
</body>
</html>

在这里插入图片描述

force 伪类选择器

选取获取焦点的 input 表单元素.

    <div class="three"><input type="text"><input type="text"><input type="text"><input type="text"></div>

css:

        /* 此时被选中的表单的字体就会变成红色. */.three>input:focus {color: red;}

在这里插入图片描述

为超链接添加不同样式

本例演示如何向超链接添加其他样式

<!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>a.one:link {color:#ff0000;}a.one:visited {color:#0000ff;}a.one:hover {color:#ffcc00;}a.two:link {color:#ff0000;}a.two:visited {color:#0000ff;}a.two:hover {font-size:150%;}a.three:link {color:#ff0000;}a.three:visited {color:#0000ff;}a.three:hover {background:#66ff66;}a.four:link {color:#ff0000;}a.four:visited {color:#0000ff;}a.four:hover {font-family:monospace;}a.five:link {color:#ff0000;text-decoration:none;}a.five:visited {color:#0000ff;text-decoration:none;}a.five:hover {text-decoration:underline;}</style>
</head>
<body><p>请把鼠标移到链接上并观察样式的变化：</p><p><b><a class="one" href="/index.html" target="_blank">此链接改变颜色</a></b></p><p><b><a class="two" href="/index.html" target="_blank">此链接改变字体大小</a></b></p><p><b><a class="three" href="/index.html" target="_blank">此链接改变背景色</a></b></p><p><b><a class="four" href="/index.html" target="_blank">此链接改变字体族</a></b></p><p><b><a class="five" href="/index.html" target="_blank">此链接改变文本装饰</a></b></p>
</body>
</html>

在这里插入图片描述

小结

在这里插入图片描述

相关文章：

【css】基础（一）

本专栏内容为&#xff1a;前端专栏 记录学习前端&#xff0c;分为若干个子专栏&#xff0c;html js css vue等 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;css专栏 &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &a…...

编程日记 2024/12/12 0:49:46

springboot415社区网格化管理平台的构建-(论文+源码)_kaic

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本社区网格化管理平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据…...

编程日记 2024/12/12 0:48:44

如何在 Ubuntu 上安装开源监控工具 Uptime Kuma

简介 Uptime Kuma&#xff08;或简称 Kuma&#xff09;是一个开源监控工具&#xff0c;用于监控 HTTP、HTTPS、DNS 等协议的服务。Uptime Kuma 提供多种功能&#xff0c;如多语言支持、多个状态页面、代理支持等。 接下来&#xff0c;我将一步一步教大家如何进行安装和部署&am…...

编程日记 2024/12/12 0:47:41

复习 part one

synchronized 和 ReentrantLock的区别 synchronized 和 ReentrantLock 都是 Java 中提供的可重入锁&#xff0c;二者的主要区别有以下 5 个&#xff1a; 用法不同&#xff1a;synchronized 可以用来修饰普通方法、静态方法和代码块&#xff0c;而 ReentrantLock 只能用于代码块…...

编程日记 2024/12/12 0:45:39

【工业机器视觉】基于深度学习的水表盘读数识别（3-数据标注与转换）

【工业机器视觉】基于深度学习的仪表盘识读&#xff08;2&#xff09;-CSDN博客 数据标注 标注扩展 Labelme 和 LabelImg 都是用于创建机器学习和计算机视觉项目所需标注数据的工具。它们都允许用户通过图形界面手动标注图像&#xff0c;但各自有其特点和适用场景。 Labelme…...

编程日记 2024/12/12 0:43:36

python数据分析之爬虫基础：selenium详细讲解

目录 1、selenium介绍 2、selenium的作用&#xff1a; 3、配置浏览器驱动环境及selenium安装 4、selenium基本语法 4.1、selenium元素的定位 4.2、selenium元素的信息 4.3、selenium元素的交互 5、Phantomjs介绍 6、chrome handless模式 1、selenium介绍 &#xff08;1…...

编程日记 2024/12/12 0:42:35

Tips--解决esptool经pyinstaller打包后无法使用的问题

esptool打包后失效解决方法 问题1原因解决方法问题2原因解决方法 问题1 esptool经过pyinstaller打包成exe后&#xff0c;提示错误&#xff1a;Stub flasher JSON file for esp32 not found 原因 pyinstaller在进行esptool打包的时候&#xff0c;通常不用讲Stub flaser Json文…...

编程日记 2024/12/12 0:40:33

Apache DolphinScheduler 限制秒级别的定时调度

背景 Apache DolphinScheduler 定时任务配置采用的 7 位 Crontab 表达式&#xff0c;分别对应秒、分、时、月天、月、周天、年。 在团队日常开发工作中&#xff0c;工作流的定时调度一般不会细化到秒级别。但历史上出现过因配置的疏忽大意而产生故障时间&#xff0c;如应该配…...

编程日记 2024/12/12 0:39:33

Oracle 数据库创建用户并分配只读的权限

引言 在 Oracle 数据库的日常运维和开发过程中&#xff0c;用户管理是确保数据安全与访问控制的关键环节。通过合理创建用户并分配适当的权限&#xff0c;可以有效防止未授权的访问和操作。本文将详细介绍如何在 Oracle 数据库中&#xff1a; 创建新用户并设置复杂密码。授予…...

编程日记 2024/12/12 0:32:25

2个GitHub上最近比较火的Java开源项目

1. SpringBlade 微服务架构 标题 SpringBlade 微服务架构 摘要 SpringBlade 是一个由商业级项目升级优化而来的微服务架构&#xff0c;采用Spring Boot 3.2、Spring Cloud 2023等核心技术构建&#xff0c;遵循阿里巴巴编码规范&#xff0c;提供基于React和Vue的两个前端框架&am…...

编程日记 2024/12/12 0:31:24

【jvm】为什么要有GC

目录 1. 自动内存管理2. 提升程序稳定性3. 优化性能4. 跨平台能力5. 分代回收策略 1. 自动内存管理 1.JVM中的GC机制负责自动管理内存&#xff0c;这意味着开发人员不需要手动分配和释放内存。2.这一特性大大简化了Java程序的内存管理&#xff0c;降低了内存泄漏和内存溢出等问…...

编程日记 2024/12/12 0:30:23

【Rhino】【Python】根据contour创建地形mesh

将surface生成open curve封闭 #codingutf-8 import rhinoscriptsyntax as rs import mathdef adjust_endpoints():# 获取指定图层中的所有曲线all_objects rs.ObjectsByLayer("Level 19")if not all_objects:print("在Level 19图层中未找到对象")return#…...

编程日记 2024/12/12 0:27:18

蓝桥杯软件赛系列---lesson1

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 我们今天会再开一个系列&#xff0c;那就是蓝桥杯系列&#xff0c;我们会从最基础的开始讲起&#xff0c;大家想要备战明年蓝桥杯的&#xff0c;让我们一起加油。 工具安装 DevC…...

编程日记 2024/12/12 0:26:15

NanoLog起步笔记-1

nonolog起步笔记-1 背景与上下文写在前面Nanolog与一般的实时log的异同现代log的一般特性Nanolog的选择 背景与上下文 因为工作中用到了NanoLog。有必要研究一下。 前段时间研究了许多内容&#xff0c;以为写了比较详实的笔记&#xff0c;今天找了找&#xff0c;不仅笔记没找到…...

编程日记 2024/12/12 0:20:02

汽车车牌标记支持YOLO，COCO，VOC三种格式标记，4000张图片的数据集

本数据集支持YOLO&#xff0c;COCO&#xff0c;VOC三种格式标记汽车车牌&#xff0c;无论是新能源汽车还是油车都能识别标记&#xff0c;该数据集一共包含4000张图片 数据集分割 4000总图像数 训练组 70&#xff05; 2800图片 有效集 20&#xff05; 800图片 测…...

编程日记 2024/12/12 0:14:56

leetcode33.搜索旋转排序数组

整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], ..., nums[n-1], nums[0], nums[1], ..…...

编程日记 2024/12/12 0:13:55

Ansible自动化运维（三）playbook剧本详解

Ansible自动化运维这部分我将会分为五个部分来为大家讲解 &#xff08;一&#xff09;介绍、无密钥登录、安装部署、设置主机清单 &#xff08;二&#xff09;Ansible 中的 ad-hoc 模式 模块详解&#xff08;15&#xff09;个 &#xff08;三&#xff09;Playbook 模式详解 …...

编程日记 2024/12/12 0:12:53

通过PS和Unity制作2D动画之二：IK的使用

一、IK的概念 IK&#xff1a;Inverse Kinematics&#xff0c;反向动力学。 &#xff08;1&#xff09;正向动力学 在骨骼动画中&#xff0c;构建骨骼的方法被称为正向动力学。它的表现形式是&#xff1a;子骨骼&#xff08;关节&#xff09;的位置根据父骨骼&#xff08;关节…...

编程日记 2024/12/12 0:11:52

图像边缘检测原理和常用检测算子及MATLAB实现

一、边缘和边缘检测的概念 图像边缘是指图像中灰度值发生急剧变化的地方&#xff0c;这些变化通常对应于图像中物体的轮廓、边界或纹理的突变处。在数字图像处理中&#xff0c;边缘是图像的一个重要特征&#xff0c;它包含了关于物体形状、位置和大小等关键信息。 边缘检测是数…...

编程日记 2024/12/12 0:05:47

企业经营数据分析系统：提升决策能力的利器

搭建企业经营数据分析系统是当今企业绕不开的话题&#xff0c;企业想要在竞争激烈的市场当中突围而出&#xff0c;需要对于企业内部的各种数据了然于胸&#xff0c;同时对于外部的数据也有敏锐的把握能力&#xff0c;因此企业构建自身的经营性数据分析系统就显得尤其重要。作为…...

编程日记 2024/12/12 0:03:45

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/7/11 3:22:21

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/7/11 0:56:43

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/7/6 15:26:24

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/7/10 18:35:03

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/6/23 15:05:31

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/7/10 10:58:41

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/7/7 23:05:56

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/6/21 15:09:10

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04

[拓扑优化] 1.概述

常见的拓扑优化方法有&#xff1a;均匀化法、变密度法、渐进结构优化法、水平集法、移动可变形组件法等。 常见的数值计算方法有&#xff1a;有限元法、有限差分法、边界元法、离散元法、无网格法、扩展有限元法、等几何分析等。 将上述数值计算方法与拓扑优化方法结合&#…...

编程新知 2025/7/7 16:57:10