前端编程艺术（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.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有三种方式：内部样式表、外部样式表和行内样式。

  1. 内部样式表：将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>
  1. 外部样式表：将CSS代码写在一个单独的CSS文件中，然后在HTML文件中使用&lt;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文件，包含了样式定义。

  1. 行内样式：将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>

9921713d599748c39d0aa9b896dc47cc.png

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;
}

e8ead08b89ff4e00b12ba6476d4aca7f.png

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;
}

c4779175aeb947a09b863d1a8ce7128b.png

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>

d8db56a984394a0eb08808567e73e4ae.png

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>

22476667f2bc42f586d98d1270c79214.png0e6d54e659054ed6b85d31b9d3b9496e.png86e984a544654933918fff2ba430acc5.png

链接相关

  • :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>

89969847864a4deeb09f3a42b88126df.png

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>

f6c8f29492f8483c9d8c58831deaa50d.png

6.盒子模型

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

  1. 内容区域（Content Area）：位于盒子的内部，用于显示元素的实际内容，例如文本、图片等。

  2. 内边距（Padding）：内容区域与边框之间的空白区域。内边距可以设置为固定的像素值或相对于元素大小的百分比。

  3. 边框（Border）：围绕内容区域和内边距的线条，用于定义元素的边界。边框可以设置为不同的样式、宽度和颜色。

  4. 外边距（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>

f00275695afe4afd93ce29f323abf811.png

<!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>

afe468853a8745c5b7fcf9d3cb7edf22.png

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>

d652d11141d8425983230c5a7ffc86b5.png

8.动画

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

  1. 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);
}
  1. 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>

4ea050b1a1b24864b9aede0a076234da.png

9.弹性布局 

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

  1. display: flex; 设置父容器为弹性容器。

  2. flex-direction: row | row-reverse | column | column-reverse; 设置弹性项目在主轴上的排列方向，默认是从左到右（row）。

  3. flex-wrap: nowrap | wrap | wrap-reverse; 设置弹性项目是否换行，默认是不换行（nowrap）。

  4. justify-content: flex-start | flex-end | center | space-between | space-around; 设置弹性项目在主轴上的对齐方式，默认是靠左对齐（flex-start）。

  5. align-items: flex-start | flex-end | center | baseline | stretch; 设置弹性项目在交叉轴上的对齐方式，默认是靠上对齐（flex-start）。

  6. align-content: flex-start | flex-end | center | space-between | space-around | stretch; 设置多行弹性项目在交叉轴上的对齐方式，默认是靠上对齐（flex-start）。

  7. flex-grow: <number>; 设置弹性项目的放大比例，默认为0，表示不放大。

  8. flex-shrink: <number>; 设置弹性项目的缩放比例，默认为1，表示可以缩小。

  9. flex-basis: <length> | auto; 设置弹性项目在主轴上的初始大小，默认为auto。

  10. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; 综合设置弹性项目的放大比例、缩放比例和初始大小。

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/880914.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++之多线程

C++之多线程

前言 多线程和多进程是并发编程的两个核心概念，它们在现代计算中都非常重要，尤其是在需要处理大量数据、提高程序性能和响应能力的场景中。 多线程的重要性： 资源利用率：多线程可以在单个进程中同时执行多个任务，这可以更有效地利用CPU资源，特别是在多核处理器上。 性…
阅读更多...
奔驰EQS450suv升级增强AR抬头显示HUD案例分享

奔驰EQS450suv升级增强AR抬头显示HUD案例分享

以下是奔驰 EQS450 SUV 升级增强版 AR 抬头显示的一般改装案例步骤及相关信息&#xff1a; 配件&#xff1a;通常包括显示屏、仪表模块、饰板等。 安装步骤&#xff1a; 1. 拆下中控的仪表。 2. 在仪表上预留位置切割出合适的孔位&#xff0c;用于安装显示器。 3. 将显示器…
阅读更多...
（IDEA）spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案

（IDEA）spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案

系列文章目录 文章目录 系列文章目录一、&#xff08;IDEA&#xff09;spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案1.资料 一、&#xff08;IDEA&#xff09;spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案 1.资料…
阅读更多...
Python案例--水仙花数的探索之旅

Python案例--水仙花数的探索之旅

一、引言 水仙花数&#xff0c;也称为阿姆斯特朗数&#xff0c;是一种特殊的三位数&#xff0c;其各位数字的立方和等于其本身。例如&#xff0c;153就是一个水仙花数&#xff0c;因为 135333153135333153。这种数字的发现不仅展示了数字的内在美&#xff0c;也激发了人们对数…
阅读更多...
大学学校用电安全远程监测预警系统

大学学校用电安全远程监测预警系统

1.概述&#xff1a; 该系统是基于移动互联网、云计算技术&#xff0c;通过物联网传感终端&#xff0c;将办公建筑、学校、医院、工厂、体育场馆、宾馆、福利院等人员密集场所的电气安全数据&#xff0c;实时传输至安全用申管理服务器&#xff0c;为用户提供不间断的数据跟踪&a…
阅读更多...
五子棋双人对战项目（4）——匹配模块(解读代码)

五子棋双人对战项目（4）——匹配模块(解读代码)

目录 一、约定前后端交互接口的参数 1、websocket连接路径 2、构造请求、响应对象 二、用户在线状态管理 三、房间管理 1、房间类&#xff1a; 2、房间管理器&#xff1a; 四、匹配器(Matcher) 1、玩家实力划分 2、加入匹配队列&#xff08;add&#xff09; 3、移除…
阅读更多...
解决ModuleNotFoundError: No module named ‘torchcrf‘

解决ModuleNotFoundError: No module named ‘torchcrf‘

运行深度学习程序时候&#xff0c;出现报错&#xff1a;ModuleNotFoundError: No module named torchcrf 将 from torchcrf import CRF 改为 from TorchCRF import CRF
阅读更多...
C#案例 | 基于C#语言在Excel中进行二次开发（一）：简单系统搭建：打印输出“Hello Excel C#”

C#案例 | 基于C#语言在Excel中进行二次开发（一）：简单系统搭建：打印输出“Hello Excel C#”

基于C#语言在Excel中进行二次开发&#xff08;一&#xff09;&#xff1a;简单系统搭建&#xff1a;打印输出”Hello Excel & C#” 实现效果第一步&#xff1a;前期准备第二步&#xff1a;打开VS 2022&#xff0c;创建项目第三步&#xff1a;程序界面设计 实现效果 在Exce…
阅读更多...
《蓝桥杯算法入门》（C/C++、Java、Python三个版本）24年10月出版

《蓝桥杯算法入门》（C/C++、Java、Python三个版本）24年10月出版

推荐&#xff1a;《算法竞赛》&#xff0c;算法竞赛大全书&#xff0c;网购&#xff1a;京东 天猫  当当 文章目录 《蓝桥杯算法入门》内容简介本书读者对象作者简介联系与交流《蓝桥杯算法入门 C/C》版目录 《蓝桥杯算法入门 Java》版目录 《蓝桥杯算法入门 Python》版目录 …
阅读更多...
STM32器件支持包安装，STLINK/JLINK驱动安装

STM32器件支持包安装，STLINK/JLINK驱动安装

一、支持包安装 1、离线安装 先下载支持包之后&#xff0c;再进行安装。如下图要安装STM32F1系列&#xff0c;双击 出现如下&#xff0c;会自动锁定安装路径&#xff0c;然后点击下一步&#xff0c;直接安装。 2、在线安装 首先需要电脑联网。如下。先点击第一个红框绿色按钮…
阅读更多...
【EXCEL数据处理】000011 案列 EXCEL带有三角形图标的单元格转换，和文本日期格式转换。

【EXCEL数据处理】000011 案列 EXCEL带有三角形图标的单元格转换，和文本日期格式转换。

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【EXCEL数据处理】000011 案列 EXCEL带有三角形图标的单元格转换。使用…
阅读更多...
[uni-app]小兔鲜-04推荐+分类+详情

[uni-app]小兔鲜-04推荐+分类+详情

热门推荐 新建热门推荐组件, 动态设置组件的标题 <template><!-- 推荐专区 --><view class"panel hot"><view class"item" v-for"item in list" :key"item.id">... ...<navigator hover-class"none&…
阅读更多...
Pikachu-Cross-Site Scripting-DOM型xss

Pikachu-Cross-Site Scripting-DOM型xss

DOM型xss DOM型XSS漏洞是一种特殊类型的XSS,是基于文档对象模型 Document Object Model (DOM)的一种漏洞。是一个与平台、编程语言无关的接口&#xff0c;它允许程序或脚本动态地访问和更新文档内容、结构和样式&#xff0c;处理后的结果能够成为显示页面的一部分。 dom就是一…
阅读更多...
物联网将如何影响全球商业？

物联网将如何影响全球商业？

互联网使人们能够交流&#xff0c;企业能够全天候不间断地跨洋跨洲持续运营。它重塑、颠覆并催生了新的产业&#xff0c;改变了人类与世界互动的方式。互联网曾经仅仅是一种方便、快捷、廉价的向世界各地发送信息的方式&#xff0c;而现在&#xff0c;只需打开或关闭任何连接到…
阅读更多...
thinkphp6入门（25）-- 分组查询 GROUP_CONCAT

thinkphp6入门（25）-- 分组查询 GROUP_CONCAT

假设表名为 user_courses&#xff0c;字段为 user_id 和 course_name&#xff0c;存储每个用户选修的课程&#xff0c;想查询每个学生选修的所有课程 SQL 原生查询 SELECT user_id, GROUP_CONCAT(course_name) as courses FROM user_courses GROUP BY user_id; ThinkPHP 代码…
阅读更多...
汇编语言知识（王爽第四版）

汇编语言知识（王爽第四版）

汇编语言&#xff0c;当然&#xff0c;我们学习是在c语言的基础上&#xff0c;那么&#xff0c;我们就先复习一下c语言的知识 C语言的基础&#xff0c;进制转换必不可少 数组&#xff0c;函数…… 接下来&#xff0c;我们学习了数据结构&#xff1a;顺序表&#xff0c;链表&…
阅读更多...
Ubuntu/Debian网络配置（补充篇）

Ubuntu/Debian网络配置（补充篇）

Ubuntu/Debian网络配置补充 在《Ubuntu/Debian网络配置 & Ubuntu禁用自动更新_ubuntu nmtui-CSDN博客》上总结的“配置网络”章节&#xff0c;对于新版本或者“最小化安装”场景&#xff0c;可能不适应&#xff0c;故此本文做一下补充&#xff0c;就不在原有文章上做更新了…
阅读更多...
【数据结构】什么是平衡二叉搜索树(AVL Tree)?

【数据结构】什么是平衡二叉搜索树(AVL Tree)?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 &#x1f4cc;AVL树的概念 &#x1f4cc;AVL树的操作 &#x1f38f;AVL树的插入操作 ↩️右单旋 ↩️↪️右左双旋 ↪️↩️左右双旋 ↪️左单旋 &#x1f38f;AVL树的删…
阅读更多...
平面电磁波（解麦克斯韦方程）

平面电磁波（解麦克斯韦方程）

注意无源代表你立方程那个点xyzt处没有源&#xff0c;电场磁场也是这个点的。 j电流面密度&#xff0c;电流除以单位面积&#xff0c;ρ电荷体密度&#xff0c;电荷除以单位体积。 j方程组有16个未知数&#xff0c;每个矢量有三个xyz分量&#xff0c;即三个未知数&#xff0c;…
阅读更多...
在idea使用nacos微服务

在idea使用nacos微服务

一.安装nacos 、依赖记得别放<dependencyManagement></dependencyManagement>这个标签去了 1.在linux拉取镜像安装 docker pull nacos/nacos-server:1.3.1 2.创建挂载目录 mkdir -p /usr/local/docker/nacos/init.d /usr/local/docker/nacos/logs 3.安装nacos…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023