【Web前端入门学习】—CSS

news2024/10/24 4:44:42

目录

  • CSS简介
    • CSS语法
    • CSS三种导入方式
    • CSS选择器
      • 元素选择器（标签选择器）
      • 类选择器
      • ID选择器
      • 通用选择器
      • 子元素选择器
      • 后代选择器（包含选择器）
      • 并集选择器（兄弟选择器）
      • 伪类选择器
      • 伪元素选择器
    • CSS常用属性
    • 盒子模型
    • 网页布局方式
      • 浮动
      • 定位

CSS简介

什么是CSS？
CSS全名是Cascading Style Sheets ，中文名：叠层样式表。用于定义网页样式和布局的样式表语言。通过CSS，你可以指定页面中各个元素的字体、大小、间距、边框、背景等样式从而实现更精确的页面设计。

CSS语法

CSS通常由选择器、属性和属性值构成，多个规则可以组合在一起，以便同时应用多个样式。

选择器{
  属性1:属性值;
  属性2:属性值;
}

1、选择器后面大括号的内容也叫做选择器的声明，选择器的声明中可以写无数条属性。
2、选择器选择要应用样式的HTML元素（标签），可以选择所有元素或特定元素。
3、声明的每一个属性都要以英文分号为结尾。
4、声明中的所有属性和值都是以键值对的形式出现的。

例：

p{
     color:blue;
     font-size:16px;
    }

p标签选择器，页面中的所有p标签都被选中，p标签的字体颜色都改为蓝色，p标签中的字体大小改为16像素。

CSS三种导入方式

1、内联样式
2、内部样式表
3、外部样式表

内联样式：
内联样式就是将CSS样式直接放到HTML元素标签中。
内部样式表：
在HTML文档的head标签中定义。
外部样式表：
将CSS样式单独放到一个CSS文件中，之后在head标签中使用另一个标签将它链接到HTML文档中。（这种方式允许在多个页面中重复使用相同的样式。
内部样式表例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS导入方式</title>
    <style>
        p{
        color:blue;
        font-size:26px;
    }
    </style>
</head>
<body>
    <p>这是一个应用了CSS样式的文本。</p>
</body>
</html>

在这里插入图片描述
内联样式例：

<body>
    <h1 style="color:red">应用了内联样式的文本。</h1>
</body>

在这里插入图片描述
外部样式表例：
在同目录下创建CSS文件夹。
在这里插入图片描述
在CSS文件夹内创建style样式.css文件。
在这里插入图片描述
在style文件.css文件中写入样式。

注意：该选择器名须和改动的标签一致。

h3 {
    color:blueviolet;
    font-style: italic;
}

在这里插入图片描述
下面在CSS导入方式.html文件中将style文件.css文件导入。
在CSS导入方式.html文件的title下使用link。
在这里插入图片描述
herf内填入style文件.css文件的路径。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS导入方式</title>
    <link rel="stylesheet" href="./CSS文件/style文件.css">
    <style>
        p{
        color:blue;
        font-size:26px;
    }
    
    </style>
</head>
<body>
    <p>这是一个应用了CSS样式的文本。</p>
    <h1 style="color:red">应用了内联样式的文本。</h1>
    <h3>使用外部样式。</h3>
</body>
</html>

在这里插入图片描述
三种导入方式的优先级：内联样式>外部样式表>内部样式表

优先级有什么作用？
优先级高的会覆盖优先级低的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS导入方式</title>
    <link rel="stylesheet" href="./CSS文件/style文件.css">
    <style>
        p{
        color:blue;
        font-size:26px;
     }
     h3{
        color:chartreuse;
        font-size: larger;
     }
    
    </style>
</head>
<body>
    <p>这是一个应用了CSS样式的文本。</p>
    <h1 style="color:red">应用了内联样式的文本。</h1>
    <h3>使用外部样式。</h3>
</body>
</html>

在这里插入图片描述

CSS选择器

元素选择器（标签选择器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        h2{
            color: aqua;
        }
    </style>
</head>
<body>
    <h2>元素选择器</h2>
</body>
</html>

在这里插入图片描述

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
       .highlight{
        background-color: bisque;
       }
    </style>
</head>
<body>
    <h3 class="highlight">类选择器</h3>
    <h3>这是另一个类选择器</h3>
</body>
</html>

在这里插入图片描述

ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
       #header{
        font-size: larger;
       }
    </style>
</head>
<body>
    <h4 id="header">这是一个ID选择器</h4>
</body>
</html>

在这里插入图片描述

通用选择器

通用选择器表示对所有的元素进行选择。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
       #header{
        font-size: larger;
       }
       * {
               /* 更改字体 */
        font-family: 'Courier New', Courier, monospace;
       }
    </style>
</head>
<body>
    <h4 id="header">这是一个ID选择器</h4>
</body>
</html>

在这里插入图片描述

子元素选择器

子元素选择器：选择直接位于父元素内部的子元素。也就是嵌套，一个大标签嵌套一个小标签，大标签相对于小标签来讲就是父元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        *{
            font-weight: bolder;
        }
        .father>.son{
            color:blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son">这是一个子元素选择器</p>
    </div>
</body>
</html>

这里的div标签相对于p标签来讲就是父元素。
这里要注意子元素选择器的语法形式
.父类>.子类{ }

在这里插入图片描述

后代选择器（包含选择器）

在这里插入图片描述

给father类的子元素添加了蓝色字体，但是为什么后代选择器颜色没有改变？
子代和后代的区别：后代是包含子代的，而子代不包含父代。如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        *{
            font-weight: bolder;
        }
        /* 子元素选择器 */
        .father>.son{
            color:blue;
        }
        /* 后代选择器 */
        .father p{
            color: red;
            font-size:larger;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son">这是一个子元素选择器</p>
        <div>
            <p class="grandson">这是一个后代选择器</p>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

并集选择器（兄弟选择器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
       /* 相邻兄弟选择器 */
       h3 + p{
        background-color: brown;
       }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <h3>这是一个相邻兄弟选择器</h3>
    <p>这是另一个p标签</p>
</body>
</html>

在这里插入图片描述

相邻元素选择器会选择在同一级别下的元素中的紧跟在选中元素之后的第一个p标签。

伪类选择器

伪类选择器选择HTML文档的元素的特定状态或者位置。伪类选择器以冒号开头，通常给用户交互文档结构或者其他条件下的元素应用样式。例如鼠标悬停在一个元素上，这是处于一个悬停状态，可以用伪类选择器来实现。
鼠标悬停示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
      /* 伪类选择器 */
      #element:hover{
        /* 当鼠标放到这一行字上时，背景色会发生变化 。*/
        background-color: blueviolet;
      }
    </style>
</head>
<body>
   <h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>

选中第一个子元素:first-child
选中第n个子元素：nth-child
链接状态:active

伪元素选择器

用于创建一个虚拟元素，并且样式化，而不是选择实际存在的元素。伪元素选择器通常以双冒号开头。

::after
::before

CSS常用属性

CSS参考手册： link
字体font属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
</head>
<body>
    <h1 style="font:bolder 50px 'KaiTi';">这是一个font复合属性示例</h1>
</body>
</html>

在这里插入图片描述
line-height设置行高属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
</head>
<body>
    <p style="line-height:40px">这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
</body>
</html>

在这里插入图片描述
width属性和height属性：

行内块元素：
1、水平方向上排列，但是可以设置宽度、高度、内外边距等。
2、行内块元素可以包含其他行内元素或块级元素。
行内元素：inline
行内块元素:inline-block
块元素:block

行内块元素和块元素可以设置宽和高，但是行内元素对于所设置的宽和高是无效的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
        .block{
            background-color: aqua;
            width: 200px;
            height: 150px;
        }
        .inline{
            background-color: brown;
            width: 200px;
            height: 150px;
        }
        .inline-block{
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <!-- 行内块元素 -->
    <img src="./logo.png.jpeg" alt="" class="inline-block">
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
        .block{
            background-color: aqua;
            width: 200px;
            height: 150px;
        }
        .inline{
            background-color: brown;
            width: 200px;
            height: 150px;
        }
        .inline-block{
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="block">这是一个块级元素</div>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <!-- 行内块元素 -->
    <img src="./logo.png.jpeg" alt="" class="inline-block">
    <img src="./logo.png.jpeg" alt="" class="inline-block">
    <img src="./logo.png.jpeg" alt="" class="inline-block">
</body>
</html>

在这里插入图片描述
行内元素、行内块元素和块元素互相转换：使用display属性

<body>
    <div style="display: inline;background-color: red;">这是一个转换成行内元素div标签</div>
</body>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
       .div-inline{
        display:inline;
        background-color: aqua;
       }
    </style>
</head>
<body>
    <div class="div-inline">这是一个转换成行内元素div标签</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
       .span-inline-block{
        display:inline-block;
        background-color: aqua;
       }
    </style>
</head>
<body>
    <span class="span-inline-block">这是一个转换成行内块元素的span标签。</span>
</body>
</html>

在这里插入图片描述

在这里display还可以设置成其他值。

盒子模型

盒子模型是CSS中一种常用布局的基本概念，描述了文档中的每个元素都可以被看成是一个矩形的盒子。这个盒子包含了内容（Content)，内边距（Padding)，文本边框（Border)，外边距（Margin)。
在这里插入图片描述
盒子模型的相关属性：

属性名说明
内容Content盒子包含的实际内容，比如：文本，图片等
内边距Padding围绕在内容的内部，是内容与边框之间的空间。可以使用padding属性来设置。
边框Border边框围绕在内边距的外部，是盒子的边界，可以使用border属性来设置。
外边距Margin围绕在边框的外部，是盒子与其他元素之间的空间。可以使用Margin属性来设置。

以边框为例，其他3个属性与边框类似。

通过border属性可以设置边框的宽度，颜色样式，border属性是一个复合属性。

在这里插入图片描述

边框的样式可以是solid（实线），dotted（点线），dashed（虚线），double(双实线）

在这里插入图片描述

对于上面的border-的三个属性，依然是复合属性。通过对border-width来设置4个边框。
border-width属性设置边框的宽度可以给4个不同的属性值，4个不同的属性值根据上右下左的顺序（顺时针）依次匹配。
同理也可以给border-style添加4个不同的属性等等。

在这里插入图片描述

给单一的边框设置样式，例如border-left，也是一个复合属性，和其他的不同的是，border-left只对左边框属性进行更改，同理其他也类似。

在这里插入图片描述
在这里插入图片描述

网页布局方式

传统网页布局方式：

  • 标准流（普通流、文档流）：网页按照元素的书写顺序依次排列。标准流由块元素和行内元素按照默认规定方式来排列，块级就是占一行，行内元素一行放好多个元素。
  • 浮动
  • 定位
  • Flexbox和Grid（可以实现复杂的自适应布局）

这几种布局方式主要是来摆盒子，将盒子摆放到相应的位置。

浮动

浮动相对于标准流来讲 可以改动元素的默认排列顺序，让网页更加灵活多变。浮动最典型应用：让多个块级元素在同一行内排列显示。
浮动属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块会另一个浮动框的边缘，这样即可以使得元素进行浮动。

浮动和行内块的区别：浮动的元素是相互贴靠在一起的不会有缝隙，如果父级宽度装不下这些盒子，多出来的盒子则另起一行，使用行内块元素，彼此之间是有空隙的。
浮动是相对于父元素进行浮动的，只会在父元素的内部进行移动。

选择器{
float: left/right/none;
}

浮动的三大特性：

  • 脱标：脱离标准流
  • 一行显示，顶部对齐
  • 具备行内块元素特性

在这里插入图片描述

给块级元素设置浮动属性。

在这里插入图片描述

左浮动占满一行后排在下一行，右浮动占满一行后排在下一行。

在这里插入图片描述
在这里插入图片描述

如果将父类的高度去掉，盒子出现浮动，此时父元素就出现了坍塌。

在这里插入图片描述

由于盒子出现了高度的坍塌，导致文本出现了两个浮动的盒子中间。这时就需要清除浮动。

在这里插入图片描述
如何清除浮动？
1、在浮动的父元素中添加一个属性overflow，属性值hidden。
在这里插入图片描述
2、使用为元素伪元素选择器。
在这里插入图片描述

定位

定位方式： 定位布局可以精准定位，但缺乏灵活性。

  • 相对定位：相对于元素在文档流中的正常位置进行定位。
  • 绝对定位：相对于其最近的已经定位的祖先元素进行定位，不占据文档流。
  • 固定定位：相对于浏览器窗口进行定位，不占据文档流，固定在屏幕上的位置，不随滚动而移动。

相对定位：
在这里插入图片描述

改变left right等属性后，相对位置发生变化，但是normal盒子并没有移动，相对定位的元素并不会脱离正常的文档流。

在这里插入图片描述
绝对定位：
在这里插入图片描述
在这里插入图片描述

在.box-absolute中加position: absolute; 后，这里绝对定位的元素就脱离了正常的文档流。4

固定定位：
固定定位是相对于浏览器窗口进行定位的，即使页面滚动，元素依然保持在窗口的相同位置。
在这里插入图片描述

此时无论怎样滚动鼠标，蓝色方块都会存在。

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

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

相关文章

3.7练习题解

3.7练习题解

一共五道题&#xff1a; 1. PERKET&#xff1a; 观察容易发现n的值很小&#xff0c;所以我们可以考虑使用dfs的方法进行解答&#xff0c;首先我们可以考虑一共有n种配料&#xff0c;那么我们就可以考虑到可以选择1到n种配料数目&#xff0c;然后基于这个思路我们再对其进行判断…
阅读更多...
评测本地部署的语音识别模型

评测本地部署的语音识别模型

1 引言 最近&#xff0c;朋友给我发来了一段音频&#xff0c;想转录成文字&#xff0c;并使用大型润色文本。音频中的普通话带有一定的口音&#xff0c;并且讲解内容较为专业&#xff0c;所以一般的语音识别工具很难达到较高的识别率。 于是试用了两个大模型。Whisper 是目前…
阅读更多...
大数据背景下R语言lavaan在SEM中的高效应用

大数据背景下R语言lavaan在SEM中的高效应用

结构方程模型&#xff08;SEM&#xff09;是揭示系统内变量间复杂关系的强大工具。它利用图形化的方式&#xff0c;将多变量间的因果关系网展现得淋漓尽致&#xff0c;具备出色的数据分析能力和广泛的适用性。近年来&#xff0c;无论是在生态、进化、环境领域&#xff0c;还是在…
阅读更多...
分类预测 | Matlab基于GWO-RBF灰狼算法优化径向基神经网络的分类预测

分类预测 | Matlab基于GWO-RBF灰狼算法优化径向基神经网络的分类预测

分类预测 | Matlab基于GWO-RBF灰狼算法优化径向基神经网络的分类预测 目录 分类预测 | Matlab基于GWO-RBF灰狼算法优化径向基神经网络的分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 Matlab基于GWO-RBF灰狼算法优化径向基神经网络的分类预测。基于灰狼算法(GWO…
阅读更多...
Java定时调度范式定时操作

Java定时调度范式定时操作

在 Java 中&#xff0c;我们可以使用各种方法来执行定时操作。这些操作包括执行任务、调度任务、执行重复任务等。下面将介绍几种常见的 Java 定时调度范式。 1. Timer 和 TimerTask Java 提供了 Timer 和 TimerTask 类&#xff0c;用于执行定时任务。 示例代码&#xff1a;…
阅读更多...
腾讯云服务器和阿里云服务器价格测评_2024年费用大PK

腾讯云服务器和阿里云服务器价格测评_2024年费用大PK

2024年阿里云服务器和腾讯云服务器价格战已经打响&#xff0c;阿里云服务器优惠61元一年起&#xff0c;腾讯云服务器61元一年&#xff0c;2核2G3M、2核4G、4核8G、4核16G、8核16G、16核32G、16核64G等配置价格对比&#xff0c;阿腾云atengyun.com整理阿里云和腾讯云服务器详细配…
阅读更多...
基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程（三）

基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程（三）

拓展学习——用XML方式写动态SQL实现数据库更新操作 前情回顾 前一章节我们学习了使用注解方式实现后端数据库增删改查操作 基于SpringBootVueElementUIMybatis前后端分离管理系统超详细教程&#xff08;二&#xff09; 本节课程接着拓展一下用xml配置文件方式来实现对数据…
阅读更多...
练习 6 Web [极客大挑战 2019]HardSQL

练习 6 Web [极客大挑战 2019]HardSQL

[极客大挑战 2019]HardSQL 先尝试登录&#xff0c;查看报错信息 admin 111 password 1111 登录失败admin 111 password 1’or’1 登录成功 这里直接试了万能密码成功&#xff0c;复习一下&#xff0c;第一个 ’ 是为了闭合前面的sql语句&#xff0c;最后的1后面没有 ’ 是因为…
阅读更多...
【数学建模】层次分析代码（python）

【数学建模】层次分析代码（python）

上一篇学习了层次分析的理论&#xff0c;今天用代码实现一下吧&#xff01; 判断矩阵的一致性检验 import numpy as np A np.array([[1,2,3,5],[1/2,1,1/2,2],[1/3,2,1,2],[1/5,1/2,1/2,1]]) n A.shape[0]#获取A的行 eig_val, eig_vecnp.linalg.eig(A)#计算方阵的特征值和特…
阅读更多...
STM32CubeMX学习笔记16--- STM32内部FLASH

STM32CubeMX学习笔记16--- STM32内部FLASH

1. 内部FLASH简介 之前的文章中介绍过STM32F1利用SPI与外部FLASH&#xff08;W25QXX芯片&#xff09;通讯的例程&#xff0c;本例程将介绍STM32F1的内部FLASH&#xff0c;通过内部FLASH实现数据读写操作。 不同型号的STM32&#xff0c;其FLASH容量也有所不同&#xff0c;最小的…
阅读更多...
【产品文档分类及撰写路径】

【产品文档分类及撰写路径】

一、产品文档的分类 产品文档根据所处阶段和面相对象的差异大致可以分为三类&#xff1a; 商业需求文档 (BRD)&#xff1a;商业需求文档是面向公司高层和项目组&#xff0c;目的是为了获得资金、资源支持。市场需求文档 (MRD)&#xff1a;市场需求文档是面向运营和市场销售人员…
阅读更多...
基于springboot+vue的旅游管理系统

基于springboot+vue的旅游管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…
阅读更多...
微服务架构中实体类模块化设计与MyBatis-Plus注解浅析

微服务架构中实体类模块化设计与MyBatis-Plus注解浅析

引言 在微服务开发过程中&#xff0c;为了保证代码的整洁性和可维护性&#xff0c;我们通常会将VO&#xff08;视图值对象&#xff09;、DTO&#xff08;数据传输对象&#xff09;、DO&#xff08;领域对象&#xff09;等实体类独立组织成一个API模块。这样做的目的是实现代码…
阅读更多...
大模型相关算法模型学习

大模型相关算法模型学习

对Transformer中Add&Norm层的理解-CSDN博客 GPT模型总结【模型结构及计算过程_详细说明】_gpt结构-CSDN博客 推荐30个以上比较好的中文nlp意图识别模型源码&#xff1f;-CSDN博客 Few-shot learning&#xff08;少样本学习&#xff09;入门 - 知乎 (zhihu.com) 零次学习…
阅读更多...
Day15：技术架构、Maven、Spring Initializer、Spring全家桶、Spring IoC

Day15：技术架构、Maven、Spring Initializer、Spring全家桶、Spring IoC

侧重于服务端&#xff08;后端&#xff09;&#xff0c;不在意前端&#xff0c;了解一些前端即可&#xff09; 技术架构 &#xff08;把Spring设计的更简单好用了就是Spring Boot&#xff09; 开发环境&#xff08;Maven&#xff09; Maven maven通过brew安装的目录为&#x…
阅读更多...
【uni-app小程序开发】实现一个背景色渐变的滑动条slider

【uni-app小程序开发】实现一个背景色渐变的滑动条slider

最近做的一个用uni-app+vue2开发的微信小程序项目中要实现一个滑动进度控制条，如下图所示： 1. 滑动条需要渐变背景色 2. 滑块的背景色需要与当前位置滑动条的背景色一致（动态改变） 碰到这样的需求，我当然先是看看官方提供的slider组件和uView里的u-slider组件能不能满足…
阅读更多...
YOLOv9电动车头盔佩戴检测，详细讲解模型训练

YOLOv9电动车头盔佩戴检测，详细讲解模型训练

向AI转型的程序员都关注了这个号&#x1f447;&#x1f447;&#x1f447; 一、YOLOv9简介 YOLOv9是YOLO系列算法的最新版本。YOLO系列算法自2015年首次提出以来&#xff0c;已经在目标检测领域取得了显著的进展&#xff0c;以其快速和准确的特点而广受欢迎。 论文地址&#xf…
阅读更多...
IPSEC VPN 网关模式实验

IPSEC VPN 网关模式实验

要求&#xff1a;FW1与FW3建立IPSEC通道&#xff0c;保证10.0.2.0/24网段能访问192.168.1.0/24网段 因为FW1与FW3都处于边界&#xff0c;所以使用网关部署模式来建立IPSEC VPN FW1 这里选择主模式跟隧道模式 FW3与FW1配置类似&#xff0c;与FW1的源目地址反过来&#xff0c;…
阅读更多...
文心一言眼中的ChatGPT是什么样的

文心一言眼中的ChatGPT是什么样的

Q: 你好文心一言&#xff0c;请说一说你眼中的chatgpt A: 在我眼中&#xff0c;ChatGPT是一种非常先进和强大的自然语言处理模型&#xff0c;它展示了人工智能技术的显著进步。ChatGPT拥有出色的语言理解和生成能力&#xff0c;能够与用户进行流畅、自然的对话&#xff0c;并尝…
阅读更多...
FreeRTOS_day2

FreeRTOS_day2

作业&#xff1a;1.使用ADC采样光敏电阻数值&#xff0c;如何根据这个数值调节LED灯亮度。 2.总结DMA空闲中断接收数据的使用方法 打开DAM,允许接收外部设备数据&#xff0c;调用中断接收回调函数
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023