【海贼王航海日志:前端技术探索】CSS你了解多少?(二)

news2024/11/15 23:34:22

目录

1 -> 字体属性

1.1 -> 设置字体

1.2 -> 字体大小

1.3 -> 字体粗细

1.4 -> 文字样式

2 -> 文本属性

2.1 -> 文本颜色

2.1.1 -> 认识RGB

2.1.2 -> 设置文本颜色

2.2 -> 文本对齐

2.3 -> 文本装饰

2.4 -> 文本缩进

2.5 -> 行高

3 -> 背景属性

3.1 -> 背景颜色

3.2 -> 背景图片

3.3 -> 背景平铺

3.4 -> 背景位置

3.5 -> 背景尺寸

4 -> 圆角边框

4.1 -> 生成圆形

4.2 -> 生成圆角矩形

4.3 -> 展开写法


1 -> 字体属性

1.1 -> 设置字体

body {
    font-family: '微软雅黑';
    font-family: 'Microsoft YaHei';
}

  • 字体名称可以用中文,但是不建议使用中文。
  • 多个字体之间使用逗号分隔(从左到右查找字体,如果都找不到,就会使用默认字体)。
  • 如果字体名有空格,使用引号包裹。
  • 建议使用常见字体,否则兼容性不好。
<!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>
    .font-family .one {
        font-family: 'Microsoft YaHei';
    }
    .font-family .two {
        font-family: '宋体';
    }
    </style>

</head>

<body>
    
       <div class="font-family">
        <div class="one">
             我是微软雅黑
        </div>
        <div class="two">
             我是宋体
            </div>
       </div>

</body>
</html>

展示结果:

1.2 -> 字体大小

p {
    font-size: 20px;
}

  • 不同的浏览器默认字号不一样,最好给一个明确值(chrome默认是16px)。
  • 可以给body标签使用font-size。
  • 要注意单位px不要忘记。
  • 标题标签需要单独指定大小。

注意:实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或者矮。

<!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>
    .font-size .one {
        font-size: 40px;
    }
    .font-size .two {
        font-size: 20px;
    }
    </style>

</head>

<body>
    
    <div class="font-size">
        <div class="one">
             王路飞
        </div>
        <div class="two">
             王路飞
        </div>
    </div>

</body>
</html>

展示结果:

1.3 -> 字体粗细

p {
    font-weight: bold;
    font-weight: 700;
}

  • 可以使用数字表示粗细。
  • 700 == bold,400是不变粗 == normal。
  • 取值范围是[100,900]。 
<!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>
    .font-weight .one {
        font-weight: 900;
    }
    .font-weight .two {
        font-weight: 100;
    }
    </style>

</head>

<body>
    
    <div class="font-weight">
        <div class="one">
            王路飞
        </div>
        <div class="two">
            王路飞
        </div>
    </div>

</body>
</html>

展示结果:

1.4 -> 文字样式

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

 很少把某个文字变倾斜。但是经常要把em/i改成不倾斜。

<!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>
    .font-style em {
        font-style: normal;
    }
    .font-style div {
        font-style: italic;
    }
    </style>

</head>

<body>
    
    <div class="font-style">
        <em>
            王路飞
        </em>
        <div class="one">
            王路飞
        </div>
   </div>

</body>
</html>

展示结果:

2 -> 文本属性

2.1 -> 文本颜色

2.1.1 -> 认识RGB

我们的显示器是由很多很多的“像素”构成的。每个像素视为一个点,这个点就能反映出一个具体的颜色。我们使用R(red)、G(green)、B(blue)的方式表示颜色(色光三原色)。三种颜色按照不同的比例搭配,就能混合出各种效果。

计算机中针对R、G、B三个分量,分别使用一个字节表示(8个比特位,表示的范围是0~255,十六进制表示为00~FF)。数值越大,表示该分量的颜色就越浓。(255,255,255)就表示白色;(0,0,0)就表示黑色。

2.1.2 -> 设置文本颜色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

鼠标悬停在vscode的颜色上,会出现颜色选择器,可以手动调整颜色。

color属性值的写法:

  • 预定义的颜色值。
  • 十六进制形式。
  • RGB方式。

十六进制形式表示颜色,如果两两相同,就可以用一个来表示。

#ff00ff => #f0f

<!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>
    .color {
        color: red;
        /* color: rgb(255, 0, 0); */
        /* color: #ff0000; */
    }
    </style>

</head>

<body>
    
    <div class="color">One Piece</div>

</body>
</html>

展示结果:

2.2 -> 文本对齐

控制文字水平方向的对齐。

不光能控制文本对齐,也能控制图片等元素居中或者靠右。

text-align: [值];

  • center:居中对齐。
  • left:左对齐。
  • right:右对齐。
<!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>
    .text-align .one {
        text-align: left;
    }
    .text-align .two {
        text-align: right;
    }
    .text-align .three {
        text-align: center;
    }
</style>

</head>

<body>
    
    <div class="text-align">
        <div class="one">王路飞</div>
        <div class="two">王路飞</div>
        <div class="three">王路飞</div>
    </div>

</body>
</html>

展示结果:

2.3 -> 文本装饰

text-decoration: [值];

常用取值:

  • underline 下划线。
  • none 什么都没有。可以给a标签去掉下划线。
  • overline 上划线。
  • line-through 删除线。
<!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>
    .text-decorate .one {
        text-decoration: none;
    }
    .text-decorate .two {
        text-decoration: underline;
    }
    .text-decorate .three {
        text-decoration: overline;
    }
    .text-decorate .four {
        text-decoration: line-through;
    }
    </style>

</head>

<body>
    
    <div class="text-decorate">
        <div class="one">王路飞</div>
        <div class="two">王路飞</div>
        <div class="three">王路飞</div>
        <div class="four">王路飞</div>
    </div>

</body>
</html>

展示结果:

2.4 -> 文本缩进

控制段落的首行缩进(其他行不影响)。

text-indent: [值];

  • 单位可以使用px或者em。
  • 使用em作为单位更好。1个em就是当前元素的文字大小。
  • 缩进可以是负的,表示往左缩进(会导致文字就冒出去了)。
<!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>
    .text-indent .one {
        text-indent: 2em;
    }
    .text-indent .two {
        text-indent: -2em;
    }
    </style>

</head>

<body>
    

    <div class="text-indent">
        <div class="one">王路飞</div>
        <div class="two">王路飞</div>
    </div>

</body>
</html>

展示结果:

2.5 -> 行高

行高指的是上下文本行之间的基线距离。

HTML中展示文字涉及到这几个基准线:

  • 顶线。
  • 中线。
  • 基线(相当于英语四线格的倒数第二条线)。
  • 底线。

内容区:底线和顶线包裹的区域,即下图深灰色背景区域。

其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离。

line-height: [值];

注意1:行高 = 上边距 + 下边距 + 字体大小

上下边距是相等的,此处字体大小是16px,行高40px,上下边距就分别是12px。

<!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>
    .line-height .one {
        line-height: 40px;
        font-size: 16px;
    }
    </style>

</head>

<body>
    
    <div class="line-height">
        <div>
            王路飞
        </div>
        <div class="one">
            王路飞
        </div>
        <div>
            王路飞
        </div>
    </div>

</body>
</html>

展示结果:

注意2:行高也可以取normal等值。

这个取决于浏览器的实现。chrome上normal为21px。

注意3:行高等与元素高度,就可以实现文字居中对齐。

<!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>
    .line-height .two {
        height: 100px;
        line-height: 100px;
    }
    </style>

</head>

<body>
    
    <div class="line-height">
        <div class="two">
            王路飞
        </div>
    </div>

</body>
</html>

展示结果:

3 -> 背景属性

3.1 -> 背景颜色

background-color: [指定颜色]

默认是transparent(透明)的。可以通过设置颜色的方式修改。 

<!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>
    body {
        background-color: #f3f3f3;
    }
    .bgc .one {
        background-color: red;
    }
    .bgc .two {
        background-color: #0f0;
    }
    .bgc .three {
        /* 背景透明 */
        background-color: transparent;
    }
    </style>

</head>

<body>
    
    <div class="bgc">
        <div class="one">王路飞</div>
        <div class="two">刘索隆</div>
        <div class="three">One Piece</div>
    </div>

</body>
</html>

展示结果:

3.2 -> 背景图片

background-image: url(...);

比image更方便控制位置(图片在盒子中的位置)。 

注意:

  1. url不要遗漏。
  2. url可以是绝对路径,也可以是相对路径。
  3. url上可以加引号,也可以不加。
<!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>
    .bgi .one {
        background-image: url(images/云云.jpg);
        height: 3300px;
    }
    </style>

</head>

<body>

    <div class="bgi">
        <div class="one">背景图片</div>
    </div>

</body>
</html>

展示结果:

3.3 -> 背景平铺

background-repeat: [平铺方式]

 重要取值:

  • repeat:平铺。
  • no-repeat:不平铺。
  • repeat-x:水平平铺。
  • repeat-y:垂直平铺。

默认是repeat。

背景颜色和背景图片可以同时存在,背景图片在背景颜色的上方。

<!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>
    .bgr .one {
        background-image: url(images/前端技术.png);
        height: 300px;
        background-repeat: no-repeat;
    }
    .bgr .two {
        background-image: url(images/前端技术.png);
        height: 300px;
        background-repeat: repeat-x;
    }
    .bgr .three {
        background-image: url(images/前端技术.png);
        height: 300px;
        background-repeat: repeat-y;
    }
    </style>

</head>

<body>
    
    <div class="bgr">
        <div class="one">不平铺</div>
        <div class="two">水平平铺</div>
        <div class="three">垂直平铺</div>
    </div>

</body>
</html>

展示结果:

3.4 -> 背景位置

background-position: x y;

修改图片的位置。

参数有三种风格:

  1. 方位名词:(top,left,right,bottom)。
  2. 精确单位:坐标或者百分比(以左上角为原点)。
  3. 混合单位:同时包含方位名词和精确单位。
<!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>
    .bgp .one {
        background-image: url(images/前端技术.png);
        height: 500px;
        background-repeat: no-repeat;
        background-color: purple;
        background-position: center;
    }
    </style>

</head>

<body>

    <div class="bgp">
        <div class="one">背景居中</div>
    </div>

</body>
</html>

展示结果:

注意:

  • 如果参数的两个值都是方位名词,则前后顺序无关。(top left和left top等效)。
  • 如果只指定了一个方位名词,则第二个默认居中(left则意味着水平居中,top意味着垂直居中)。
  • 如果参数是精确值,则第一个肯定是x ,第二个肯定是y。(100 200意味着x为100,y为 200)。
  • 如果参数是精确值,且只给了一个数值,则该数值一定是x坐标,另一个默认垂直居中。
  • 如果参数是混合单位,则第一个值一定为x,第二个值为y坐标。(100 center表示横坐标为 100,垂直居中)

关于坐标系:

计算机中的平面坐标系,一般是左手坐标系(和高中数学上常用的右手系不一样。y轴是往下指的)。

3.5 -> 背景尺寸

background-size: length|percentage|cover|contain;

  • 可以填具体的数值:如40px 60px表示宽度为40px,高度为60px。
  • 也可以填百分比:按照父元素的尺寸设置。
  • cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
  • 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
<!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>
    .bgs .one {
        width: 500px;
        height: 300px;
        background-image: url(images/前端技术.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    </style>

</head>

<body>
    
    <div class="bgs">
        <div class="one">背景尺寸</div>
    </div>

</body>
</html>

展示结果:

注意体会contain和cover的区别。当元素为矩形(不是正方形)时,区别是很明显的。

4 -> 圆角边框

通过border-radius使边框带圆角效果。

基本用法

border-radius: length;

length是内切圆的半径。数值越大,弧线越强烈。

<!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 {
        width: 200px;
        height: 100px;
        border: 2px solid skyblue;
        border-radius: 10px;
    }
    </style>

</head>

<body>
    
    <div>One Piece是真实存在的!!!</div>

</body>
</html>

展示结果:

4.1 -> 生成圆形

让border-radius的值为正方形宽度的一半即可。

<!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 {
        width: 200px;
        height: 100px;
        border: 2px solid skyblue;
        border-radius: 10px;
    } */
    div {
        width: 200px;
        height: 200px;
        border: 2px solid skyblue;
        border-radius: 100px;
        /* 或者用 50% 表示宽度的一半 */
        border-radius: 50%;
    }
    </style>

</head>

<body>
    
    <div></div>

</body>
</html>

展示结果:

4.2 -> 生成圆角矩形

让border-radius的值为矩形高度的一半即可。

<!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 {
        width: 200px;
        height: 100px;
        border: 2px solid skyblue;
        border-radius: 10px;
    } */
    /* div {
        width: 200px;
        height: 200px;
        border: 2px solid skyblue;
        border-radius: 100px;
        /* 或者用 50% 表示宽度的一半 */
        /* border-radius: 50%;
    }  */
    div {
        width: 200px;
        height: 100px;
        border: 2px solid skyblue;
        border-radius: 50px;
    }
    </style>

</head>

<body>
    
    <div></div>

</body>
</html>

展示结果:

4.3 -> 展开写法

border-radius是一个复合写法。实际上可以针对四个角分别设置。

border-radius:2em;

等价于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 10px 20px 30px 40px;

等价于(按照顺时针排序)

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

感谢各位大佬支持!!!

互三啦!!!

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

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

相关文章

Go开发后端和Vue3开发前端的前后端分离框架中自己手戳一个OA流程审批、工作流引擎给新时代一个漂亮便捷的工作流引擎

前言 在软件项目开发中&#xff0c;我们都会接触到流程审批的需要业务&#xff0c;我们以往用的最多就是如下图这种流程编辑引擎插件&#xff1a; 以上截图中的流程工具是不是大家常见的呀&#xff01;感觉很丑拿不出手呀&#xff01;在当前行业内卷及竞争激烈情况下&#xff…

uniapp免费申请苹果证书教程每次7天可用于测试

准备一个苹果账号没有加入过任何组织的 然后下载appuploader下载链接 登录上去切记勾选上未付苹果688 然后点击苹果证书创建p12证书 创建描述文件 uniapp打包自定义基座 这就打包好了可以愉快地开发了&#xff0c;但每次生成只有7天&#xff0c;设备限制3个&#xff0c…

【C++】STL | priority_queue 堆(优先级队列)详解(使用+底层实现)、仿函数的引入、容器适配器的使用

目录 前言 总代码 堆的简介 仿函数 堆的基础框架建立size、empty、top、 向上调整法 and push 向上调整 push 向下调整法 and pop 向下调整法 pop 迭代器区间初始化&#xff08;构造&#xff09; 逻辑讲解 为何选择向下建堆&#xff1f; 建堆代码实现 结语 前言…

区块链的搭建和运维4

区块链的搭建和运维4 (1) 搭建基于MySQL分布式存储的区块链 1.构建单群组网络节点 使用开发部署工具构建单群组网络节点&#xff0c;命令如下&#xff1a; bash build_chain.sh -l 127.0.0.1:4 -p 30300,20200,85452. 启动 MySQL 并设置账户密码 输入如下命令&#xff0c;…

【mysql 第一篇章】系统和数据库的交互方法

一、宏观的查看系统怎么和数据库交互 在我们刚刚接触系统和数据库的时候不明白其中的原理&#xff0c;只知道系统和数据库是需要交互的。所以我们会理解成上图的形式。 二、MYSQL 驱动 随着我们的学习时间的加长以及对程序的了解&#xff0c;发现链接数据库是需要有别的工具辅…

免费【2024】springboot 高校毕业生信息管理系统的设计与实现

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

安卓Termux系统设备安装内网穿透工具实现远程使用SFTP传输文件

文章目录 前言1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问4. 配置固定远程连接地址 前言 本教程主要介绍如何在安卓 Termux 系统中使用 SFTP 文件传输&#xff0c;并结合cpolar内网穿透工具生成公网地址&#xff0c;轻松实现无公网IP环境远程传输&#xf…

用 echarts 开发地图、点击展示自定义信息框

1、下载所需地市的json 链接&#xff1a;DataV.GeoAtlas地理小工具系列 在右侧输入需要的名称&#xff0c;然后下载json文件到本地 2、在html 中准备容器&#xff0c;并设置宽高 <div id"mapContent"> <div ref"mapChart" style"width:10…

全网详解LVS的四种工作模式及案例

目录 LVS&#xff08;Linux virual server&#xff09; 一、集群和分布式的简介 二、LVS的运行原理 1、LVS简介 2、LVS 相关术语 3、LVS的集群类型 三、LVS-NAT工作模式 部署NAT工作模式案例&#xff1a; 1、实验环境 2、实验环境说明 3、配置 四、LVS-DR工作模式 …

Http:八股

1、Https加密方式 1.1Https通过 摘要算法保证数据的完整性&#xff0c; 1、服务器将公钥注册到CA&#xff0c; CA用自己的私钥给 服务器的公钥进行数字签名。 2、客户端拿到服务器证书后&#xff0c;用CA的公钥确认数字证书的真实性。 3、获取服务器的公钥&#xff0c;使用它对…

SpringBoot Actuator

对应用进行观测,监控,预警 健康状况[组件状态,存活状态] health 健康端点:返回存活,死亡. Health对象 运行指标[CPU,内存,垃圾回收,吞吐量,响应成功率] Metrics 指标监控端点:访问次数/率等等 链路追踪等等 引入web和actuator依赖 在…

如何在不丢失数据的情况下绕过IPhone密码?

不幸的是&#xff0c;不可能在不丢失数据的情况下绕过 iPhone 密码。通过密码的唯一方法是使用iTunes或iCloud恢复设备。这将清除您设备的内容&#xff0c;因此请务必在恢复之前备份所有重要数据。如果您忘记了密码&#xff0c;请按照以下步骤操作&#xff1a; 1. 将您的 iPhon…

AI绘画 Stable Diffusion后期处理—无需ControlNet也能轻松高清放大图像与老旧照片修复,SD新手必看教程

大家好&#xff0c;我是设计师阿威 分享了这么多期AI绘画Stable DIffusion的入门教程和一些常用的插件玩法后&#xff0c;不知道大家有没有发现&#xff0c;SD还有一个功能&#xff0c;似乎没怎么用到过&#xff0c;它就是—后期处理。 今天就给大家分享一下SD中的 “后期处理…

VLSI | 计算CMOS反相器的负载电容

ref. 数字集成电路 电路、系统与设计&#xff08;第二版&#xff09;&#xff0c;周润德 译 为了计算方便&#xff0c;本人编写了MATLAB代码进行计算&#xff0c;需要可至&#xff1a;MATLAB计算CMOS反相器等效负载电容 。资源中也给出了PTM的MOS模型参数。对于MOS的模型参数&…

TMGM:日本加息预期被推迟,日元相对稳定

根据最新的日本银行《意见总结》&#xff0c;"实现通胀目标的可能性进一步增加"&#xff0c;预计将进一步上升。 "假设通胀目标将在2025财年下半年实现&#xff0c;央行应在那时将政策利率提高到中性利率水平。由于中性利率水平至少在1%左右&#xff0c;为避免…

injected stylesheet 导致 页面重置按钮文字样式改变,按钮中的文字看不清晰

项目场景&#xff1a; 相关背景&#xff1a; injected stylesheet 导致 页面重置按钮文字样式改变&#xff0c;看不清晰 问题描述 遇到的问题&#xff1a; 检查页面中该按钮的代码如下所示&#xff1a; <div class"el-form-item__content"> <button d…

手把手从0开始,使用Ollama+OpenWebUI本地部署阿里通义千问Qwen2 AI大模型

&#x1f4a5;Ollama介绍 Ollama是一个开源框架&#xff0c;专为在本地机器上便捷部署和运行大型语言模型&#xff08;LLM&#xff09;而设计。它提供了一套简单的工具和命令&#xff0c;使任何人都可以轻松地启动和使用各种流行的LLM&#xff0c;例如GPT-3、Megatron-Turing N…

Python教程(十二):面向对象高级编程详解

目录 专栏列表前言变量命名规则说明&#xff1a;一、类的内部变量和特殊方法1.1 内部变量示例测试结果: 1.2 __slots__未使用__slots__使用__slots__ 二、装饰器2.1 函数装饰器示例 2.2 property示例 三、枚举类3.1 枚举类概述3.2 枚举类定义示例 四、元类4.1 什么是元类4.2 自…

去除猫咪浮毛哪款更胜一筹?希喂、有哈宠物空气净化器测试对比

随着养宠人群的增多&#xff0c;宠物空气净化器受到铲屎官们的喜爱&#xff0c;成为家庭清洁的好帮手。然而&#xff0c;市场上的选择繁多&#xff0c;不少品牌以次充好&#xff0c;让人们掉入消费陷阱。为此&#xff0c;挑选一台优质有保障的宠物空气净化器品牌&#xff0c;需…

智界S7 小鹏P7 G3 G3i P5 G9 P7i G6 X9维修手册和电路图线路图接线资料更新

汽修帮手资料库提供各大厂家车型维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图解对照表位置等&#xff0c;并长期保持高频率资料更新&#xff01; 覆盖车型2020-2024年智界S7 小鹏…