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

web-css

article 2025/6/5 1:10:46

一.CSS选择器：
1.基础选择器

基本选择器：

              >.标签选择器

                    格式：标签名称{}

              >.类选择器（重）

                     格式：.class属性的值{}

              >.id选择器

                     格式：#id属性的值{}

              >.通配符（表示所有）

                     格式：*    

 <style>/*1.标签选择器*/div{width: 200px;height: 300px;background-color: azure;}span{color: brown;}/* 2.类选择器 */.div2{background-color: blue;}.d2{background-color: yellow;}/* 3.id选择器 */#div3{background-color: chocolate;}/* 4.通配符 */*{border: 1px solid black;}</style><body><div>div1</div><div class="div2 d2 ddd">div2</div><div id="div3">div3</div><span>span</span>
</body>

优先级：ID选择器>类选择器>标签选择器（有相同属性时 如果没有相同属性 则共同作用）

2.复合选择器

       1.父子选择器---一定是父子关系不能隔代

           格式：父>子{} 渲染子

        2.后代选择器---祖先下的所有后代都渲染

           格式：祖先 后代{}

        3.相邻兄弟选择器  向下渲染，如果向下相邻的兄弟不为目标标签则不渲染

           格式：兄+弟{} 向下渲染弟

        4.兄弟选择器

           格式：兄~弟{} 向下渲染所有的弟

        5.交集

              格式：选择器1选择器2选择器n{}---满足所有选择器的目标

        6.并集

              格式：选择器1，选择器2，选择器n{}---只要满足并集中的任一个选择器的目标都渲染

<style>/*1.父子选择器*//* div下的和div具有父子关系的所有标签 */div>*{background-color: blueviolet;}/* div下的和div具有父子关系的所有lin标签 */div>li{background-color: yellowgreen;}body>li{background-color: aquamarine;}/* 2.后代选择器 */body li{border: 1px solid black;}/* 3.相邻兄弟选择器 */.li2+li{color: coral;}/* 4.兄弟选择器 */.li6~li{color: darkviolet;}</style>
</head>
<body><div><li>li1</li><li class="li2">li2</li><li>li3</li><li>li4</li><li>li5</li><span>span</span></div><li class="li6">li6</li><span>span</span><li>li7</li><li>li8</li>
</body>
<style>div{width: 300px;height: 200px;border: 1px solid black;}/* 既满足类选择器.div又满足id选择器#div1 */.div#div1{background-color: aqua;}/* 并集 */div,span{color: blue;}</style>
</head>
<body><div class="div" id="div1">div1</div><div class="div">div2</div><span>span</span>

## 优先级的计算规则

CSS选择器优先级的计算遵循 **特殊性** 规则：

- 选择器的特殊性由四个值表示（从左到右重要性依次递减） `[0,0,0,0]`

- 内联样式：一个内联样式提供一个 `[1,0,0,0]`

- ID选择器：一个ID选择器提供一个 `[0,1,0,0]`

- 类选择器、属性选择器、伪类选择器：每一个提供 `[0,0,1,0]`

- 标签选择器：一个标签选择器提供一个 `[0,0,0,1]`

- 通配符选择器：`[0,0,0,0]`

- 继承属性：比上述所有更低，最低的

举例子来看：

- `body div p`：`[0,0,0,3]`

- `ol p`：`[0,0,0,2]`

- `.type p`：`[0,0,1,1]`

- `#main ~ p`：`[0,1,0,1]`

- `div.text ~ p `：`[0,0,1,2]`

- 按照特殊性从左到右比较 `[0,1,0,0]` > `[0,0,0,1000]`

- 如果优先级一样的话，后定义的覆盖先定义的（相同属性，不相同则共同作用）

3.属性选择器
允许根据元素的属性或属性值来进行选择

1.基本属性选择器

             格式：[属性名]{}

        2.属性=值

             格式：[属性名="属性值"]{}

        3.以**开头

             格式：[属性名^="属性值"]{}

        4.以**结尾

             格式：[属性名$="属性值"]{}

        5.包含**

             格式：[属性名*="属性值"]{}

 <style>/* 1.基本属性 */[class]{background-color:red;}[title]{background-color: bisque;}/* 2.属性=值 */[class="abc"]{background-color: black;}[title="123"]{background-color:yellow ;}/* 3.以什么开头 */[class^="ab"]{background-color: brown;}/* 4.以什么结尾 */[class$="d"]{background-color: cadetblue;}/* 5.包含 */[class*="abc"]{background-color: white;}</style>
</head>
<body><li class="a" id="">li1</li><li class="ab" id="">li2</li><li class="abc" id="">li3</li><li class="abcd" id="">li4</li><li title="123">li5</li>
</body>

4.伪类选择器
        1. 链接伪类选择器
主要用于处理链接元素在不同交互状态下的样式。
- `:link`：用于选择未被访问的状态

- `:visited`：用于选择被访问的状态

- `:hover`：用于选择鼠标悬停时的状态

- `:active`：用于选择正在被激活（鼠标点击）的元素的状态

        2.结构伪类选择器
根据元素在文档树（document）中的位置来选择的。
- `:first-child`：选择作为其父元素中第一个子元素的元素

- `:last-child`：选择作为其父元素中最后一个子元素的元素

- `:nth-child(n)`：选择作为其父元素中第n个子元素，n可以是数字，可以是关键字（even偶数 odd奇数）、也可以是公式（`2n+1`）

- `:nth-last-child(n)`：将上面这个`:nth-child(n)`倒过来。

- `:first-of-type`：选择作为其父元素中第一个指定类型的子元素

- `:last-of-type`：选择作为其父元素中最后一个指定类型的子元素

- `:nth-of-type(n)`：选择作为其父元素中第n个指定类型的子元素

- `:nth-last-of-type(n)`：将上面这个`:nth-of-type(n)`倒过来。

- `:only-child`：选择作为其父元素中唯一一个的子元素

- `:only-of-type`：选择作为其父元素中唯一一个指定类型的子元素

        3.目标伪类选择器
选择当前活动的目标元素，通常用于URL的锚点链接
        4.表单相关伪类选择器
用于选择表单元素的不同状态
- `:enable`：选择可用的表单元素

- `:disable`：选择不可用的表单元素

- `:checked`：选择被选中的表单元素

- `:required`：选择具有`required`属性的元素

- `:optinal`：选择没有`required`属性的元素

- `:valid`：选择符合表单验证的元素

- `:invalid`：选择不符合表单验证的元素

- `:in-range`：选择数据在表单范围内的元素

- `:out-of-range`：选择数据不在表单范围内的元素

        5.否定伪类选择器
选择不匹配的选择器的元素
        6.焦点相关伪类选择器
- `:focus`：选择当前获得焦点的元素

- `:focus-within`：选择包含获得焦点的子元素的父元素

- `:focur-visible`：选择当前获得焦点且焦点可见的元素

5.伪元素选择器
用于选取元素中的特定部分，这些部分在文档树中并不真实存在，只是通过CSS来进行的虚拟创建和样式化的内容。
- `::before` 和 `::after`：在选定元素的内容之前或之后添加额外的内容，content属性指定添加的内容。

- `::first-letter`：选定元素的内容的第一个字符

- `::first-line`：选定元素的内容的第一行文字

- `::selection`：选定元素的内容被选中时

- `::placeholder`：设置表单输入框提示文字的样式

二.CSS的常见样式

1.形状相关
宽、高、边线、字体相关的样式

2.阴影效果
阴影效果主要有文本阴影和盒子阴影

3.文本效果
4.超出处理方案
5.隐藏和显示
针对本身，可以实现标签的隐藏和显示。

在CSS中，`display`属性控制标签的隐藏和显示。

`display`不仅仅能够隐藏或者显示标签，而且可以修改标签默认属性，如将块标签修改为行内标签，或者将行内标签修改为块标签。

6.背景样式
7.定位问题
 定位：css的定位效果是，重新调整标签的位置关系

                position：static 默认效果

                绝对定位：将标签确定在某一个位置  

                父相子绝（如果某一个子元素需要做绝对定位，参照的父元素必须做相对定位）

8.CSS3新特性
CSS3诞生于2010年前后，W3C在12年左右发布了C3标准。

        + 媒体查询

        + 字体设置

        + 动画、过渡、变换等动画效果

        + avg等icon的使用

        + ……

9.媒体查询
媒体查询在CSS2时，就已经存在了。

媒体查询:指的是CSS对于当前展示页面的设备的查询能力，**适配对应的屏幕分辨率。**

CSS2：
@media 查询，在css2就出现了，最开始用来指定对应的设备，如tv表示电视（tv）、screen表示电脑、print表示打印机，后来随着移动端的发展，设备的更新，为了响应现在日异月新的显示屏设备展示数据，css3提供了媒体查询，主要针对不同分辨率的屏幕。在2010年前，移动互联网的发展，促使大量各种分辨率的屏幕出现。CSS2提供的媒体就不满足时代的发展了，因此C3正式推出了符合当前时代发展的媒体查询，是以分辨率为媒体的查询标准了。

10.@font-face 字体
可以使用@font-face，通过自定义的字体文件，实现任意字体在页面文字中的使用。

11.过渡效果
过渡，是CSS3提供的，用来让CSS样式，实现补间动画的一种手段，在规定的时间内，从开始到结束这个区间内，实现动画的自动补齐。

12.变幻效果

 1.平移   2.旋转    3.缩放   4.倾斜

三、小型案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>仿淘宝商品页面</title><!-- 理解整个页面的结构1.div-box2.ul-prods3.li-pord a-pro-hrefimg-prod-imgdiv-prod-introducediv-prod-pricediv-prod-bossdiv-prde-sale--><style>.box{width: 1200px;margin: auto;}.prod{width: 234px;height: 349px;border: 1px solid #f2f2f2;list-style: none;float: left;line-height: 1.5;}.prod-href{text-decoration: none;}.prod:hover{border-color: red;}span{font-size: 14px;color: #9b9b9b;}.prod-price{font-size: 17px;color: red;}.prod-boss{font-size: 12px;color: #9b9b9b;}.prod-sale{text-align: end;font-size: 12px;color: #9b9b9b;border-top: 1px solid #f2f2f2;padding-top: 10px;}.prod-text{width: 214px;height: 329;margin: auto;margin-top: 10px;}</style>
</head>
<body><div class="box"><ul class="prods"><!-- 编写一个商品链接 --><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li><li class="prod"><a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;xxc=ad_ztc"" class="prod-href"><div class="prod-text"><div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div><div class="prod-introduce"><span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span></div><div class="prod-price">￥4</div><div class="prod-boss">三锐旗舰店</div><div class="prod-sale">月销 2000+</div></div></a></li></ul></div>
</body>
</html>

上述代码仅作演示，图片和内部文字均相同；

效果图：

相关文章：

web-css

一.CSS选择器&#xff1a; 1.基础选择器 基本选择器&#xff1a; >.标签选择器 格式&#xff1a;标签名称{} >.类选择器&#xff08;重&#xff09; 格式&#xff1a;.class属性的值{} >.id选择器 格式&#xff1a;#id属性的值{} >.通配符&#xff08;表示所有&am…...

编程日记 2025/6/3 18:10:55

关于 smali：2. 从 Java 到 Smali 的映射

一、对照 Java 代码与 Smali 代码差异 1.1 方法调用差异&#xff1a;Java vs Smali Java 方法分类&#xff1a; 方法类型Java 示例Smali 指令特点说明静态方法Utils.print("hi")invoke-static没有 this 指针实例方法obj.show()invoke-virtual有 this&#xff0c;虚…...

编程日记 2025/6/3 18:11:08

三、zookeeper 常用shell命令

作者&#xff1a;IvanCodes 日期&#xff1a;2025年5月28日 专栏&#xff1a;Zookeeper教程 ZooKeeper Shell (zkCli.sh) 是与ZooKeeper服务器交互的核心工具。本教程将详细介绍常用命令&#xff0c;并重点解析ZooKeeper数据节点 (ZNode) 的特性与分类。 思维导图 一、连接 Zo…...

编程日记 2025/6/4 12:19:03

分布式流处理与消息传递——Paxos Stream 算法详解

Java 实现 Paxos Stream 算法详解 一、Paxos Stream 核心设计 #mermaid-svg-cEJcmpaQwLXpEbx9 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-cEJcmpaQwLXpEbx9 .error-icon{fill:#552222;}#mermaid-svg-cEJcmpaQw…...

编程日记 2025/6/5 0:43:42

智变与重构：AI 赋能基础教育教学的范式转型研究报告

一、研究背景与核心价值 &#xff08;一&#xff09;技术驱动下的教育转型浪潮 在全球数字化转型加速的背景下&#xff0c;人工智能作为核心技术力量&#xff0c;正重塑基础教育生态。据《人工智能赋能未来教育研究报告》指出&#xff0c;我国教育数字化战略行动已推动超 70…...

编程日记 2025/6/3 18:11:12

平衡三进制

平衡三进制 - OI Wiki https://oi-wiki.org/math/balanced-ternary/ 上海市计算机学会竞赛平台 | YACS 方法一&#xff0c;先分离后进位 #include <iostream> using namespace std; int n, a[100], cnt; bool flag; int main() {cin >> n;if(n0){cout <<…...

编程日记 2025/6/3 18:57:44

针对Python开发的工具推荐及分析，涵盖集成开发环境（IDE）、轻量级工具、在线开发平台、代码管理工具等）

以下是针对Python开发的工具推荐及全面分析&#xff0c;涵盖集成开发环境&#xff08;IDE&#xff09;、轻量级工具、在线开发平台、代码管理工具等&#xff0c;结合不同场景和需求进行分类说明&#xff1a; 目录 一、集成开发环境&#xff08;IDE&#xff09; 1. PyCharm 2…...

编程日记 2025/6/4 20:09:45

960g轻薄本，把科技塞进巧克力盒子

朋友们&#xff0c;谁懂啊 最近本打工人被同事疯狂种草了一款 “巧克力盒子” 华硕灵耀 14 Air 骁龙版&#xff01; 960g的重量比一瓶大可乐还轻 塞进通勤包毫无压力 连健身房的瑜伽垫都能多卷两圈 这台行走的生产力工具&#xff0c;到底有啥魔法&#xff1f; 今天就带…...

编程日记 2025/6/4 11:32:11

xcode 编译运行错误 Sandbox: rsync(29343) deny(1) file-write-create

解决方法 方法一&#xff1a;修改Targets -> Build Settings 中 ENABLE_USER_SCRIPT_SANDBOXING 设置 NO 方法二&#xff1a;项目使用cocoaPods进行三方管理 且 使用了 use_frameworks&#xff0c;把 use_frameworks 注释掉,然后重新自行pod install...

编程日记 2025/6/4 12:20:39

C# 基于 Windows 系统与 Visual Studio 2017 的 Messenger 消息传递机制详解：发布-订阅模式实现

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、CSDN平台优质创作者&#xff0c;高级开发工程师&#xff0c;数学专业&#xff0c;10年以上C/C, C#, Java等多种编程语言开发经验&#xff0c;拥有高级工程师证书&#xff1b;擅长C/C、C#等开发语言&#xff0c;熟悉Java常用开…...

编程日记 2025/6/2 17:35:06

ComfyUI+阿里Wan2.1+内网穿透技术：本地AI视频生成系统搭建实战

文章目录 前言1.软件准备1.1 ComfyUI1.2 文本编码器1.3 VAE1.4 视频生成模型 2.整合配置3. 本地运行测试4. 公网使用Wan2.1模型生成视频4.1 创建远程连接公网地址 5. 固定远程访问公网地址总结 前言 各位技术爱好者&#xff0c;今天为您带来一组创新性的AI应用方案&#xff01…...

编程日记 2025/6/3 18:10:54

腾讯云开发者社区文章内容提取免费API接口教程

接口简介&#xff1a; 提取指定腾讯云开发者社区文章内容。本接口仅做内容提取&#xff0c;未经作者授权请勿转载。 请求地址&#xff1a; https://cn.apihz.cn/api/caiji/tencent.php 请求方式&#xff1a; POST或GET。 请求参数&#xff1a; 【名称】【参数】【必填】【说…...

编程日记 2025/6/4 3:02:55

利用海外代理IP，做Twitter2026年全球趋势数据分析

近年来&#xff0c;社交媒体趋势分析逐渐成为品牌监控、市场洞察和消费者研究的必备工具。而当谈到全球趋势数据分析&#xff0c;很多人都会立即想到 Twitter趋势&#xff08;逼近连美丽国的总统都喜欢在上面发表自己的看法- -!!!&#xff09;。Twitter趋势&#xff0c;即Twitt…...

编程日记 2025/6/4 9:01:10

OpenLayers 图形交互编辑

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 图形要素包括属性信息和几何信息&#xff0c;在实际应用中&#xff0c;不仅需要修改样式信息&#xff0c;也需要修改图形几何信息。在OpenLayers中&…...

编程日记 2025/6/4 5:14:03

pikachu靶场通关笔记06 XSS关卡02-反射型POST

目录 一、XSS 二、反射型XSS 三、POST型报文 四、GET型与POST型区别 五、代码审计 五、渗透实战 1、渗透方法1 2、渗透方法2 本系列为通过《pikachu靶场通关笔记》的XSS关卡(共10关&#xff09;渗透集合&#xff0c;通过对XSS关卡源码的代码审计找到XSS风险的真实原因&…...

编程日记 2025/6/4 11:21:54

SQLiteStudio - 免费开源、轻量高效，跨平台的 SQLite 数据库管理工具，代替 Navicat for SQLite

管理 SQLite 数据库就用这款软件&#xff0c;真的早该摒弃破解和盗版的 Navicat 了。 SQLiteStudio 是一款专注于管理 SQLite 数据库 的桌面软件&#xff0c;用于浏览和编辑 SQLite 数据库文件。软件的作者是来自波兰的开发者 Paweł Salawa&#xff0c;他是一位拥有 20 年 Ja…...

编程日记 2025/6/3 22:31:59

Prometheus + Grafana + Cadvisor：构建高效企业级服务监控体系

在现代软件开发和运维领域&#xff0c;容器化技术的应用越来越广泛&#xff0c;其中 Docker 作为最受欢迎的容器化解决方案之一&#xff0c;其容器的监控管理变得至关重要。本文将详细介绍如何使用 cadvisor、Prometheus 和 Grafana 来监控 Docker 容器的状态。 一、安装镜像 …...

编程日记 2025/6/3 18:10:58

WEBSTORM前端 —— 第3章：移动 Web —— 第2节：空间转换、转化

目录 一、空间转换 1.空间转换 2.空间转换 – 平移 3.视距 perspective 4.空间 – 旋转 ③空间旋转——Z轴代码与效果视频 ④空间旋转——X轴代码与效果视频 ⑤空间旋转——Y轴代码与效果视频 5.立体呈现 – transform-style 案例 – 3D 导航 6.空间转换 – 缩放 …...

编程日记 2025/6/4 21:41:41

Java研学-MongoDB(一)

一 MongoDB 简介 MongoDB是一种高性能、开源的NoSQL数据库&#xff0c;采用面向文档的存储模型&#xff0c;以BSON&#xff08;Binary JSON&#xff09;格式存储数据&#xff0c;具有灵活的数据模型、强大的扩展性和丰富的功能特性&#xff0c;广泛应用于各类现代应用程序的数据…...

编程日记 2025/6/4 11:15:26

【AI面试秘籍】| 第25期：RAG的关键痛点及解决方案深度解析

今天我们来聊聊大模型领域一个非常火热的技术——RAG&#xff08;Retrieval Augmented Generation&#xff09;。RAG通过引入外部知识库&#xff0c;有效地缓解了大型语言模型&#xff08;LLM&#xff09;在处理知识密集型任务时可能出现的幻觉、知识过时等问题。然而&#xff…...

编程日记 2025/6/4 21:33:38

OpenGL、GLUT、freeGLUT 与 GLFW 的区别

在图形编程中&#xff0c;OpenGL 是最核心的渲染 API&#xff0c;但仅靠它本身无法完成窗口创建、事件处理等任务。因此&#xff0c;开发者通常会借助一些辅助库来简化开发流程。常见的库包括 GLUT、freeGLUT 和 GLFW。 本文将详细讲解这些技术之间的区别&#xff0c;并提供每…...

编程日记 2025/6/4 2:23:40

服务器带宽线路的区别（GIA、CN2、BGP、CMI等）

服务器带宽线路的区别&#xff08;GIA、CN2、BGP、CMI等&#xff09; 一、BGP线路 1. 定义与技术特点 BGP&#xff08;Border Gateway Protocol&#xff0c;边界网关协议&#xff09;是一种用于不同自治系统&#xff08;AS&#xff09;之间交换路由信息的协议&#xff0c;属…...

编程日记 2025/6/3 18:10:58

ppt一键制作：ai自动生成PPT，便捷高效超级精美！

深夜的台灯下&#xff0c;你对着杂乱的 PPT 内容反复刷新灵感&#xff0c;鼠标在字体、配色选项间来回穿梭&#xff0c;好不容易拼凑出的页面&#xff0c;却总透着浓浓的 “廉价感”&#xff1b;汇报在即&#xff0c;逻辑混乱的大纲改了又改&#xff0c;每一页感觉合适又不搭&a…...

编程日记 2025/6/4 10:18:22

多方法解决MNIST数字识别

全连接层 import torch from torchvision import datasets, transforms import torch.nn as nn import torch.optim as optim from tqdm import tqdm # 用于进度条显示 import os# 定义数据预处理（标准化+Tensor转换） transform = transforms.Compose([transforms.ToTensor…...

编程日记 2025/6/3 18:11:06

Maven（黑马）

Maven 是一个强大的项目管理和构建自动化工具&#xff0c;主要用于 Java 项目的构建、依赖管理和文档生成。它通过使用 POM&#xff08;Project Object Model&#xff09;文件来管理项目的配置和依赖关系&#xff0c;从而实现项目的自动化构建和管理。以下是 Maven 的一些核心概…...

编程日记 2025/6/3 18:11:02

CppCon 2014 学习:ODB, Advanced Weapons and Tactics

#Schema Evolution 是数据库持久化技术中的一个重要概念&#xff0c;特别是在使用像 ODB 这样的 C ORM 框架时。 展示的代码片段正是 ODB 支持的**模式演化&#xff08;Schema Evolution&#xff09;**语法示例。 什么是 Schema Evolution&#xff1f; Schema Evolution 指的…...

编程日记 2025/6/4 5:24:10

将手机网络经USB数据线和本地局域网共享给华为AP6050DN无线接入点

引言 由于最近装毕的新家所在的小区未能及时通宽带，于是家中各类无线设备如何上网就成了首要要解决的问题。 鉴于家中要联网的设备多、类型杂、支持频段也不一，总是开手机热点不是回事儿，于是就想着把手机网络引至华为AP6050DN无线接入点中，让家中所有的无线设备都能快速高…...

编程日记 2025/6/4 7:22:41

【论文解读】Deformable DETR | Deformable Transformers for End-to-End Object Detection

论文地址&#xff1a;https://arxiv.org/pdf/2010.04159 代码地址&#xff1a;https://github.com/fundamentalvision/Deformable-DETR 摘要 DETR最近被提出&#xff0c;旨在消除物体检测中许多手工设计的组件的需求&#xff0c;同时展示出良好的性能。然而&#xff0c;由于T…...

编程日记 2025/6/4 19:55:23

android 图片背景毛玻璃效果实现

图片背景毛玻璃效果实现 1 依赖 // Glide implementation("com.github.bumptech.glide:glide:4.16.0") kapt("com.github.bumptech.glide:compiler:4.16.0") implementation("jp.wasabeef:glide-transformations:4.3.0") 2 布局<com.googl…...

编程日记 2025/6/4 8:38:06

机器学习----决策树

一、决策树简介 from sklearn.tree import DecisionTreeClassifier from sklearn.tree import plot_tree 决策树是一种树形结构&#xff0c;树中每个内部节点表示一个特征上的判断&#xff0c;每个分支代表一个判断结果的输出&#xff0c;每个叶子节点代表一种分类结果。 决…...

编程日记 2025/6/4 10:03:03