MDN Web 文档学习笔记——CSS

Posted by Waynerv on

category: 前端

Tags: CSS

CSS-设计Web

CSS介绍

CSS运作原理

  1. CSS规则
    • 一组 属性 ,属性的值更新了 HTML 的内容的显示方式。比如,我想让元素的宽度是其父元素的50%,或者元素背景变为红色。
    • 一个 选择器,它选择元素,这(些)元素是你想应用这些最新的属性值于其上的元素。比如,我想将我的CSS规则应用到我HTML文档中的所有段落上。
  2. 处理过程与文档对象模型(DOM)
    • 浏览器显示文档时,它必须将文档的内容与其样式信息结合
    • 渲染过程
  3. 将CSS应用到HTML的3种方式:
    • 外部样式表(推荐)
    • 内部样式表
    • 内联样式,使用元素的style属性设置CSS属性值,仅影响一个元素

CSS语法

  1. CSS的基本层次构成元素:属性(Property):属性值(Value)
  2. 声明块里的最后一个声明结束的地方,不需要加分号,但是最后加分号是个好习惯
  3. 选择器加上声明块被称为规则集(ruleset),通常简称规则(rule)
  4. CSS语句:规则(集)、@-规则或嵌套语句
  5. 一个给定的属性可能被多个规则设置多次,CSS通过层叠算法定义规则的优先级
  6. CSS中的一些特殊语句:@-规则(At-rules)在CSS中被用来传递元数据、条件信息或其它描述性信息。每种描述符定义的@-规则,都有其特有的内部语法和语义。如:
    • @charset 和 @import(导入其他CSS文件) (元数据)
    • @media 或 @document (条件信息,又被称为嵌套语句,见下方。)
    • @font-face (描述性信息) @media (min-width: 801px) { body { margin: 0 auto; width: 800px; } } 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容;
  7. 允许在一行设置多个属性的称为简写属性,如 font,background,padding,border,和 margin

CSS选择器

  1. 选择器可以被分为以下类别:
    • 简单选择器(Simple selectors):通过元素类型、class 或 id 匹配一个或多个元素。
    • 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素。
    • 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,或元素是DOM树中一父节点的第一个子节点。
    • 伪元素(Pseudo-elements):匹配处于相关的确定位置的一个或多个元素,例如每个段落的第一个字,或者某个元素之前生成的内容。
    • 组合器(Combinators):这里不仅仅是选择器本身,还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如,你可以只选择divs的直系子节点的段落,或者直接跟在headings后面的段落。
    • 多重选择器(Multiple selectors):这些也不是单独的选择器;这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面, 以将一组声明应用于由这些选择器选择的所有元素。
简单选择器
  1. 文档中的多个元素可以具有相同的class类名,而单个元素可以有多个class类名(以空格分开多个类名的形式书写),类名可以自由自定义
  2. 任何元素都可以使用id属性自定义唯一的ID名称。一个ID名称必须在文件中是唯一的。这是选择单个元素的最有效的方式
  3. 通用选择器(*),它允许选择在一个页面中的所有元素。常见的做法是与其他选择器结合使用
属性选择器
  1. 属性选择器是一种特殊类型的选择器,它根据元素的属性和属性值来匹配元素。它们的通用语法由方括号 ([]) 组成,其中包含属性名称,后跟可选条件以匹配属性的值。
  2. 存在和值(Presence and value)属性选择器:
    • [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
    • [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
    • [attr~=val]:该选择器仅选择具有 attr 属性的元素,而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
  3. data-* 属性被称为数据属性。它们提供了一种在HTML属性中存储自定义数据的方法
  4. 子串值(Substring value)属性选择器Edit:
    • [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素。
    • [attr^=val] : 选择attr属性的值以 val 开头(包括 val)的元素。
    • [attr$=val] : 选择attr属性的值以 val 结尾(包括 val)的元素。
    • [attr*=val] : 选择attr属性的值中包含子字符串 val 的元素
伪类和伪元素
  1. 当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类
  2. 伪元素前缀是两个冒号 (::) , 同样是添加到选择器后面去选择某个元素的某个部分
组合器和多个选择器
  1. 组合器 名称|组合器|选择 --|--|-- 选择器组 |A,B|匹配满足A(和/或)B的任意元素(参见下方 同一规则集上的多个选择器). 后代选择器|A B|匹配B元素,满足条件:B是A的后代结点(B是A的子节点,或者A的子节点的子节点) 子选择器|A > B|匹配B元素,满足条件:B是A的直接子节点 相邻兄弟选择器|A + B|匹配B元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面) 通用兄弟选择器|A ~ B| 匹配B元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)
  2. 应用同一规则的选择器组:通过相互间用逗号分隔的多个选择器所形成的组,可以一次性将同一规则同时应用到多组选定元素

CSS的值和单位

数值
  1. 像素 (px) 是一种绝对单位(absolute units),em是Web开发中最常用的相对单位,1em与当前元素的字体大小相同:1em = 16px(默认情况)
  2. 相对单位:em,ex,ch,rem,vw,vh。相对单位用于相对于你的字体或视窗大小来调整HTML元素的大小
  3. em:1em与当前元素的字体大小相同。浏览器给网页设置的默认基础字体大小是16像素,这意味着对一个元素来说1em的计算值默认为16像素,但em单位会继承父元素的字体大小。 REM(root em)和em以同样的方式工作,但它总是等于默认基础字体大小的尺寸;继承的字体大小将不起作用。
  4. 如果数值为0可以不加单位,或者设置行高时,数值为font-size值的若干倍
百分比
  1. 百分比用于构建动态布局(相对于固定宽度布局),如宽度总是会被调整到其父容器宽度一定百分比的盒子。而那些宽度被设置为某个固定单位值(如px或em)的盒子,它们总是保持固定的尺寸,即使它们父容器的宽度发生变化。
  2. <body>元素,默认情况下宽度是视口宽度的100%。
颜色
  1. 颜色的表示方式:关键词(red)、十六进制值(#ff0000)、RGB(rgb())、HSL(hsl()),RGBA和HSLA增加透明度
  2. 不透明度属性(Opacity),设置所有选定元素以及它们的孩子节点的不透明度(不仅限于背景颜色),数值范围为0-1
  3. RGB和HSL都有相应的模式——RGBA和HSLA——不仅允许您设置想要显示的颜色,还有此颜色的透明度( transparency )。
  4. 注意opacity与rgba的区别:是否应用于子元素
函数
  1. css中可以使用函数,如rgb(),hsla(),calc(),url()

层叠和继承

层叠
  1. 层叠的决定顺序:重要性-专用性-源代码次序
  2. 重要性:!important可以让一条规则总是优先于其他规则,但可能存在多个!important声明
  3. IDs/class 选择器优先于element选择器
  4. 建议千万不要使用!important,除非绝对必须使用它
  5. 专用性:style属性>ID选择器>类、属性、伪类选择器>元素、伪元素选择器
  6. 源代码次序:后面的规则将战胜先前的规则
  7. 所有规则都会被应用,重叠的属性才会计算顺序
继承
  1. font-family和color属性会被子元素继承,而margin,padding,border 和 background-image等不会被继承
  2. 四种特殊的通用属性值:inherit(继承父元素样式), initial(浏览器默认样式), unset(不设置值), revert(自定义值)
  3. 执行继承的前提是层叠优先

框模型

  1. 框属性示意图
  2. border的属性组合:top、right、bottom、left与width、style、color
  3. 外边距塌陷:当两个框彼此接触时,它们的间距将取两个相邻外边界的最大值,而非两者的总和(较小的margin有效宽度为0,只留下值较大的margin)
  4. content的可用空间:在margin, border, padding占据了它们的空间后剩下的空间的宽度和高度(默认为100%)
  5. 框的高度总是采用框内容的高度,除非指定一个绝对的高度
  6. overflow属性:控制内容是否溢出:auto(滚动条),hidden(隐藏),visible(显示)
  7. 背景裁剪:background-clip: border-box;padding-box; content-box
  8. 默认情况下只有块级元素(block box)才具有盒子模型的属性
  9. 三种常见框类型:块框( block box),行内框( inline box),行内块状框(inline-block box):不会在段落行中断开

调试CSS

  1. CSS也是宽容的,如果声明或选择器出错,将直接会被忽略

样式化文字

基本文本和字体样式

  1. 文本样式=字体样式+文本布局风格
字体
  1. 颜色:color属性设置选中元素的前景内容的颜色
  2. 字体:font-family属性为浏览器指定字体或字体列表,如果字体不可用会用默认字体代替
  3. 默认字体风格:serif, sans-serif, monospace, cursive,和 fantasy5种风格,具体使用字体取决于浏览器及操作系统
  4. 设置字体栈(有序提供多个可选字体):字体名称间用逗号分离,不止一个单词的字体用引号包裹,建议最后提供一个风格字体
  5. 元素的font-size属性从父元素继承,浏览器默认设置值为16px()
  6. 最佳实践:将文档的的基础font-size设置为10px,方便计算em
  7. 字体样式font-style:normal,italic,oblique,字体粗细font-weight:normal,bold,字型转换text-transform:none,uppercase,lowercase,capitalize,full-width,文本装饰text-decoration:none,underline,overline,line-through
  8. 文字阴影:text-shadow: 4px 4px 5px red,参数分别为水平偏移,垂直偏移,模糊半径,阴影颜色
文本布局
  1. 文本对齐:text-align:left right center justify
  2. 行高:line-height属性设置文本每行之间的高,接受长度单位,也可设置一个无单位值作为乘数(乘以font-size
  3. 字母间距:letter-spacing;单词间距:word-spacing
  4. font简写方式: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family,只有font-size和font-family必须指定

样式化列表

  1. list-style-type :设置用于列表的项目符号的类型,例如无序列表的方形或圆形项目符号,或有序列表的数字,字母或罗马数字。
  2. list-style-position :设置在每个项目开始之前,项目符号是出现在列表项内,还是出现在其外。
  3. list-style-image :允许您为项目符号使用自定义图片,而不是简单的方形或圆形。
  4. 以上3条简写方式:list-style: square url(example.png) inside;
  5. 列表技术开始值:<ol start="4">;倒数计数:<ol start="4" reversed>
  6. 直接设置列表项指定数值:<li value="6">

样式化链接

应用样式
  1. 链接状态,每个状态都有对应的伪类:
    • Link (没有访问过的): 链接的默认状态,使用:link 伪类来应用样式。
    • Visited: 已经被访问过了(存在于浏览器的历史纪录), 使用:visited 伪类来应用样式。
    • Hover: 当用户的鼠标光标刚好停留在这个链接,使用:hover 伪类来应用样式。
    • Focus: 当链接被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候,或者使用编程的方法来选中这个链接 HTMLElement.focus()) 可以使用:focus 伪类来应用样式。
    • Active: 当链接被激活的时候 (比如被点击的时候),可以使用 :active 伪类来应用样式
  2. border-bottom和text-decoration都可以生成下划线,但前者样式更好一些,因为绘制位置更低,不会穿过字母
  3. 当 border-bottom属性未设置颜色时边框采用和元素文本一样的颜色,text-decoration:none去下划线
在链接中插入图标
  1. 对应CSS规则为:

    a[href*="http"] {
      background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
      background-size: 16px 16px;
      padding-right: 19px;
    }
    
    样式化链接为按钮
  2. display 属性为 inline、inline-block

Web字体

  1. 传统字体使用方式的限制:浏览器或所在系统必须支持该字体,使用web字体可以突破此限制
  2. 使用方式:在CSS开始处通过@font-face指定下载字体文件,然后在规则中引用 html @font-face { font-family: "myFont"; src: url("myFont.ttf"); }
  3. 一个html文件可以调用任意多个文件名不重复的css文件
测试
  1. 文字样式化顺序:字体-文本-链接-列表-导航栏菜单

样式化区块

盒模型概要

  1. 设置宽和高的约束,使页面内容可以灵活响应,又限制最大宽度: html width: 70%; max-width: 1280px; min-width: 480px; margin: 0 auto;
  2. 将图像和视频限制在容器内部,使之不溢出。父容器宽度缩小到小于图像的宽度时,图像会一起缩小: html display: block; margin: 0 auto; max-width: 100%;
  3. 改变盒子宽度的计算方式:box-sizing: border-box;
  4. 常见的盒子类型(display属性指定:
    • 块盒(block box):堆放在其它盒子之上的盒子(不在一行),可以设置高度和宽度。上述盒模型都适用于块盒。
    • 行内盒(inline box):与周围的文本和其它行内元素出现在同一行,随文本流换行。宽度和高度设置无效;所有内边距、外边距和边界设置会改变周围文本的位置,但不会影响周围块盒的位置。
    • 行内块盒(inline-block box):跟随周围的文本流堆放不换行;可以使用宽度和高度设置大小,具有块完整性—不会跨段落行换行(空间不够会下落到第二行)
  5. 块级元素默认设置为 display: block;,行内元素默认设置为display: inline;

背景

  1. 默认情况下是指元素内容、内边距和边界下层的区域(不包括margin),但可以通过background-clip改变背景区域
  2. 背景并不在外边距下层——外边距不是元素区域的一部分,而是元素外面的区域
基本属性
  1. 背景颜色background-color:默认颜色为透明(transparent),尽量设置后备颜色
  2. 背景图像background-image:使用url()函数添加图像文件,默认情况是平铺重复的,支持包括svg的各种格式
  3. 背景重复:no-repeat, repeat-x, repeat-y, repeat.
  4. 背景位置:指定图像的水平和垂直坐标,图像的左上角为原点。如果只指定一个值,将被假定为水平值,垂直值将默认为center,百分比表示结束位置
  5. 背景渐变:background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);,百分比表示结束位置
  6. 背景附着:scroll:更对页面滚动;fixed:始终不滚动;local:跟随元素滚动
  7. 背景简写:简写以上属性background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;
  8. 多重背景:用逗号分隔多个成组的背景声明,第一个出现在顶部,第二个在下面,以此类推
  9. 背景尺寸:background-size: 16px 16px;,可以使用px、em、百分比等单位

边框

  1. 没有明确设置值时,默认使用文本的颜色,宽度为3px
  2. 边框类型:solid, dashed, dotted
  3. 边框半径:border-radius: 20px;,对应上左、上右、下右、下左四个角,可以使用em、百分比等单位。
  4. 边框图像:

      border: 20px solid black;  /* 作为后备属性 */
      background-clip: padding-box;
      border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
      border-image-slice: 40; /* 4个方向向内裁切偏移量,单位默认为px */
      border-image-repeat: round; /* 平铺但不会截断 */
    

    样式化表格

  5. 固定表格布局,使其不因元素内容改变大小(应设定固定百分比宽度):table-layout属性设置为fixed

  6. 取消单元格之间的间隔:border-collapse属性设置为collapse
  7. 默认情况下,单元格(td)text-align值为left,标题(th)为center
  8. 实现斑马条纹:公式2n-1选择所有奇数的字数(1、3、5等),2n会选择所有偶数的子数(2、4、6等等),与关键字odd,even等同
  9. caption-side属性为底部bottom时,标题被放置在表格的底部
  10. 优化建议: 表格布局-列宽行高-边框-元素字体、间距、对齐方式-背景图片-斑马条纹-表头文字

高级盒模型特性

  1. 盒子阴影:box-shadow: 5px 5px 5px rgba(0,0,0,0.7);.属性值:水平偏移、垂直偏移、模糊半径、基本颜色
  2. 多个盒子阴影:指定多个框阴影声明,用逗号分隔
  3. 内部阴影: box-shadow属性的开始处增加inset关键字
  4. Filters滤镜: 作用于盒(box)内内容(content)的确切形状,而不仅仅将盒子本身作为一个大的块
  5. 混合模式: 讲元素与背景图片颜色混合显示 background-blend-mode: multiply;
  6. -webkit-background-clip: textEdit;-webkit-text-fill-color: transparent;: 将背景图案填充为字体形状(其余背景不显示)

评估

  1. 内嵌阴影关键字为inset

CSS布局

CSS布局基本介绍

  1. 正常布局流:浏览器默认的HTML解析布局方式
  2. 浮动: float: left, right, none, inherit;, 改变元素堆叠方式(上下变成左右),最常用于文字浮动于元素周围
  3. 定位技术(position属性),精确控制元素位置:
    • 静态定位(static)默认的属性——“将元素放在文档布局流的默认位置”。
    • 相对定位(relative)允许我们相对元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上
    • 绝对定位(absolute)将元素完全从页面的正常布局流中移出,相对某个元素进行固定,例如通过标签显示和隐藏的内容面板
    • 固定定位(fixed)将一个元素相对浏览器视口固定,而不是相对另外一个元素。 在创建类似页面滚动总是处于页面上方的导航菜单时非常有用。
    • 粘性固定(sticky)屏幕范围(viewport)内时该元素的位置不受到定位影响,当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果
  4. display属性:block、inline、block-inline设置在正常布局流中的显示方式(所有元素通过该属性的默认值定义如何显示)

正常布局流

  1. 默认情况下,一个块级元素的内容宽度是其父元素的100%,并且与其内容一样高
  2. 内联元素高宽与他们的内容高宽一样。不能对内联元素设置宽度或高度

弹性盒子

  1. 指定父元素的布局为flexible:display: flex
  2. 弹性盒子默认主轴方向为row,设置方式:flex-direction: column,后加-reverse可反向
  3. 让弹性盒子在有必要时拆行:flex-wrap: wrap;
  4. flex-flow为flex-directionflex-wrap的缩写
  5. flex项的动态尺寸:flex: 1;中1为无单位的比例值,表示每个flex项沿主轴的可用空间大小。后加固定单位表示在按比例分配前的预置空间
  6. align-items控制flex项在交叉轴上的位置:stretch(默认值)拉伸填充;center保持原高度但居中,flex-start,flex-end在开始或结束处对齐
  7. justify-content控制flex 项在主轴上的位置,属性值同上(space-around沿主轴均匀分布)
  8. flex项排序:order: 1;,默认值为0,越小越靠前,值相等则按源顺序排序(可以设置负值)

网格

  1. 参考文章:learn css grid
Grid
  1. 创建网格容器:display: grid(或inline-grid),容器内的子元素成为grid itrm,默认按列排布,填充容器宽度
  2. 显式设置固定网格:通过grid-template-columns和grid-template-rows属性创建行和列
  3. grid-template-rows: 50px 100px创建网格row track(轨道),高度值可以为px,%,em等,未定义的轨道高度为内容高度。(columns基本相同,但限定每行列数)
  4. fr单位示例:1fr = ((width of grid) - (3rem) - (25% of width of grid)) / 3
  5. 设置网格track的最小值和最大值示例:grid-template-rows: minmax(100px, auto);grid-template-columns: minmax(auto, 50%) 1fr 3em;
  6. 使用repeat()函数重复设置轨道数值:grid-template-rows:repeat(4, 100px);,参数1为重复次数,参数2为重复数值
  7. 网格间隔Grid Gaps(Gutters):定义行列之间(不包括容器边缘)的间隔,简写方式grid-gap: 100px 1em(row&column)
Items
  1. 通过网格分界线定位:grid-row:2;grid-column: 3/4;,grid-area: 2 / 2 / 3 / 3代表grid-row-start, grid-column-start, grid-row-end, grid-column-end.
  2. grid items的跨行或跨列分布:grid-row: 2 / 5;grid-column: 2 / 4;(简写start和end)
  3. 通过Grid Areas命名放置items,每个名称定义1列,每组名称定义1行: html grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-rows: 150px 1fr 100px; grid-template-columns: 1fr 200px; 放置item:grid-row-start:header;grid-row-end:header;grid-column-start:header;grid-column-end:header;(可简写)或grid-area: sidebar;
  4. 放置item:.item-2 {grid-row-start: 1; grid-column-end: span 2;}
Aligning Grid Items
  1. 网格容器对齐属性:justify-items沿行轴对齐;align-items沿列轴对齐。常用值:start,end,center,stretch,auto,normal
  2. items个体对齐属性:justify-self沿行轴对齐;align-self沿列轴对齐。常用值同上
  3. 在css内执行计算:使用calc()函数。

浮动

  1. 工作方式:脱离正常的文档布局流,并吸附到其父容器的左边或右边。正常布局中位于该浮动元素之下的内容,会围绕着浮动元素填满其右侧的空间
  2. 文字围绕图片:img {float: left;margin-right: 30px;}
  3. 首字下沉:p::first-letter {font-size: 3em;float: left;margin-right: 4px;}
  4. 多列浮动布局:设置元素合理宽度,增加float属性,需要时设置margin间隔
  5. 使用浮动可以使可视化布局与源顺序不同
  6. 需要注意的问题:所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装,解决方案:footer {clear: both;}此处起停止浮动
  7. 由于内边距和边界引入的额外宽度,原有的多列布局容易被破坏,解决方案:* {box-sizing: border-box;}更改盒模型
  8. 页脚问题:页脚正压在最长列上,非浮动元素的外边距不能用于它们和浮动元素之间来创建空间,解决方案:页脚之上增加一个空白clearfix清除浮动块
  9. 浮动项目的背景高度,设置固定高度容易出现问题;Flexbox可以自动地延长列,使高度和最长的一列一样。

定位

  1. 盒模型原理:环绕元素内容添加任何内边距、边界和外边距来布置单个元素盒子
  2. 相对定位:position: relative;,使用top, bottom, left, right属性,相对正常布局位置进行长度移动
  3. 绝对定位:不再存在于正常文档布局流,默认情况下相对\元素固定,通过position: relative;指定相对元素
  4. 使用z-index更改堆叠顺序:源顺序中后定位的元素将堆叠在先定位的元素之后,z-index值默认为0,值越大展示优先级越高
  5. 固定定位相对于浏览器视窗本身固定元素,也不再存在于正常文档布局流,注意在下方的元素增加上边距
  6. 粘性定位:元素在跨越特定阈值前为相对定位,之后为固定定位,如#one { position: sticky; top: 10px; }

定位实例

  1. 消息盒子思路:将消息panel设置为绝对定位(相对于所在父元素)进行覆盖,被选中的元素z-index值设为1,显示在最上面
  2. 固定位置消息盒子思路:将消息盒子设为fixed,主内容设置足够的margin-left值
  3. 滑动隐藏面板思路:label+checkbox(input),点击label则checkbox进入checked状态(可被伪类选择器选中),分别设置选中前后面板位置,设置transition属性实现动画。

多列布局

  1. 创建多列布局:设置的容器的column-count 或者 column-width.
    • .container {column-count: 3;},创建制定数量的列,宽度由浏览器计算平均分配
    • .container {column-width: 200px;},浏览器按指定宽度尽可能多的创建列;除非刚好除尽,否则剩余的空间会被现有的列平分(不能用百分比)
  2. Multicol 创建的列无法为某一列单独的设定样式(背景、文本),只能设定以下样式:
    • 使用 column-gap: 200px 改变列间间隙(接受任何长度单位)
    • column-rule: 4px dotted blue 在列间加入一条分割线(用法同border),分割线本身并不占用宽度
  3. 设置break-inside: avoid; 或者 page-break-inside: avoid;防止某一元素在自动分列时从内部被割断

注:转载本文,请与作者联系




如果觉得文章对您有价值,请作者喝杯咖啡吧

|
donate qrcode

欢迎通过微信与我联系

wechat qrcode

0 Comments latest

No comments.