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

前端编程艺术（2）----CSS

news 文章来源：https://blog.csdn.net/lys20221113242/article/details/142680530 2025/5/15 15:02:38

1.CSS

2.CSS引入

3.选择器

1.标签选择器

2.类选择器

3.id选择器

4.属性选择器

5.后代选择器

5.直接子元素选择器

6.伪类选择器

链接相关

动态伪类

结构化伪类

否定伪类

其他伪类

UI元素状态伪类

4.字体

1.font-family

2.font-size

3.font-style

4.font-weight

5.font-variant

6.text

5.background属性

6.盒子模型

7.圆角和阴影

8.动画

1.CSS

CSS，全称为层叠样式表（Cascading Style Sheets），是一种用来控制网页布局和样式的标记语言。它与HTML结合使用，通过为HTML元素应用样式来美化和格式化网页。

使用CSS，可以将网页的布局、颜色、字体、背景、边框等各个方面进行精确控制，从而使网页呈现出专业、统一和美观的外观。CSS通过选择器和声明来定义样式，选择器用于选中要应用样式的HTML元素，声明则定义元素的样式属性和值。

2.CSS引入

在HTML文件中引入CSS有三种方式：内部样式表、外部样式表和行内样式。

内部样式表：将CSS代码写在HTML文件的<style>标签中。这种方法适用于单个页面的样式定义。示例代码如下：

<!DOCTYPE html>
<html>
<head><style>p {color: blue;font-size: 18px;}</style>
</head>
<body><p>This is a paragraph with blue color and font size of 18px.</p>
</body>
</html>

外部样式表：将CSS代码写在一个单独的CSS文件中，然后在HTML文件中使用<link>标签引入该CSS文件。外部样式表适用于多个页面共享相同样式的情况，有利于代码复用和维护。示例代码如下：

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><p>This is a paragraph with styles defined in the external CSS file.</p>
</body>
</html>

在上面的例子中，styles.css是一个独立的CSS文件，包含了样式定义。

行内样式：将CSS代码直接写在HTML标签的style属性中。这种方法适用于只对某个具体元素应用特定样式的情况。示例代码如下：

<!DOCTYPE html>
<html>
<body><p style="color: red; font-size: 20px;">This is a paragraph with inline styles.</p>
</body>
</html>

这种方式直接应用样式于指定元素，但不易于维护和复用。

通常，外部样式表是推荐的方式，因为它可以使CSS和HTML文件分离，使代码更易于维护和管理，并且允许多个页面共享相同的样式。

3.选择器

CSS选择器是用来选中HTML元素并应用样式的一种方式。它可以根据元素的标签名、类名、ID、属性和关系等进行选择。

1.标签选择器

定义：标签选择器通过元素的标签名来选择页面中所有该类型的元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{color: red;font-size: 40px;}</style>
</head>
<body><p style="color: green">hello world</p><p>hello 小比特</p><h1 style="color: blue;font-size: 50px">你好</h1>
</body>
</html>

2.类选择器

定义：类选择器通过元素的类属性值来选择页面中所有具有该类名的元素。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css03.css">
</head>
<body><p class="eat">吃饭</p><p class="sleep">睡觉</p><p class="game">玩游戏</p>
</body>
</html>.eat{color:red;
}
.sleep{color: green;
}
.game{color: blue;
}
.game{font-size: 40px;
}

3.id选择器

定义：ID选择器通过元素的ID属性值来选择页面中具有该ID的唯一元素。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css04.css">
</head>
<body><p id="fe">前端开发</p><p id="server">后端开发</p>
</body>
</html>#fe {color: red;
}
#server{color: green;
}
*{font-size: 40px;
}

4.属性选择器

定义：属性选择器通过元素的特定属性及其值来选择元素。

实例：[attribute]：选择了所有具有指定属性的元素。

[attribute=value]：选择了所有属性值恰好为特定值的元素。

5.后代选择器

定义：后代选择器通过两个选择器并用空格分隔，选择第一个选择器内部的所有匹配第二个选择器的后代元素。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>ol li{color: rebeccapurple;}</style>
</head>
<body><ul><li>吃饭</li><li>吃饭</li><li>吃饭</li></ul><ol><li>吃饭</li><li>吃饭</li><li>吃饭</li></ol>
</body>
</html>

5.直接子元素选择器

定义：直接子元素选择器通过两个选择器并用大于号（>）分隔，选择第一个选择器的直接子元素，这些子元素必须匹配第二个选择器。

示例：ul>li选择了所有直接位于<ul>元素内部的<li>元素。

6.伪类选择器

定义：伪类选择器用于选择处于特定状态的元素，它们以冒号（:）开头。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>a{color: black;}a:hover{color: red;}a:active{color: green;}input{color: blue;}input:hover{color: #3B475F;}</style>
</head>
<body><a href="#">不跳转</a><input type="button" value="按钮">
</body>
</html>

链接相关

:link - 选择未被访问的链接。
:visited - 选择已被访问的链接。
:hover - 选择鼠标悬停在元素上的状态。
:active - 选择正在被激活的链接（鼠标按下时）。

动态伪类

:focus - 选择获得焦点的元素（通常是输入字段）。
:target - 选择当前活动的锚点目标。

结构化伪类

:first-child - 选择其父元素的第一个子元素。
:last-child - 选择其父元素的最后一个子元素。
:first-of-type - 选择其父元素下特定类型的第一个子元素。
:last-of-type - 选择其父元素下特定类型的最后一个子元素。
:only-child - 选择其父元素下唯一的子元素。
:only-of-type - 选择其父元素下唯一类型的子元素。
:nth-child(n) - 选择其父元素的第n个子元素。
:nth-last-child(n) - 选择其父元素的倒数第n个子元素。
:nth-of-type(n) - 选择其父元素下特定类型的第n个子元素。
:nth-last-of-type(n) - 选择其父元素下特定类型的倒数第n个子元素。

否定伪类

:not(selector) - 选择不符合指定选择器的元素。

其他伪类

:root - 选择文档的根元素，通常是HTML元素。
:empty - 选择没有子元素的元素（包括文本节点）。
:lang(language) - 选择带有指定语言的语言标签的元素。

UI元素状态伪类

:enabled - 选择已启用的表单元素。
:disabled - 选择被禁用的表单元素。
:checked - 选择被选中的单选按钮或复选框。
:default - 选择默认选中的表单元素。
:valid - 选择输入验证正确的元素。
:invalid - 选择输入验证错误的元素。

4.字体

CSS字体属性用于定义文本的字体系列、大小、加粗、风格和变体。

1.font-family

font-family 属性用于指定文本的字体族。可以指定一个或多个字体名称作为备选，以防某个字体不可用。

2.font-size

font-size 属性用于设置文本的大小。可以使用多种单位，如像素（px）、点（pt）、em、rem、百分比等。

font-size: 16px; /* 像素单位 */
font-size: 1em; /* 相对于父元素的字体大小 */
font-size: 100%; /* 相对于父元素的字体大小 */

3.font-style

font-style 属性用于指定文本的字体风格，通常用于指定斜体。

font-style: normal; /* 正常字体 */
font-style: italic; /* 斜体 */
font-style: oblique; /* 倾斜字体 */

4.font-weight

font-weight 属性用于设置文本的粗细。

font-weight: normal; /* 正常粗细 */
font-weight: bold; /* 加粗 */
font-weight: 100; /* 数值范围从100到900，400是正常，700是加粗 */

5.font-variant

font-variant 属性用于设置小型大写字母文本。

font-variant: normal; /* 正常字体 */
font-variant: small-caps; /* 小型大写字母 */

6.text

在CSS中，text 是一个简写属性，它允许你一次性设置多个文本相关的属性。text 属性是CSS中 font 属性的一个子集，专门用于控制文本的外观，不包括字体大小、家族或样式。

text-align: 设置文本的对齐方式（如左对齐、右对齐、居中对齐或两端对齐）。
text-decoration: 设置文本的装饰线（如下划线、上划线、删除线或闪烁）。
text-indent: 设置首行文本的缩进。
text-transform: 控制文本的大小写（如大写、小写或首字母大写）。
line-height: 设置行间的距离。
letter-spacing: 设置字符间的距离。
word-spacing: 设置单词间的距离。

<!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 {font-size: 30px;font-style: italic;line-height: 2;font-family: 楷体;text-indent: 2em;}h3 {background-color: aqua;color: rgb(0, 0, 0, 0.5);font-weight: 400;font: italic 700 30px/2 楷体;text-align: center;text-decoration: underline;}div span {font-weight: 700;height: 100px;background-color: skyblue;line-height: 100px;}</style>
</head><body><h3>h3</h3><p>字体大小</p><div>字体大小</div><p>荣都地图的大规模宣传活动中，其中包括吴彦祖 Daniel Wu与李政宰的合作，这一合作在全球用户当中，引起了热烈的反响。由山姆·哈格雷夫执导的宣传片“荣耀之都：荣都”中，描述了吴彦祖饰演的 "Alpha "与李政宰饰演的 "Beta "之间的激烈对抗。"Beta "是为了给被 "Alpha "小队杀害的弟弟报仇而加入 "荣都"战场的，而 "Alpha "则是为了确保整个小队成员的生存为目标。该宣传片在12月6日通过PUBG官方社区，全球官方账号等同时公开，总点击量达到百万次以上。</p><div><span>儿子</span></div>
</body></html>

5.background属性

在CSS中，background 是一个复合属性，它允许你一次性设置多个背景相关的属性。使用 background 属性，你可以控制元素的颜色、图像、位置、尺寸、重复方式、滚动行为和附件等。以下是 background 属性可以设置的子属性：

background-color: 设置元素的背景颜色。
background-image: 设置元素的背景图像。
background-position: 设置背景图像的位置。
background-size: 设置背景图像的尺寸。
background-repeat: 设置背景图像是否以及如何重复。
background-attachment: 设置背景图像是否随页面滚动。
background-origin: 设置背景图像的定位区域。
background-clip: 设置背景的绘制区域。
background-blend-mode: 设置背景层的混合模式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{background-color: #00ff33;}div{background-image: url(https://image.meiye.art/pic_afonTgKOO5h3R1lblU4bl?imageMogr2/thumbnail/560x/interlace/1);background-repeat: no-repeat;width: 300px;height: 300px;background-position: 100px center;background-size: contain;}</style>
</head>
<body><div>这是我在学习背景相关的属性</div>
</body>
</html>

6.盒子模型

CSS盒子模型是一个用于描述HTML元素布局和定位的概念。每个HTML元素都被视为一个矩形盒子，该盒子由四个主要组件组成：内容区域、内边距、边框和外边距。

内容区域（Content Area）：位于盒子的内部，用于显示元素的实际内容，例如文本、图片等。
内边距（Padding）：内容区域与边框之间的空白区域。内边距可以设置为固定的像素值或相对于元素大小的百分比。
边框（Border）：围绕内容区域和内边距的线条，用于定义元素的边界。边框可以设置为不同的样式、宽度和颜色。
外边距（Margin）：边框与其他元素之间的空白区域。外边距可以用来控制元素与周围元素之间的距离。

这四个组件共同构成了一个完整的盒子，它们的宽度和高度都可以通过CSS属性进行设置。实际上，CSS盒子模型中的盒子大小可以通过以下公式计算：

盒子宽度 = 内容区域宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

盒子高度 = 内容区域高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

内容区域（Content Area）：
- 宽度（width）和高度（height）属性定义了内容区域的尺寸。
内边距（Padding）：
- padding-top、padding-right、padding-bottom、padding-left 属性定义了内容与边框之间的空间。
- 也可以使用 padding 简写属性，它可以一次性设置四个方向的内边距。
边框（Border）：
- border 属性用于设置边框的宽度、样式和颜色。
- border-style、border-width、border-color 分别用于设置边框的样式、宽度和颜色。
- 也可以针对单个边（如 border-top、border-right 等）或单个边框属性（如 border-top-style、border-right-width 等）进行设置。
外边距（Margin）：
- margin-top、margin-right、margin-bottom、margin-left 属性定义了元素与其他元素之间的空间。
- margin 简写属性可以一次性设置四个方向的外边距。

box-sizing: content-box;（默认）：使用标准盒模型。
box-sizing: border-box;：使用替代盒模型，其中 width 和 height 包含了内容、内边距和边框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 200px;height: 100px;border-color: black;border-style: solid;border-width: 10px;box-sizing: border-box;}</style>
</head>
<body><div></div>
</body>
</html>

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width: 200px;height: 100px;padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;}</style>
</head>
<body><div>这是一个div</div>
</body>
</html>

7.圆角和阴影

圆角（border-radius）是CSS属性，用于为一个盒子的边框添加圆角效果。它可以接受一个长度值或一个百分比值作为参数，表示边框的圆角大小。以下是一些示例：

/* 添加一个相同大小的圆角 */
.box {border-radius: 10px;
}/* 添加不同大小的圆角 */
.box {border-radius: 10px 20px 30px 40px;
}/* 添加水平方向的圆角 */
.box {border-radius: 10px 20px;
}/* 添加垂直方向的圆角 */
.box {border-radius: 20px / 10px;
}

阴影（box-shadow）是CSS属性，用于为一个盒子添加阴影效果。它可以接受多个参数，包括阴影的颜色、偏移量、模糊半径和扩散半径。以下是一些示例：

/* 添加一个黑色的阴影 */
.box {box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}/* 添加一个红色的阴影 */
.box {box-shadow: 0 0 10px red;
}/* 添加一个带有偏移量和扩散半径的阴影 */
.box {box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
}

通过使用这两个属性，我们可以为盒子元素添加圆角和阴影效果，从而实现更加美观和独特的视觉效果。

<!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>div {margin: 50px auto;width: 200px;height: 80px;background-color: orange;border-radius: 20px;border-radius: 40px;box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5);}</style>
</head><body><div></div>
</body></html>

8.动画

CSS3 提供了 2D 和 3D 变换的功能，可以通过 transform 属性来实现。下面分别介绍 2D 变换和 3D 变换的方法和示例：

2D 变换（2D Transformations）：

平移（Translate）：使用 translate() 函数可以将元素沿 X 和 Y 轴进行平移。

.box {transform: translate(50px, 50px);
}

缩放（Scale）：使用 scale() 函数可以按比例缩放元素的大小。

.box {transform: scale(1.5);
}

旋转（Rotate）：使用 rotate() 函数可以将元素沿 Z 轴旋转。

.box {transform: rotate(45deg);
}

倾斜（Skew）：使用 skew() 函数可以将元素沿 X 和 Y 轴进行倾斜。

.box {transform: skew(20deg, 10deg);
}

3D 变换（3D Transformations）：

平移（Translate）：使用 translate3d() 函数可以将元素在三个轴上进行平移。

.box {transform: translate3d(50px, 50px, 0);
}

缩放（Scale）：使用 scale3d() 函数可以在三个轴上按比例缩放元素的大小。

.box {transform: scale3d(1.5, 1.5, 1);
}

旋转（Rotate）：使用 rotateX()、rotateY() 和 rotateZ() 函数可以分别围绕 X、Y 和 Z 轴旋转元素。

.box {transform: rotateX(45deg);
}

透视（Perspective）：使用 perspective 属性可以为 3D 变换添加透视效果。

.container {perspective: 1000px;
}.box {transform: rotateY(45deg);
}

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.transform-box {width: 100px;height: 100px;background-color: #3498db;margin: 20px;transition: transform 0.5s; /* 过渡效果 */}.transform-box:hover {transform: rotate(180deg); /* 旋转180度 */}.scale-box {width: 100px;height: 100px;background-color: #2ecc71;margin: 20px;transition: transform 0.5s;}.scale-box:hover {transform: scale(1.5); /* 缩放1.5倍 */}.skew-box {width: 100px;height: 100px;background-color: #f1c40f;margin: 20px;transition: transform 0.5s;}.skew-box:hover {transform: skew(20deg, 10deg); /* 倾斜20度X轴和10度Y轴 */}.translate-box {width: 100px;height: 100px;background-color: #e74c3c;margin: 20px;transition: transform 0.5s;}.translate-box:hover {transform: translate(50px, 50px); /* 向右和向下移动50像素 */}.container {perspective: 1000px; /* 视角距离，增强3D效果 */}.rotate-box, .translate-box, .scale-box {width: 100px;height: 100px;background-color: #3498db;margin: 20px;display: inline-block;transition: transform 0.5s;}.rotate-box:hover {transform: rotateX(180deg); /* 绕X轴旋转 */}.rotate-box:nth-child(2):hover {transform: rotateY(180deg); /* 绕Y轴旋转 */}.rotate-box:nth-child(3):hover {transform: rotateZ(180deg); /* 绕Z轴旋转 */}.translate-box:hover {transform: translateZ(100px); /* 沿Z轴移动 */}.scale-box:hover {transform: scale3d(1.5, 1.5, 1.5); /* 在三个轴上缩放 */}</style>
</head>
<body><div class="transform-box">Rotate</div><div class="scale-box">Scale</div><div class="skew-box">Skew</div><div class="translate-box">Translate</div><div class="container"><div class="rotate-box">Rotate X</div><div class="rotate-box">Rotate Y</div><div class="rotate-box">Rotate Z</div><div class="translate-box">Translate Z</div><div class="scale-box">Scale</div></div></body>
</html>

9.弹性布局

在CSS中，弹性布局使用弹性盒模型（Flexbox）来实现。以下是一些常用的CSS属性和值来创建弹性布局：

display: flex; 设置父容器为弹性容器。
flex-direction: row | row-reverse | column | column-reverse; 设置弹性项目在主轴上的排列方向，默认是从左到右（row）。
flex-wrap: nowrap | wrap | wrap-reverse; 设置弹性项目是否换行，默认是不换行（nowrap）。
justify-content: flex-start | flex-end | center | space-between | space-around; 设置弹性项目在主轴上的对齐方式，默认是靠左对齐（flex-start）。
align-items: flex-start | flex-end | center | baseline | stretch; 设置弹性项目在交叉轴上的对齐方式，默认是靠上对齐（flex-start）。
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 设置多行弹性项目在交叉轴上的对齐方式，默认是靠上对齐（flex-start）。
flex-grow: <number>; 设置弹性项目的放大比例，默认为0，表示不放大。
flex-shrink: <number>; 设置弹性项目的缩放比例，默认为1，表示可以缩小。
flex-basis: <length> | auto; 设置弹性项目在主轴上的初始大小，默认为auto。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; 综合设置弹性项目的放大比例、缩放比例和初始大小。

前端编程艺术（2）----CSS

目录 1.CSS 2.CSS引入 3.选择器 1.标签选择器 2.类选择器 3.id选择器 4.属性选择器 5.后代选择器 5.直接子元素选择器 6.伪类选择器链接相关动态伪类结构化伪类否定伪类其他伪类 UI元素状态伪类 4.字体 1.font-family 2.font-size 3.font-style 4.fo…...

编程日记 2024/10/7 4:25:20

前端的全栈混合之路Meteor篇（二）：RPC方法注册及调用

在Meteor 3.0中，RPC（远程过程调用）机制是实现前后端数据交互的重要特性。通过RPC，前端可以轻松调用后端方法（Methods）并获取数据，而后端的逻辑也可以同步或异步执行并返回结果。本文将详细介绍M…...

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

重学SpringBoot3-集成Redis（三）之注解缓存策略设置

更多SpringBoot3内容请关注我的专栏：《SpringBoot3》期待您的点赞👍收藏⭐评论✍ 重学SpringBoot3-集成Redis（三）之注解缓存策略设置 1. 引入 Redis 依赖2. 配置 RedisCacheManager 及自定义过期策略2.1 示例代码：自定…...

编程日记 2024/10/7 4:22:16

【C++11】新特性

前言： C11 是C编程语言的一个重要版本，于2011年发布。它带来了数量可观的变化，包含约 140 个新特性，以及对 C03 标准中约600个缺陷的修正，更像是从 C98/03 中孕育出的新语言列表初始化 C11 中的列表初始化&#xff0…...

编程日记 2024/10/7 4:17:13

【游戏模组】重返德军总部2009高清重置MOD，建模和材质全部重置，并且支持光追效果，游戏画质大提升

各位好，今天小编给大家带来一款新的高清重置MOD，本次高清重置的游戏叫《重返德军总部2009》2009年发布，我相信很多玩家已经玩过了，如果你还没有玩过我也可以和你简单介绍一下剧情，这款游戏故事背景接续在《重返德军总部…...

编程日记 2024/10/7 4:16:12

CGLib动态代理和JDK动态代理Demo、ASM技术尝鲜

本文主要介绍CGLib和JDK动态代理的使用，不对源码进行深入分析。代码可直接复制使用。类型机制回调方式适用场景效率 JDK动态代理委托机制。代理类和目标类都实现了同样的接口。InvocationHandler持有目标类。代理类委托InvocationHandler去调用目标类原…...

编程日记 2024/10/7 4:15:11

[C++]使用纯opencv部署yolov11-pose姿态估计onnx模型

【算法介绍】使用纯OpenCV部署YOLOv11-Pose姿态估计ONNX模型是一项具有挑战性的任务，因为YOLOv11通常是用PyTorch等深度学习框架实现的，而OpenCV本身并不直接支持加载和运行PyTorch模型。然而，可以通过一些间接的方法来实现这一目标&#x…...

编程日记 2024/10/7 4:11:08

python you-get下载视频

You-Get是一个使用Python开发的命令行工具，用于下载网络上的音视频资源。你可以通过pip安装You-Get，具体操作如下： 打开命令行工具，输入pip install you-get，然后回车执行命令 You-Get还允许你指定下载的视频格式和质…...

编程日记 2024/10/7 4:10:07

SCUC博客摘录「储能参与电能市场联合出清：SCUC和SCED模型应用于辅助服务调频市场（IEEE39节点系统）」2024年10月6日

2.1 SCUC模型在本方法中，首先利用SCUC模型确定机组出力计划和储能充放电计划。SCUC模型是电力系统经济调度的重要工具，通过优化发电机组出力计划和调度，实现电力系统的经济性和可靠性。在考虑储能的情况下，SCUC模型需要考虑储能的…...

编程日记 2024/10/7 4:09:06

Git分支-团队协作以及GitHub操作

Git分支操作在版本控制过程中，同时推进多个任务> 程序员开发与开发主线并行，互不影响分支底层也是指针的引用 hot-fix:相当于若在进行分支合并后程序出现了bug和卡顿等现象，通过热补丁来进行程序的更新，确保程序正常运行常…...

编程日记 2024/10/7 4:04:01

力扣刷题 | 两数之和

目前主要分为三个专栏，后续还会添加： 专栏如下： C语言刷题解析 C语言系列文章我的成长经历感谢阅读！ 初来乍到，如有错误请指出，感谢！ 给定一个整数数组 nums 和…...

编程日记 2024/10/7 4:03:00

[C#]winform部署官方yolov11-obb旋转框检测的onnx模型

【官方框架地址】 https://github.com/ultralytics/ultralytics 【算法介绍】 Yolov11-obb（You Only Look Once version 8 with Oriented Bounding Boxes）是一种先进的对象检测算法，它在传统的Yolov3和Yolov4基础上进行了优化，加…...

编程日记 2024/10/7 4:00:58

【GC日志和OOM日志分析】JVM GC日志和OOM Dump文件分析

1 缘起充电、充电、充电。增加一些必备的知识，帮助后续使用。 2 配置JVM参数为分析GC日志以及OOM相关信息，配置JVM参数，分为三个部分： （1）堆内存，包括年轻代、最大堆内存； &a…...

编程日记 2024/10/7 3:59:57

【电路】1.1 实际电路和电路模型

1.1 实际电路和电路模型科学理论的研究对象是现实世界背后的抽象世界，如： 数学中的 ∞ \infty ∞，经典力学中“质点”的概念，牛顿运动定律（如惯性定律，如果一个物体不受外力情况下，一直保持匀…...

编程日记 2024/10/7 3:58:56

Vue - 打包部署

vscode找到NPM脚本，点击build。目录下出现dist目录则表示安装成功。安装Nginxnginx: download 目录用途conf配置文件目录html静态资源文件目录logs日志文件目录temp临时文件目录将刚刚打包好的文件放到html目录下。点击nginx.exe，用localhost:默认…...

编程日记 2024/10/7 3:57:55

spring揭秘25-springmvc03-其他组件（文件上传+拦截器+处理器适配器+异常统一处理）

文章目录【README】【1】文件上传与MultipartResolver【1.1】使用MultipartResolver进行文件上传【1.2】springmvc处理multipart多部件请求流程【1.3】使用springmvc上传文件代码实现（springmvc6.10版本）： 【2】Handler与HandlerAdaptor&…...

编程日记 2024/10/7 3:54:52

springboot项目中属性的使用优先级；maven编译插件切换环境变量

概述在项目部署时，相关的生产环境和测试环境是分开的，但是代码是同一套； 所以一般会有多套变量； 项目中默认变量（一般是测试环境） 线上变量（线上数据较敏感，一般也不会放在代码中&…...

编程日记 2024/10/7 3:53:51

【Qt】控件概述 (1）—— Widget属性

控件概述 1. QWidget核心属性1.1核心属性概述1.2 enable1.3 geometry——窗口坐标1.4 window frame的影响1.4 windowTitle——窗口标题1.5 windowIcon——窗口图标1.6 windowOpacity——透明度设置1.7 cursor——光标设置1.8 font——字体设置1.9 toolTip——鼠标悬停提示设置1…...

编程日记 2024/10/7 3:51:49

（笔记）第三期书生·浦语大模型实战营（十一卷王场）–书生基础岛第3关---浦语提示词工程实践

学员闯关手册：https://aicarrier.feishu.cn/wiki/ZcgkwqteZi9s4ZkYr0Gcayg1n1g?open_in_browsertrue 课程视频：https://www.bilibili.com/video/BV1cU411S7iV/ 课程文档： https://github.com/InternLM/Tutorial/tree/camp3/docs/L1/Prompt 关…...

编程日记 2024/10/7 3:48:46

OpenCV视频I/O(11）视频采集类VideoCapture之设置视频捕获设备的属性函数 set()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述在 VideoCapture 中设置一个属性。在OpenCV中，cv::VideoCapture::set() 函数用于设置视频捕获设备的属性。这些属性可以包括分辨率、…...

编程日记 2024/10/7 3:45:43

数据结构之树（3）

一、森林和树的转换重要！ 树->二叉树由于孩子兄弟链式存储和二叉树链式存储本质相同，故树可转换为二叉树。森林->二叉树森林：m棵互不相交的树的集合森林->树树->二叉树森林中各个树的根节点之间视为兄弟关系二、树…...

编程日记 2024/10/7 3:44:42

螺蛳壳里做道场：老破机搭建的私人数据中心---Centos下docker学习02（yum源切换及docker安装配置）

2 前期工作 2.1 切换yum源并更新删除/etc/yum.repos.d/原有repo文件，将Centos-7.repo库文件拷贝到该目录下。然后清楚原有缓存yum clean all 生成新的缓存yum makecache 更新yum update –y 然后再确认/etc/yum.repos.d/不会有其他库文件，只留下…...

编程日记 2024/10/7 3:42:40

强化学习笔记之【Q-learning算法和DQN算法】

强化学习笔记（一）——Q-learning和DQN算法核心公式文章目录强化学习笔记（一）——Q-learning和DQN算法核心公式前言：Q-learning算法DQN算法前言： 强化学习领域，繁冗复杂的大段代码里面&#…...

编程日记 2024/10/7 3:40:38

面试经验02

嵌入式简历制作指南与秋招求职建议引言秋招季即将到来，许多同学开始准备求职简历。无论你是考研失利准备就业，还是即将毕业寻找实习，一份优秀的简历都是求职的敲门砖。今天，我们将讨论如何制作嵌入式领域的求职简历&#xff0…...

编程日记 2024/10/7 3:37:35

分层图的尝试学习 1.0

分层图： 分层图的最短路： 又叫做扩点最短路。不把实际位置看做是图上的点，而是把实际位置及其状态的组合，（一个点有若干的状态，所以一个点会扩充出来若干点）看做是图上的点，然后搜索…...

编程日记 2024/10/7 3:33:31

第 31 章 javascript 之 XPath

第 31 章 XPath 1.IE 中的 XPath 2.W3C 中的 XPath 3.XPath 跨浏览器兼容 XPath 是一种节点查找手段，对比之前使用标准 DOM 去查找 XML 中的节点方式，大大降低了查找难度，方便开发者使用。但是，DOM3 级以前的标准并没有就 XPa…...

编程日记 2024/10/7 3:32:29

JavaScript中的高阶函数

高阶函数所谓高阶函数，就是操作函数的函数，它接收一个或多个函数作为参数，并返回一个新函数： 来看一个mapper()函数，将一个数组映射到另一个使用这个函数的数组上： 更常见的例子，它接收两个函…...

编程日记 2024/10/7 3:25:22

Qt6.7开发安卓程序间接连接到MySQL的方法

本文主要描述一种通过间接的方法，使得Qt开发的安卓程序可以直连到Mysql数据库的方法。本文章的方案是通过JAVA代码去连接MySQL数据库，然后C代码去调用JAVA的方法，从而实现QT开发的安卓程序去直连到MySQL数据库。本文使用 JDBC 结合 JNI&…...

编程日记 2024/10/7 3:23:09

ROW_NUMBER

How to rewrite a query which uses the ROW_NUMBER() window function in versions 5.7 or earlier before window functions were supported e.g., SELECT ROW_NUMBER() OVER (PARTITION BY fieldA) AS rownum, myTable.* FROM myTable; index 用不上的 Solution Assuming…...

编程日记 2024/10/7 3:21:53

Docker技术

目录 Docker的基本概念 Docker的核心原理 Docker的使用场景 Docker的优点 Docker的挑战为什么使用环境一致性快速启动和部署资源利用率高支持微服务架构持续集成与持续交付（CI/CD） 依赖管理简化部署流程高效资源管理生态系统丰富…...

编程日记 2024/10/7 3:20:52

1.CSS

2.CSS引入

3.选择器

1.标签选择器

2.类选择器

3.id选择器

4.属性选择器

5.后代选择器

5.直接子元素选择器

6.伪类选择器

链接相关

动态伪类

结构化伪类

否定伪类

其他伪类

UI元素状态伪类

4.字体

1.font-family

2.font-size

3.font-style

4.font-weight

5.font-variant

6.text

5.background属性

6.盒子模型

7.圆角和阴影

8.动画

9.弹性布局

相关文章：