css-选择器、常见样式、标签分类

CSS

CSS简介

  • 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
  • CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

1.层叠

  • 多个样式可以作用在同一个html的标签上

2.样式表

提供了丰富的样式修饰内容

3.作用

  • 样式丰富，功能强大
  • 内容和样式分离(解耦)

CSS的使用

1.行内样式

  • 在标签中使用style属性进行CSS样式设置
  • 样式名与样式值之间用冒号隔开
  • 样式与样式之间用分号隔开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div style="width:500px;height:500px;background-color: rgb(90, 139, 102);"></div>
</body>
</html>

2.内部样式

在<head>标签中使用<style>标签进行设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

3.外部样式

  • 将CSS样式独立到.css的文件中
  • 再将这个文件导入到需要使用这些样式的HTML文件中，使用标签。

（1）index.html 页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link href="css/demo.css" rel="stylesheet">
</head>
<body><div></div><div></div>
</body>
</html>

(2) demo.css css文件

div{width: 200px;height: 200px;background-color: red;
}

4.三种样式的优先级 (就近原则)

  • 行内样式>(内部样式&外部样式)

5.三种样式的生效范围

  • 外部样式>内部样式>行内样式

CSS选择器

1.CSS选择器

（1）为什么需要选择器

  • 内部样式和外部样式中，需要去找到要设置样式的标签，这时就需要选择器。

（2）语法

选择器{样式名1:样式值1;……}

2.基本选择器

（1）标签选择器

  • 通过标签名来获取标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

(2) ID选择器

  • 通过标签的ID属性的值来获取标签
  • 注意：ID属性值在当前页面上是唯一的
  • 使用 ‘*’
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#test{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div>div1</div><div>div2</div><div id="test">div3</div><div>div4</div>
</body>
</html>

（3）class选择器

  • 通过标签的class属性值来获取标签
  • 注意：class属性值可以重复
  • 使用 ‘.’
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.demo{color: red;}</style>
</head>
<body><div>div1</div><div class="demo">div2</div><div>div3</div><div>div4</div><p class="demo">p1</p>
</body>
</html>

（4）三大基本选择器的优先级

  • ID选择器>class选择器>标签选择器

2.其他选择器

（1）全局选择器

  • 选中当前页面上所有的标签
  • 使用 ‘*’
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>*{background-color: red;}</style>
</head>
<body><div>这是DIV</div><div>这是DIV</div><div class="last">这是DIV</div><p>这是P标签</p><p class="last">这是P标签</p>
</body>
</html>

（2）组合选择器

  • 选中当前页面上 所选中的标签
  • 使用 ‘,’
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>#test,p,span{color: red;}</style>
</head>
<body><div>这是DIV</div><div id="test">这是DIV</div><div>这是DIV</div><p>这是P标签</p><p>这是P标签</p><span>这是span</span>
</body>
</html>

（3）层级选择器（后代选择器）

  • 使用 空格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>div span{color: red;}</style>
</head>
<body><div><p><span>这是最里面的span</span></p><span>这是div的儿子span</span></div><span>这是div的兄弟span</span>
</body>
</html>

（4）子选择器

  • 选择定位到的标签
  • 使用 ‘>’
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>div>span{color: red;}</style>
</head>
<body><div><p><span>这是最里面的span</span></p><span>这是div的儿子span</span></div><span>这是div的兄弟span</span>
</body>
</html>

（5）属性选择器

  • 使用：[属性名=属性值]
  • 获取所有属性名是属性值的标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>[title=last]{color: red;}</style>
</head>
<body><div title="first">这是DIV</div><div>这是DIV</div><div title="last">这是DIV</div><div>这是DIV</div><div title="last">这是DIV</div><p title="last">这是P</p>
</body>
</html>

（6）伪类选择器

  • 主要针对超链接

  • a:link{}：未被访问时

  • a:visited{}：访问过后

  • a:hover{}： 鼠标悬浮时（hover也可以用于其他标签）

  • a:active{}：鼠标激活时，点击未释放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>a:link{color: black;text-decoration: none;}a:visited{color: gainsboro;}a:hover{color: pink;}a:active{color: aqua;}</style>
</head>
<body><a href="http://www.taobao.com">淘宝</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>div:hover{color: pink;}</style>
</head>
<body><div>这是DIV</div>
</body>
</html>

CSS常见样式

1.尺寸样式

  • height：设置元素的高度

  • width：设置元素的宽度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div>这是DIV</div>这是测试
</body>
</html>

2.字体样式

  • font-size：字体大小
  • font-style：字体风格(取值：italic/normal…)
    • italic 斜体
    • normal : 默认值。正常的字体
  • font-family：字体类型(取值：隶书/微软雅黑…)
  • font-weight：字体粗细取值:Normal 默认值。
    • bold 粗体字符
    • bolder 更粗的字符
    • lighter 定义更细的字符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>span{font-size: 42px;font-style: italic;font-family: '宋体';font-weight: bold;}</style>
</head>
<body><span>这是SPAN</span>
</body>
</html>

3.字体样式

  • color：文本颜色（取值：colorname或#0000FF）
  • text-align：文本对齐（取值：left/right/center…）
  • text-decoration：文本装饰，取值:none默认。
    • underline下划线。
    • overline上划线
    • line-through删除线
  • line-height：设置行高
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 400px;height: 200px;background-color: aquamarine;color: red;text-align: center;text-decoration: line-through;line-height: 200px;}</style>
</head>
<body><div>这是DIV</div>
</body>
</html>

4.边框样式

  • border-width：边框宽度，按方向设置：border-(left/right/top/bottom)-width
  • border-color：边框颜色，按方向设置：border-(left/right/top/bottom)-color
  • border-style：边框风格，按方向设置：border-(left/right/top/bottom)-style
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 100px;height: 100px;background-color: aquamarine;/* border: 10px black solid; */border-top-width: 10px;border-right-width: 20px;border-bottom-width: 30px;border-left-width: 40px;border-top-color: red;border-right-color: gray;border-bottom-color: yellow;border-left-color: orange;border-top-style: solid;border-right-style: double;border-bottom-style: dashed;border-left-style: dotted;}</style>
</head>
<body><div>这是DIV</div>
</body>
</html>
  • border-radius：圆角边框按方向设置值：border-(top/bottom)-(left/right)-radius
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 200px;height: 200px;background-color: red;/* border-radius: 1px; */border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-left-radius: 30px;border-bottom-right-radius: 40px;}</style>
</head>
<body><div></div>
</body>
</html>

5.背景样式

  • background-color：yellow;背景颜色
  • background-image：url(img/1.jpeg);背景图片
  • background-repeat：背景是否平铺，
    • 取值:repeat-x:水平方向平
    • repeat-y :垂直方向平，
    • repeat :水平和垂直方向同时平
    • no - repeat : 不平铺
  • background-size：背景图片大小
  • background-position：center;背景偏移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 500px;height: 500px;background-color: red;background-image: url(img/gouza.png);background-size: 50px 50px;background-repeat: no-repeat;background-position: center;}</style>
</head>
<body><div></div>
</body>
</html>

6.盒子模型

在这里插入图片描述

  • content：内容
  • padding：内边距
  • border：边框
  • margin：外边距

（1）内边距

  • padding：内容与边框之间的距离

  • 常用样式

    • padding：
    • padding-top：
    • padding-right：
    • padding-bottom：
    • padding-left：

  • 主要作用：调整标签内容的位置，但是，会导致整个标签大小的变化

padding:10px;代表四个方向的内边距都是10个像素padding:10px 20px;代表上下内边距是10像素，左右内边距是20像素padding:10px 20px 30px;代表上内边距10像素，右内边距20像素，下内边距30像素，左内边距同右padding:10px 20px 30px 40px;分别代表上，右，下，左内边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 200px;height: 200px;background-color: red;border: 10px black solid;/* padding: 50px; *//* padding: 50px 100px; *//* padding: 50px 100px 150px; */padding: 50px 100px 150px 200px;}</style>
</head>
<body><div>这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容</div>
</body>
</html>

（2）外边距

  • margin：边框与父容器之间的距离
  • 常用样式
    • margin
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
  • 主要作用：调整标签本身相对于父标签的位置
  • 外边距的常用方式：设置标签水平居中
    • margin: auto;
margin:10px;代表四个方向的外边距都是10个像素margin:10px 20px;代表上下外边距是10像素，左右外边距是20像素margin:10px 20px 30px;代表外内边距10像素，右外边距20像素，下外边距30像素，左外边距同右margin:10px 20px 30px 40px;分别代表上，右，下，左外边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 200px;height: 200px;background-color: red;border: 10px black solid;/* margin: 50px; *//* margin: 50px 100px; *//* margin: 50px 100px 150px; *//* margin: 50px 100px 150px 200px; */}</style>
</head>
<body><div>这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容</div>
</body>
</html>

7.布局样式

（1）样式

  • float

（2）常用值

  • left
  • right

（3）理解

  1. 在Z轴上往人的方向移动，再进行左移和右移。
  2. 左移或右移时，碰到父标签边框或者碰到另一个浮动框的边框就会停下来。
  3. 实现框横向排列：将需要横向排列的框往同一个方向浮动就行了。

（4）出现问题

  • 由于浮动脱离了原本的平面，所以原本的位置会被后面的标签挤占掉，能不能让后面的标签不去挤占呢？

（5）解决方案

  • 清除前面浮动对后面的标签造成的影响

  • 样式：clear

  • 常用值：left，right，both

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 200px;background-color: gray;float: left;}#third{width: 300px;height: 300px;background-color: pink;float: left;}#fourth{width: 400px;height: 400px;background-color: purple;float: left;}#five{width: 1000px;height: 500px;background-color: black;clear:left}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div><div id="fourth"></div><div id="five"></div>
</body>
</html>

8.定位样式

  • 为了将标签放到指定的位置上。
  • 通常情况下，能用盒子模型解决，就不要用定位。

（1）样式

  • position

（2）常用值

  • absolute：绝对定位
  • relative：相对定位
  • fixed：固定定位

（3）调整位置的样式

  • left
  • right
  • top
  • bottom

（4）绝对样式

  • Z轴上往人的方向移动，原本的位置会空出来，后面的标签就会去挤占掉
  • 相对于页面的顶点进行移动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 200px;background-color: gray;position: absolute;left: 100px;top: 50px;}#third{width: 300px;height: 300px;background-color: pink;}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div>
</body>
</html>

（5）相对定位

  • 原本的位置会一直保留
  • 相对于原来的位置进行偏移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 200px;background-color: gray;position: relative;left: 0px;top: 0px;}#third{width: 300px;height: 300px;background-color: pink;}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div>
</body>
</html>

（6）固定定位

  • 原来的位置不保留
  • 相对于页面的顶点进行偏移
  • 不受滚动条的影响
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 1000px;background-color: gray;}#third{width: 300px;height: 300px;background-color: pink;}#fourth{width: 50px;height: 50px;position: fixed;right: 50px;bottom: 50px;}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div><div id="fourth"><a href="#" style="font-size:40px;text-decoration: none;color: black;">^</a></div>
</body>
</html>

9.列表修饰

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;/*取消图标*//* list-style-image: url(img/gouza.png); */float: left;}</style>
</head>
<body><ul><li>橘子</li><li>香蕉</li><li>火龙果</li></ul>
</body>
</html>

标签的分类

1.块标签

  • 独占一行，自动换行
  • 可以手动设置宽高
<div>,<p>,<h*>,<ol>,<ul>,<li>,<table>,<form>……

2.行标签

  • 不会自动换行
  • 不能设置宽高
<span>,<font>,<strong>,<b>,<em>,<i>,<a>,<input>,<select>……

3.行块标签

  • 不能自动换行
  • 可以设置宽高
<img>

4.标签类型的转换

（1）样式

  • display

（2）常用值

  • block(：转成块标签
  • inline：转成行标签
  • inline-block：转成行块标签
  • none：隐藏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 100px;height: 100px;background-color: red;display: inline-block;}span{width: 100px;height: 100px;background-color: green;display: inline-block;}img{width: 100px;height: 100px;display: block;}</style>
</head>
<body><div>这是DIV</div><span>这是Span</span><img src="img/gouza.png">
</body>
</html>

综合练习

1.实现如下效果

在这里插入图片描述

2.浮动完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;float: left;background-color: green;color: white;text-align: center;width: 80px;height: 30px;line-height: 30px;border-radius: 5px;}ul{width: 400px;margin: auto;}</style>
</head>
<body><ul><li>首页</li><li>天猫</li><li>聚划算</li><li>超市</li><li>支付宝</li></ul>
</body>
</html>

3.使用标签类型转换完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;background-color: green;color: white;text-align: center;width: 80px;height: 30px;line-height: 30px;border-radius: 5px;display: inline-block;margin-left: -5px;}ul{width: 400px;margin: auto;}</style>
</head>
<body><ul><li>首页</li><li>天猫</li><li>聚划算</li><li>超市</li><li>支付宝</li></ul>
</body>
</html>

enter;
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 5px;
}
ul{
width: 400px;
margin: auto;
}

  • 首页
  • 天猫
  • 聚划算
  • 超市
  • 支付宝
```

3.使用标签类型转换完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;background-color: green;color: white;text-align: center;width: 80px;height: 30px;line-height: 30px;border-radius: 5px;display: inline-block;margin-left: -5px;}ul{width: 400px;margin: auto;}</style>
</head>
<body><ul><li>首页</li><li>天猫</li><li>聚划算</li><li>超市</li><li>支付宝</li></ul>
</body>
</html>

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

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

相关文章

ubuntu18.04复现yolo v8之CUDA与pytorch版本问题以及多CUDA版本安装及切换

ubuntu18.04复现yolo v8之CUDA与pytorch版本问题以及多CUDA版本安装及切换

最近在复现yolo v8的程序&#xff0c;特记录一下过程 环境&#xff1a;ubuntu18.04ros melodic 小知识&#xff1a;GPU并行计算能力高于CPU—B站UP主说的 Ubuntu可以安装多个版本的CUDA。如果某个程序的Pyorch需要不同版本的CUDA&#xff0c;不必删除之前的CUDA&#xff0c;…
阅读更多...
选择排序：用C语言打造高效的排序算法

选择排序：用C语言打造高效的排序算法

本篇博客会讲解如何使用C语言实现选择排序。 下面我来画图讲解选择排序的思路。 假设有一个数组&#xff0c;其初始状态如下&#xff0c;我们想把这个数组排成升序。 首先我们标明范围&#xff0c;即[begin, end]&#xff0c;一开始begin(b)和end(e)分别表示数组的第一个位置…
阅读更多...
【数据结构】实现栈和队列

【数据结构】实现栈和队列

目录 一、栈1.栈的概念及结构&#xff08;1&#xff09;栈的概念&#xff08;2&#xff09;栈的结构 2.栈的实现&#xff08;1&#xff09;类型和函数的声明&#xff08;2&#xff09;初始化栈&#xff08;3&#xff09;销毁&#xff08;4&#xff09;入栈&#xff08;5&#x…
阅读更多...
使用proxman对iOS真机进行抓包

使用proxman对iOS真机进行抓包

1 打开手机的safari 输入地址 http://proxy.man/ssl 2 下载证书代开设置页面&#xff0c;安装证书 设置信任证书 打开手机设置 &#xff0c;点击通用 点击关于本机、 点击证书信任设置 打开信任设置开关 4 设置手机代理 查看需要设置的代理地址 打开界面 在手机中按…
阅读更多...
【Java 高阶】一文精通 Spring MVC - 转换器（五）

【Java 高阶】一文精通 Spring MVC - 转换器（五）

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…
阅读更多...
Ribbon:listOfServers

Ribbon:listOfServers

解释&#xff1a; 配置了address的地址,请求会走address&#xff0c;也就是http://127.0.0.1:8081&#xff0c;通常用户与别的后端服务进行联调设置为其本地服务的ip。 如果将address:注释掉。 会走后面的XXX.feign.default-server地址&#xff0c;这个地址通常可以配一个网关…
阅读更多...
python自动化入门之Python编写脚本实现自动化爬虫详解

python自动化入门之Python编写脚本实现自动化爬虫详解

想知道如何使用Python轻松高效地获取网络上的信息&#xff1f; 本篇文章将探索Python自动化爬虫&#xff0c;并展示如何编写实用的脚本。 1. 什么是Python爬虫&#xff1f; 爬虫顾名思义&#xff0c;就是像蜘蛛一样在网络上爬行&#xff0c;抓取各种有用信息的一种程序。而Pyt…
阅读更多...
深入理解回调函数qsort：从入门到模拟实现

深入理解回调函数qsort：从入门到模拟实现

&#x1f341;博客主页&#xff1a;江池俊的博客 &#x1f4ab;收录专栏&#xff1a;C语言进阶之路 &#x1f4a1;代码仓库&#xff1a;江池俊的代码仓库 &#x1f3aa;我的社区&#xff1a;GeekHub &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文章目录 前…
阅读更多...
在树莓派上搭建web站点并发布互联网上线【无需公网IP】

在树莓派上搭建web站点并发布互联网上线【无需公网IP】

文章目录 概述使用 Raspberry Pi Imager 安装 Raspberry Pi OS设置 Apache Web 服务器测试 web 站点安装静态样例站点将web站点发布到公网安装 Cpolar内网穿透cpolar进行token认证生成cpolar随机域名网址生成cpolar二级子域名将参数保存到cpolar配置文件中测试修改后配置文件配…
阅读更多...
C/C++：C/C++在大数据时代的应用，以及C/C++程序员未来的发展路线

C/C++：C/C++在大数据时代的应用，以及C/C++程序员未来的发展路线

目录 1.C/C在大数据时代的应用 1.1&#xff1a;C/C数据处理 1.2&#xff1a;C/C数据库 1.3&#xff1a;C/C图像处理和计算机视觉 1.3.1&#xff1a;导读 2.C/C程序员未来的发展路线 2.1&#xff1a;图导 1.C/C在大数据时代的应用 C/C在大数据时代中仍然是一种被广泛应用的编…
阅读更多...
小程序运营方式有哪些？如何构建小程序运营框架？

小程序运营方式有哪些？如何构建小程序运营框架？

​如今&#xff0c;每个企业基本都做过至少一个小程序&#xff0c;但由于小程序本身不具备流量、也很少有自然流量&#xff0c;因此并不是每个企业都懂如何运营小程序。想了解小程序运营方式方法有哪些&#xff1f; 在正式运营小程序前&#xff0c;了解小程序的功能与企业实际经…
阅读更多...
AS中回退git历史版本并删除历史提交记录

AS中回退git历史版本并删除历史提交记录

当您想把某个版本后的代码删除&#xff0c;回滚到指定的版本。可以使用一下的方法。 一、打开AS中git历史提交窗口 二、选择需要回滚的版本选项&#xff0c;右键弹出菜单。选择Reset Current Branch to Here... 三、选择 Hard 选项 soft&#xff1a;将合并的更改应用到当前分支…
阅读更多...
【ARM】Day8 中断

【ARM】Day8 中断

1. 思维导图 2. 实验要求&#xff1a; 实现KEY1/LEY2/KE3三个按键&#xff0c;中断触发打印一句话&#xff0c;并且灯的状态取反 key1 ----> LED3灯状态取反 key2 ----> LED2灯状态取反 key3 ----> LED1灯状态取反 key3.h #ifndef __KEY3_H__ #define __KEY3_H__#in…
阅读更多...
CGAL 网格（Mesh）数据骨架提取

CGAL 网格（Mesh）数据骨架提取

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 骨架是一种非常有效的形状抽象，其被广泛的用于分割、形状匹配、曲面重建、虚拟导航等领域。正如名称所示，一条曲线骨架本质上是曲线线性化的图结构，并且它不是由曲面(2D)组成的3D几何体的中轴线。 如下图所示，形…
阅读更多...
蓝牙耳机语音信号处理之ENC算法

蓝牙耳机语音信号处理之ENC算法

+他V hezkz17进数字音频系统研究开发交流答疑群(课题组) 1 什么是单麦谱减法降噪？ 单麦谱减法降噪是一种音频信号处理技术，用于在单声道录音中减少噪音的方法。它基于频域分析和减法混叠原理。首先，通过将音频信号转换为频域表示（如快速傅立叶变换），可以将音频信号分解…
阅读更多...
uniapp - 实现卡片式胶囊单选后右上角出现 “√“ 对勾对号选中效果功能，适用于小程序h5网页app全平台通用（一键复制组件源码，开箱即用！）

uniapp - 实现卡片式胶囊单选后右上角出现 “√“ 对勾对号选中效果功能，适用于小程序h5网页app全平台通用（一键复制组件源码，开箱即用！）

效果图 uniapp全平台兼容（小程序/h5网页/app）实现点击选择后，右上角出现 √ 对号效果（角标形式展现），功能组件， 改个样式，直接复制使用该组件。 组件源码 在 components 组件文件夹下，随便建立一个 .vue 文件，一键复制下方源码。
阅读更多...
VMware Workstation Pro 无法使用开机状态下拍的快照来克隆虚拟机，怎么解决？

VMware Workstation Pro 无法使用开机状态下拍的快照来克隆虚拟机，怎么解决？

环境： VMware Workstation Pro16.0 Win10 专业版 问题描述： VMware Workstation Pro有台虚拟机在开机状态下拍了个6.7快照这个win10初始版，现在想在这个快照下直接克隆，无法使用开机状态下拍的快照创建克隆 解决方案： 1.关闭当前虚拟机 2.到虚拟机文件夹复制一份Wind…
阅读更多...
Python 在logging.config.dictConfig()日志配置方式下，使用自定义的Handler处理程序

Python 在logging.config.dictConfig()日志配置方式下，使用自定义的Handler处理程序

文章目录 一、基于 RotatingFileHandler 的自定义处理程序二、基于 TimedRotatingFileHandler 的自定义处理程序 Python logging模块的基本使用、进阶使用详解 Python logging.handlers模块&#xff0c;RotatingFileHandler、TimedRotatingFileHandler 处理器各参数详细介绍 …
阅读更多...
kingbase(人大金仓)数据库的常用知识点与简单巡检

kingbase(人大金仓)数据库的常用知识点与简单巡检

查看服务是否已设为开机自启 systemctl list-dependencies |grep kingbasehttps://blog.csdn.net/gyqailxj/article/details/127290687
阅读更多...
智能电视与win10电脑后续无法实现DLNA屏幕共享

智能电视与win10电脑后续无法实现DLNA屏幕共享

问题背景&#xff1a; 我用的是TCL电视&#xff0c;但是并不是最新&#xff0c;打开的方式是U盘->电脑&#xff0c;各位看自己情况&#xff0c;很多问题都大概率是智能电视问题。 情景假设&#xff1a; 假设你已经完成原先智能电视该有的步骤&#xff0c;通过DLNA&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站