css知识点1

最新推荐文章于 2024-09-06 09:38:49 发布

好饿呀~～～

最新推荐文章于 2024-09-06 09:38:49 发布

阅读量319

点赞数 2

分类专栏：【前端】文章标签： css3 css

本文链接：https://blog.csdn.net/qq_51899357/article/details/118152497

版权

【前端】专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一、 CSS第一天

1 css简介

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言：
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。
CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

1.1 css语法规范

1.使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。
2.CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式；
2.属性和属性值以“键值对（属性属性值;）”的形式出现；
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等；
4.属性和属性值之间用英文“:”分开；
5.多个“键值对”之间用英文“;”进行区分。
例如：
所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方

 <head>
        <style>
            h4 {
                color: blue;
                font-size: 100px;
            }
        </style>
    </head>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语法规范</title>
    <style>
        /*选择器 {样式}*/
        /*给谁改样式 {改什么样式}*/
        /*rgb() 也可以表示颜色*/
        p {
          color: blue;
          font-size: 12px ;
        }
    </style>
</head>
<body>
    <p>加油呀！</p>
</body>
</html>

1.2 css代码风格

1. 样式格式书写
        1.紧凑格式   
            h3 { color: deeppink;font-size: 20px;}
        2.展开格式   
         h3 {
            color: pink;
            font-size: 20px;    
         }
    ******强烈推荐第二种格式， 因为更直观。
    2. 样式大小写风格
        1.小写格式
            h3 {
                color: pink;
            }
        2.大写格式
             H3 {
                COLOR: PINK;   
            }
    *****强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
    3. 样式空格风格
        1. h3 {
            color: pink;    
        }
    ******属性值前面，冒号后面，保留一个空格
    ******选择器（标签）和大括号中间保留空格

1.3 css选择器的作用（选择器分为：基础选择器和复合选择器）

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。
简单来说，就是选择标签用的。
在这里插入图片描述

找到所有的 h1 标签。
选择器（选对人）设置这些标签的样式，比如颜色为红色（做对事）。
30岁前选对人，30岁后做对事。

2 css基础选择器

基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器。

2.1 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
语法：

标签选择器{
        属性：属性值
        ...
    }

作用：
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

2.2 类选择器（开发最常用）

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
语法：

   .类名 {
        属性1: 属性值1;  
        ...
    } 
    结构需要用class属性来调用  class  类的意思
     <div class="类名"> 变红色 </div>
    1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
    2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
    3.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
    4.可以理解为给这个标签起了一个名字，来表示。
    5.长名称或词组可以使用中横线来为选择器命名。
    6.不要使用纯数字、中文等命名，尽量使用英文字母来表示。
    7.命名要有意义，尽量使别人一眼就知道这个类名的目的。
    8.命名规范：见附件（ Web 前端开发规范手册.doc）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
  <style>
    /*类选择器口诀： 样式点定义 结构体(class)调用 一个或多个 开发最常用 */
    /*.类名: 随便起名字； 不可以使用标签名*/
    .red {
      color: red;
    }
  </style>
</head>
<body>
    <ul>
      <li class="red">冰雨</li><!--class  是类的意思， 调用类。-->
      <li>来生缘</li>
      <li>李季兰</li>
      <li>审批字</li>
      <li>进度款拉数据量1</li>
    </ul>
</body>
</html>

2.2.1 用类选择器画盒子

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基础案例</title>
  <style>
    .red {
      width: 100px;
      height: 100px;
      /*背景颜色*/
      background-color: red;
    }
    .green {
      width: 100px;
      height: 100px;
      /*背景颜色*/
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="red">红色</div>
  <div class="green"> </div>
  <div class="red"></div>


</body>
</html>

效果：

2.3 多类名选择器

我们可以给一个标签指定多个类名，从而达到更多的选择目的。
这些类名都可以选出这个标签.
简单理解就是一个标签有多个名字.
在这里插入图片描述
多类名的具体使用：

  <div class="red font20">亚瑟</div>
  red 和 font20 为两个类名；
  多个类名连续使用，中间用空格键隔开；
  方便修改，方便使用。

注意：
1.在标签class 属性中写多个类名
2.多个类名中间必须用空格分开
3.这个标签就可以分别具有这些类名的样式
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多类名</title>
<!--    多各类名： 共类 + 特殊-->
  <style>
    .box {
      width: 150px;
      height: 50px;
    }
    .red {
      color: red;
    }
    .font35 {
      font-size: 35px;
    }
  </style>
</head>
<body>
  <div class="box font35">刘德华</div>
</body>
</html>

2.4 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
语法：

   #id名 {
        属性1: 属性值1;  
        ...
    } 
    注意：id 属性只能在每个 HTML 文档中出现一次

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
  <style>
    /*id的选择器口诀： 样式#定义， 结构id调用， 只能调用一次， 被人调用不能再使用*/
    /*id选择器一般用于页面上唯一性元素上， 经常与JavaScript一起使用*/
    #pink {
      color: red;
    }
  </style>
</head>
<body>
    <div id="pink">迈克杰克逊</div>
</body>
</html>

2.5 id选择器和类选择器的区别

1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
2.id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
3.id 选择器和类选择器最大的不同在于使用次数上。
4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

在这里插入图片描述

2.6 通配符选择器

语法：

  * {
        属性1: 属性值1;  
        ...
    }
    * ： 给所有标签使用统一样式

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)

  * {
            margin: 0;
            padding: 0;
        }

2.7 选择器总结

在这里插入图片描述

3 css字体属性

3.1 字体大小

CSS 使用 font-size 属性定义字体大小。
语法：

 p {  
    font-size: 20px; 
}
1.px（像素）大小是我们网页的最常用的单位
2.谷歌浏览器默认的文字大小为16px
3.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
4.可以给 body 指定整个页面文字的大小

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置字体</title>
    <style>
        h2 {
            font-family: '微软雅黑';
        }
        p {
            /*使用字体用英语兼容性更好*/
            /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
            font-family: 'Times New Roman', Times, serif;
            /*如果执行不到或找不到， 那就直接下一个*/
            /*也可以放在<body>里*/
        }
        
         /*标题比较特殊， 要单独设置*/
    body {
      font-size: 16px;
    }
    h2 {
      font-size: 16px;
    }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

效果：
字体修饰

3.2 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。
语法：

   p {  
        font-weight: bold; 
    }

代码：

<style>
    body {
      /*font-weight: bold;*/
      font-weight: 700;
    }
  </style>

在这里插入图片描述
1.学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
2.实际开发时，我们更喜欢用数字表示粗细

3.3 字体样式

CSS 使用 font-style 属性设置文本的风格。
语法：

   p {  
        font-style: normal;
    }

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字样式</title>
  <style>
    /*注意: 我们很少使用斜体, 倒是使用normal 使斜体变为正常*/
    p {
      font-style: italic;
    }
    em {
      font-style: normal;
      /*脉动回来*/
    }
  </style>
</head>
<body>
    <p>同学，上课时的你。</p>
    <em>下课时的你</em>
<!--  <em>该标签表示的是斜体</em>-->
</body>
</html>

效果：
在这里插入图片描述

3.4 字体的综合写法

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

 body {   font: font-style  font-weight  font-size/line-height  font-family;}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开，不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合属性</title>
  <style>
    div {
      /*font-style: italic;*/
      /*font-weight: 700;*/
      /*font-size: 16px;*/
      /*font-family: "Microsoft Himalaya";*/

      /*复合属性： 简写的方式*/
      /*font: font-style font-size font-size/line-height font-family;*/
      /*上面是顺序， 必须严格执行*/
      /*必须包含font-size font-style*/
      font: italic 700 16px 'Microsoft Himalaya';
    }
  </style>
</head>
<body>
    <div>三生三世，十里挑花，一心一意敲代码</div>
</body>
</html>

效果：
复合属性

3.5 字体总结

在这里插入图片描述

4 css文本属性

4.1 文本颜色（color）

color 属性用于定义文本的颜色。
语法：

  div { 
        color: red;
    }

在这里插入图片描述
开发中最常用的是十六进制
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本颜色</title>
  <style>
    div {
      color: pink;
      color: #ff0000;
      /*十六进制*/
      color: rgb(255, 0, 0);
      color: rgb(100%, 0%, 0%);
      /*下面的两种方式都是一样的*/
      /*开发时最常用是是十六进制*/
    }
  </style>
</head>
<body>
  <div>要去南大，加油呀！！！</div>
</body>
</html>

效果：

4.2 文本对齐（text-align）

text-align 属性用于设置元素内文本内容的水平对齐方式。
语法：

   div { 
        text-align: center;
    }

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本对齐属性</title>
    <style>
        h1 {
            /*让所选的文字水平居中*/
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>南大</h1>
</body>
</html>

效果：
在这里插入图片描述

4.3 修饰文本（text-decoration）

语法：

 div { 
    text-decoration：underline；
 }

在这里插入图片描述

重点记住如何添加下划线？如何删除下划线？其余了解即可.
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>装饰文本</title>
    <style>
        div {
            text-decoration: underline;
            /*下划线， 记住就行*/
            text-decoration: none;
            /*没有装饰线*/
            text-decoration: overline;
            /*上划线， 几乎不用*/
            text-decoration: line-through;
            /*删除线， 知道如何删除就行*/
        }

        a {
            /*取消a默认的下划线*/
            text-decoration: none;
            color:#333;
        }
    </style>
</head>
<body>
<div>装饰线</div>
<a href="#">加油呀！不要放弃！</a>
</body>
</html>

效果：
效果4.3

4.4 文本缩进

对网页首行缩进

语法：

 div { 
        text-indent：20px；
    }
    div { 
        text-indent：2em；
    }
    还可以取负值

在这里插入图片描述
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本缩进</title>
  <style>
    p {
      /*文本第一行首行缩进多少*/
      /*tab-index: 20px;*/
      tab-index: 2em;
    }
  </style>
</head>
<body>
  <p>南京大学（Nanjing University），简称“南大”，是中华人民共和国教育部直属的全国重点大学，中央直管高校 [93]  ，位列“双一流”A类、“211工程”、“985工程”重点建设高校，入选“珠峰计划”、“强基计划”、“111计划”、“2011计划”，为九校联盟、中国大学校长联谊会、环太平洋大学联盟、21世纪学术联盟、国际应用科技开发协作网、东亚研究型大学协会、新工科教育国际联盟、中国高校行星科学联盟、长三角研究型大学联盟、学位授权自主审核单位成员。
    南京大学其学脉可追溯自公元258年的南京太学，近代校史肇始于1902年创建的三江师范学堂，此后历经两江师范学堂、南京高等师范学校、国立东南大学、国立中央大学等历史时期，于1950年更名为南京大学。1952年，南京大学调整出部分院系后与创办于1888年的金陵大学文、理学院等合并，仍名南京大学。1920年在中国国立高等学府中首开“女禁”，引领男女同校之风。最早在中国开展现代学术研究，建立中国最早的现代科学研究实验室，成为中国第一所以大学自治、学术自由、文理为基本兼有农工商等专门应用科、集教学和研究于一体的现代大学，被国际上誉为“东方教育的中心”。 [1]
    截至2020年11月30日，学校有仙林、鼓楼、浦口、苏州四个校区；设有31个直属院系，88个本科专业；专业博士学位授权点3个，硕士学位授权一级学科点4个，专业硕士学位授权点28个，博士后流动站38个。现有本科生13196人、硕士研究生16072人、博士研究生7693人、外国留学生1415人。 [1-6] </p>
</body>
</html>

效果：
效果4.4

4.5 行间距（line-height）

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
在这里插入图片描述
语法：

  p { 
        line-height: 26px;
    }

行高的文本分为上间距、文本高度、下间距 = 行间距

4.6 文本属性总结

文本属性总结

5 css样式表：

按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类： 行内样式表（行内式）、内部样式表（嵌入式）和外部样式表（链接式）。

5.1 行内样式表（行内式）（不建议大量使用）

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。
适合于修改简单样式.
语法：

  <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

1.style 其实就是标签的属性
在双引号中间，写法要符合 CSS 规范；
2.可以控制当前的标签设置样式；
3.由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用；
4.使用行内样式表设定 CSS，通常也被称为行内式引入。

5.2 内部样式表（嵌入式）

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中
语法：

 <style>
            div {
            color: red;
            font-size: 12px;
            }
        </style>

1.<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中；
2.通过此种方式，可以方便控制当前整个页面中的元素样式设置；
3.代码结构清晰，但是并没有实现结构与样式完全分离；
4.使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。

5.3 外部样式表（链接式）（推荐使用）

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
引入外部样式表分为两步：
1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用<link> 标签引入这个文件。
语法：

 <link rel="stylesheet"  href="css文件路径">

代码：

<!--css引入方式.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
  <style>
    /*内部引入方式*/
    /*div {*/
    /*  color: #111;*/
    /*  font-style: italic;*/
    /*}*/
  </style>
  <link rel="stylesheet" href="三种引入方式之外部样式表.css">
</head>
<body>
<!--  三种引入方式：内部样式表、 行内样式表、 外部样式表-->
  <div style="color: #000 ; font-style: italic;">左面是行内样式表</div>
</body>
</html>

<!--三种引入方式之外部引入.css-->
div {
    color: #000;
    font-style: italic;
}

5.3 css引入方式总结

在这里插入图片描述

5.4 综合案例之新闻页面

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻页面</title>
    <style>
        p {
            text-indent: 2em;
            font: 16px "Microsoft Himalaya";
        }
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
<h1 >北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
<div style="text-align: center">2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>　
    <input type="text" value="请输入查询条件"><input type="button" value="搜索"></div>
<hr><!--横线-->
<p>中国天气网讯
    今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>

<h3>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h3>
<p style="text-align: center"><img src="综合案例新闻页面图片/pic.jpeg"></p>
<p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
<p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>

<h3>明日热度再升级！京津冀携手冲击38℃+</h3>
<p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。
    明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>

<p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>

本文来源：中国天气网 责任编辑：刘京_NO5631
</body>
</html>

效果：
在这里插入图片描述

6 Chrome调试工具：

在这里插入图片描述
1.Ctrl+滚轮可以放大开发者工具代码大小；
2.左边是 HTML 元素结构，右边是 CSS 样式；
3.右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色；
4.Ctrl + 0 复原浏览器大小；
5.如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误；
6.如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。
7.F12或右击检查打开Chrome调试页面

二、 CSS第二天

7 emmet语法

7.1 简介

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。

快速生成HTML结构语法；

快速生成CSS样式语法。

7.2 快速生成HTML结构语法

生成标签： 直接输入标签名按tab键即可 ，比如： div 然后tab 键，就可以生成 <div></div>；
如果想要生成多个相同标签：加上 * 就可以了 ，比如： div*3 就可以快速生成3个div；
如果有父子级关系的标签：可以用 > ，比如 ul > li就可以了；
如果有兄弟关系的标签：用 + 就可以了，比如 div+p ；
如果生成带有类名或者id名字的： 直接写 .demo 或者 #two tab 键就可以了；
如果生成的div 类名是有顺序的：可以用自增符号 $ ；
如果想要在生成的标签内部写内容：可以用 { } 表示。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>emmet语法使用</title>
    <style>
        .one {
            height: 200px;
            width: 200px;
            line-height: 20px;
        }
    </style>
</head>
<body>
<!--1、简介-->
<!--	      Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。-->
<!--	 1.快速生成HTML结构语法-->
<!--	 2.快速生成CSS样式语法-->
<!--2、快速生成HTML结构语法-->
<!--2.1生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成-->
<!--2.2如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div-->
<!--2.3如果有父子级关系的标签，可以用 > 比如 ul > li就可以了-->
<!--2.4如果有兄弟关系的标签，用 + 就可以了 比如 div+p-->
<!--2.5如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了-->
<!--2.6如果生成的div 类名是有顺序的， 可以用 自增符号 $-->
<!--2.7如果想要在生成的标签内部写内容可以用 { } 表示-->
<!--3、快速生成CSS样式语法-->
<!--CSS 基本采取简写形式即可-->
<!--	 比如 w200 按tab 可以 生成 width: 200px;-->
<!--	 比如 lh26px 按tab 可以生成 line-height: 26px;-->
<!--div*10-->
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
<!--ul>li-->
<ul>
  <li></li>
</ul>
<!--div>span-->
<div><span></span></div>
<!--div+p-->
<div></div>
<p></p>
<!--.nav-->
<div class="nav"></div>
<!--默认为div-->
<!--#banner-->
<div id="banner"></div>
<!--p.one-->
<p class="one"></p>
<!--ul>li#two-->
<ul>
  <li id="two"></li>
</ul>
<!--.demo$*5-->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!--$是自增符号-->
<!--div{我不喜欢} 记得把光标放在外面-->
<div>我不喜欢</div>
</body>
</html>

7.3 快速生成CSS样式语法

CSS 基本采取简写形式即可：

比如 w200 + 按tab，可以生成 width: 200px;

比如 lh26px + 按tab，可以生成 line-height: 26px。

7.4 快速格式化代码

Vscode 快速格式化代码: shift+alt+f， idea：shift+alt+l

也可以设置当我们保存页面的时候自动格式化代码:

1）文件 ------.>【首选项】---------->【设置】；

2）搜索emmet.include;

3）在settings.json下的【工作区设置】中添加以下语句：

“editor.formatOnType”: true,

“editor.formatOnSave”: true

8 css的复合选择器

8.1 什么是复合选择器？

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

8.2 后代选择器 (重要）

定义：

后代选择器又称为包含选择器，可以选择父元素里面子元素。
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

在这里插入图片描述
上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。

语法说明：

元素1 和元素2 中间用空格隔开；
元素1 是父级，元素2 是子级，最终选择的是元素2；
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可；
元素1 和元素2 可以是任意基础选择器。

例子：

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
  <style>
    /*我想要把ol里的小li选出来改为pink*/
    /*只要是其包含的标签都可以*/
    ol li {
      color: pink;
    }
    .nav li {
      color: pink;
    }
    .navi ul li a {
    /*可以直接省略li也行，不过到后来多的情况会出问题*/
      color: deeppink;
    }

  </style>
</head>
<body>
<ol>
  <li>我是 ol 的后代</li>
  <li>我是 ol 的后代</li>
  <li>我是 ol 的后代</li>
  <li>我是 ol 的后代</li>
</ol>
<ul>
  <li>我是 ol 的后代</li>
  <li>我是 ol 的后代</li>
  <li>我是 ol 的后代</li>
  <li>我是 ol 的后代</li>
  <li><a href="#">不会变化的</a>我是 ol 的后代</li>
</ul>
<ul class="navi">
  <li>我是 ol 的后代</li>
  <li>我是 ol 的后代</li>
  <li>我是 ol 的后代</li>
  <li>我是 ol 的后代</li>
  <li><a href="#">不会变化的</a>我是 ol 的后代</li>
</ul>

</body>
</html>

效果：
在这里插入图片描述

8.3 子选择器 (重要）

定义：

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

（简单理解就是选亲儿子元素）

语法：

<img src="images/03.png"/>

上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。

语法说明：

元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

例子：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子选择器</title>
  <style>
    .nav>a {
      color: red;
    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#">我是儿子</a>
    <p>
      <a href="#">我是孙子</a>
    </p>
  </div>
</body>
</html>

效果：
8.3

8.4 并集选择器 (重要）

定义：

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

上述语法表示选择元素1 和元素2。

语法说明：

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

例子：

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        /*要求1： 请把熊大和熊二改为粉色*/
        /*div,*/
        /*p {*/
        /*    color: pink;*/
        /*}*/
        /*要求2: 请把熊二和熊大改为红色， 还有小猪一家改为粉色   */
        div,
        p,
        .pig li {
            color: pink;
        }
        /*约定的语法规范， 我们并集选择器喜欢竖着写*/
        /*一定要注意，最后一个选择器 不需要加逗号*/
    </style>
</head>
<body>
<div>熊大</div>
<p>熊大</p>
<span>光头强</span>
<ul class="pig">
    <li>小猪佩奇</li>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
</ul>
</body>
</html>

效果：
在这里插入图片描述

8.5 伪类选择器

定义：

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

语法：

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接伪类选择器</title>
    <style>
        /*1、未访问的连接 把没有访问过的连接 筛选选出 */
            a:link {
                color: #000;
                text-decoration: none;
            }
        /*2、a:visited 选择点过的(访问过的)链接*/
            a:visited {
                /*点了之后会变色*/
                color: orange;
            }
        /*3、a:hover 选择鼠标经过的那个链接*/
            a:hover {
                /*鼠标放上去会变色*/
                color: skyblue;
            }
        /*4.a:active 选择的是我们鼠标真正按下还没弹起鼠标的那个链接*/
            a:active {
                color: green;
            }
        /*链接伪类选择器注意实项：*/
        /*    1.为了确保生效， 请按照LVHT love hate 的循顺序声明： link、visited、 hover、 active*/
        /*    2.因为a 链接在浏览器中默认样式， 所有我们实际工作中都需要给链接单独指定样式。如果是其他的，不顶用*/
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        a:hover {
            color: #369;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="#">小猪佩奇</a>
</body>
</html>

8.6 链接伪类选择器

定义：

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

语法：

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接

链接伪类选择器注意事项

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

记忆法：love hate 。

因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器实际工作开发中的写法：

8.7 :focus 伪类选择器

定义：

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取。谁获得光标，谁改变。

例子：

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>focus类选择器</title>
    <style>
        /*把获得光标的input表单元素选取出来*/
        /*点进去表单背景会改变颜色， color是设置text 文字的颜色*/
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>
<body>
        <input type="text">
        <input type="text">
        <input type="text">
</body>
</html>

效果：
在这里插入图片描述

8.8 复合选择器总结

9 css的显示模式

9.1 什么是元素的显示模式

定义：

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

作用：

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

9.2 元素显示模式的分类

9.2.1、块元素

常见的块元素：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

<div> 标签是最典型的块元素。

块级元素的特点：

比较霸道，自己独占一行;
高度，宽度、外边距以及内边距都可以控制;
宽度默认是容器（父级宽度）的100%;
是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能放块级元素

<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

9.2.2、行内元素

常见的行内元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个;
高、宽直接设置是无效的;
默认宽度就是它本身内容的宽度;
行内元素只能容纳文本或其他行内元素。

注意：
链接里面不能再放链接
特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

9.2.3、行内块元素

常见的行内块标签：

<img />、<input />、<td>

它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高、外边距以及内边距都可以控制（块级元素特点）。

9.2.4、元素显示模式总结

学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

9.3 元素显示模式的转换

简单理解:

一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围。

转换方式

转换为块元素：display:block;（较多）
转换为行内元素：display:inline;
转换为行内块：display: inline-block。（较多）
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示装换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /*把a转换为块元素，高度有效*/
            display: block;
        }
        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /*把div转换为行内元素，高度无效*/
            display: inline;
        }
        span {
            width: 100px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">加油呀！！！</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内块元素</span>
</body>
</html>

效果：
在这里插入图片描述

9.4 小米侧边栏案例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米侧边框</title>
    <style>
        /*将a转换为块元素*/
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            /*垂直居中，只要使行高和盒子高度相等就行*/
            /*行高小于盒子高度偏上，行高大于盒子高度偏下*/
            line-height: 40px;
        }
        /*经过连接改变颜色*/
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <a href="#">手机、电视</a>
    <a href="#">电视、盒子</a>
    <a href="#">笔记本、平板</a>
    <a href="#">出行、穿戴</a>
    <a href="#">智能、路由器</a>
    <a href="#">健康、儿童</a>
    <a href="#">耳机、音响</a>
</body>
</html>

效果：
在这里插入图片描述

9.5 单行文字垂直居中的代码

解决方案:

让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中
在这里插入图片描述

简单理解:

行高的上空隙和下空隙把文字挤到中间了，

如果行高小于盒子高度,文字会偏上，

如果行高大于盒子高度,则文字偏下。

10 css的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置和背景图像固定等。

10.1 背景颜色

样式名称：

background-color：定义元素的背景颜色

使用方式：

其他说明：

元素背景颜色默认值是 transparent（透明）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      /*background-color: transparent; 该选项为默认的*/
      /*background-color: red;*/

    }
  </style>
</head>
<body>
    <div>加油呀！！！！！！！</div>
</body>
</html>

效果：
在这里插入图片描述

10.2 背景图片

样式名称：

background-image：定义元素的背景图片

使用方式：

在这里插入图片描述

在这里插入图片描述
其他说明：

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

注意：背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要加引号。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <style>
        div {
            width: 600px;
            height: 800px;
            /*不要落下url*/
            background-image: url(背景图片王者荣耀/img.png);

            /*背景平铺(有空就铺)*/
            /*1.背景图片不平铺：*/
            /*background-repeat: no-repeat;*/
            /* 2.默认情况下背景图片是平铺的： */
            /*background-repeat: repeat;*/
            /*3.沿着x轴平铺*/
            /*background-repeat: repeat-x;*/
            /*4.沿着y轴平铺*/
            background-repeat: repeat-y;
        }

        /*通过 CSS 背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。*/
        /*1、背景颜色*/
        /*    样式名称：*/
        /* 	        background-color 定义元素的背景颜色*/
        /*    使用方式：*/
        /*    其他说明：*/
        /*          元素背景颜色默认值是 transparent（透明）*/
        /*2、背景图片*/
        /*     样式名称：*/
        /* 	         background-image 定义元素的背景图片*/
        /*      使用方式：*/
        /*      其他说明：*/
        /* 	        实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置.
                    (精灵图也是一种运用场景)*/
        /*	 注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号*/
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果：
在这里插入图片描述

10.3 背景平铺

样式名称：

background-repeat 设置元素背景图像的平铺

使用方式：

在这里插入图片描述

10.4 背景图片位置

样式名称：

background-position 属性可以改变图片在背景中的位置

使用方式：

在这里插入图片描述
参数代表的意思是：x 坐标和 y 坐标。可以使用 方位名词 或者 精确单位。

其他说明：

1、参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3、参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片位置</title>
  <style>
    div {
      width: 600px;
      height: 800px;
      background-color: pink;
      background-image: url(背景图片王者荣耀/img.png);
      background-repeat: no-repeat;
      /*background-position: 方位名词或坐标*/
      /*background-position: center top;*/
      background-position: right center;

      /*4、背景图片位置*/
      /*   样式名称：*/
      /*       background-position 属性可以改变图片在背景中的位置*/
      /*   使用方式：*/
      /*       参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位*/
      /*   其他说明：*/
      /*       1、参数是方位名词*/
      /*          如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致*/
      /*          如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐*/
      /*       2、参数是精确单位*/
      /*          如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标*/
      /*          如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中*/
      /*       3、参数是混合单位*/
      /*          如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标*/
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

王者农药案例：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>农药案例</title>
    <style>
        h3 {
            color: #464646;
            width: 118px;
            height: 40px;
            font: 14px "Microsoft YaHei UI";
            font-weight: 400;
            line-height: 40px;
            background-image: url(背景图片王者荣耀/健康.png);
            /*背景+缩进*/
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 2em;
        }
    </style>
</head>
<body>
<h3>成长守护平台</h3>
</body>
</html>

效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方位名词应用</title>
    <style>
        body {
            background-image: url(背景图片王者荣耀/王者荣耀.png);
            background-repeat: no-repeat;
            background-position: center top;

        }
    </style>
</head>
<body>

</body>
</html>

效果：
在这里插入图片描述
精确位置案例：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精确单位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(背景图片王者荣耀/img.png);
            background-repeat: no-repeat;
            /*x轴是20， y轴是50*/
            background-position: 20px 50px;
            如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left  top 和 top  left 效果一致

            /*	如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐*/
            /*2、参数是精确单位*/
            /*		    如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标*/
           	/*	        如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中*/
            /*3、参数是混合单位*/
            /*		如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标*/
           /*实际中王者荣耀的网页的上空白条*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：
在这里插入图片描述

10.5 背景图片固定

样式名称：

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

使用方式：

在这里插入图片描述

其他说明：

background-attachment 后期可以制作视差滚动的效果。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景固定</title>
    <style>
        body {
            background-image: url(背景图片王者荣耀/img.png);
            background-repeat: no-repeat;
            background-position: center top;

            /*把背景图片滚动的*/
            /*background-attachment: scroll;*/
            /*把背景图片固定*/
            background-attachment: fixed;

            /*5、背景图片固定*/
            /*  **样式名称：***/
            /*  		background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。*/
            /*  **使用方式：***/
            /***其他说明：***/
            /*		background-attachment 后期可以制作视差滚动的效果。*/

            color: #e31a1a;
            font-size: 20px;

        }
    </style>
</head>
<body>
<p>天王盖地虎，pink老师一米五</p>
<p>天王盖地虎，pink老师一米五</p>
<p>天王盖地虎，pink老师一米五</p>
<p>天王盖地虎，pink老师一米五</p>
<p>天王盖地虎，pink老师一米五</p>
<p>天王盖地虎，pink老师一米五</p>
<p>天王盖地虎，pink老师一米五</p>
<p>天王盖地虎，pink老师一米五</p>
<p>天王盖地虎，pink老师一米五</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
</body>
</html>

10.6 背景样式合写（提倡使用）

背景合写样式：

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

使用方式：

<style>
    body {
      /*background-image: url(背景图片王者荣耀/img.png);*/
      /*background-repeat: no-repeat;*/
      /*background-position: center top;*/
      /*background-attachment: fixed;*/
      background: black url(背景图片王者荣耀/img.png) no-repeat fixed;
    }
  </style>

10.7 背景色半透明

CSS3 提供了背景颜色半透明的效果。
例如：
在这里插入图片描述
使用方式：

最后一个参数是 alpha 透明度，取值范围在 0~1之间；
前面的三个数决定的是颜色；
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3)。

注意：

背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

10.8 背景总结

在这里插入图片描述

10.8 五彩导航栏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合案例</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 49px;
            color: #ffffff;
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(五彩案例图片/bg1.png) no-repeat;
        }
        .nav .bg2 {
            background: url(五彩案例图片/bg2.png) no-repeat;
        }
        .nav .bg3 {
            background: url(五彩案例图片/bg3.png) no-repeat;
        }
        .nav .bg4 {
            background: url(五彩案例图片/bg4.png) no-repeat;
        }
        .nav .bg5 {
            background: url(五彩案例图片/bg5.png) no-repeat;
        }
        .nav .bg1:hover {
            background-image: url("五彩案例图片/bg11.png");
        }
        .nav .bg2:hover {
            background-image: url("五彩案例图片/bg11.png");
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="#" class="bg1">五彩导航</a>
    <a href="#" class="bg2">五彩导航</a>
    <a href="#" class="bg3">五彩导航</a>
    <a href="#" class="bg4">五彩导航</a>
    <a href="#" class="bg5">五彩导航</a>
</div>
</body>
</html>

效果：
在这里插入图片描述

放在上面会变色。

css第三天

11 css三大特性（层叠性、继承性和优先级）

11.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则:

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式；
样式不冲突，不会层叠。

11.1

11.2 继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。
恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

11.2
子元素可以继承父元素的样式：

（text-，font-，line-这些元素开头的可以继承，以及color属性）

继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

行高的继承性：

 body {
   font:12px/1.5 Microsoft YaHei；
 }
 font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为 1.5
此时子元素的行高是：当前子元素的文字大小 * 1.5
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行高的继承</title>
    <style>
        body {
            color: purple;
            /*font: 12px/24px 'Microsoft YaHei UI';*/
            font: 12px/1.5 'Microsoft YaHei UI';
        }
        div {
            /*子元素继承了父元素body 的行高1.5*/
            /*这个1.5 就是当前元素文字大小font-size 的1.5倍， 所以当前div 的行高就是21px*/
            font-size:14px;
            /*font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";*/
        }
        p {
            /*1.5 * 16 = 24 当前的行高*/
            font-size: 16px;
        }
        /*li 没有手动指定文字大小， 则会继承父亲的文字大小的 body 12px 所有的 li 的文字大小 12px
        当前的行高为文字大小 * 1.5 ==== 12 * 1.5 = 18
        */
    </style>
</head>
<body>
    <div>2018年的回忆</div>
    <p>美好的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>
</html>

效果：
在这里插入图片描述

11.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器优先级计算表格：

11.3
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的优先级</title>
  <style>
    div {
      /*元素选择器*/
      color: deeppink;
    }
    .test {
      /*类选择器*/
      color: orange!important;
      /*会优先执行！important*/
    }
    #demo {
      /*ID选择器*/
      color: green;
    }
  </style>
</head>
<body>
    <div class="test" id="demo" style="color: orange">你笑起来真好看</div>
</body>
</html>

优先级注意点:

权重是有4组数字组成,但是不会有进位；
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…；
等级判断从左向右，如果某一位数值相同，则判断下一位数值；
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大；
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。
优先级注意点代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS优先级注意点</title>
  <style>
    #father {
      color: red;
    }
    /*p 标签继承的权重为0*/
    p {
      color: orange;
    }
    body {
      color: green;
    }
    /*a 链接标签浏览器默认制定一个样式 蓝色的 有下划线的 a{color: blue}*/
    /*要修改：*/
    a {
      color: gray;
    }
  </style>
</head>
<body>
    <div id="father">
      <p>你还是很好看</p>
    </div>
    <a href="#">加油写！！！</a>
</body>
</html>

效果：

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权重的叠加</title>
  <style>
    /*复合选择器会有权重叠加的问题  权重不会进位*/
    /*ul li 权重 0,0,0,1 + 0, 0, 0, 1 = 0, 0, 0, 2*/
    li {
      /*li 的权重为0, 0, 0, 1*/
      color: red;
    }
    ul li {
      color: orange;
    }
    .navi li {
      /*.navi li 权重  0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
      color: #ff6700;
    }
  </style>
</head>
<body>
<ul calss="navi">
  <li>南大</li>
  <li>东南</li>
  <li>浙大</li>
</ul>
</body>
</html>

效果：

权重叠加练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权重练习</title>
  <style>
    .navi li {
    /*.navi li 权重为11*/
      color: red;
    }
    /*.pink 权重为10  .navi .pink 权重为20*/
    .navi .pink {
      color: pink;
      font-weight: 700;
    }
  </style>
</head>
<body>
<ul class="navi">
  <li class="pink">加油</li>
  <li>南大</li>
  <li>东南</li>
  <li>浙大</li>
</ul>
</body>
</html>

效果：
在这里插入图片描述

12 盒子模型

12.1 网页布局的本质

页面布局的三大核心：盒子模型，浮动和定位。
网页布局的核心本质：就是利用 CSS 摆盒子。
12.1
网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子 Box 。
利用 CSS 设置好盒子样式，然后摆放到相应位置。
往盒子里面装内容

12.2 盒子模型（Box Model）组成

盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

12.2

12.3 边框（border）

12.3.1 边框的使用

1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式边框颜色；

2、语法：

 border : border-width || border-style || border-color;

12.3.1
边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

3、边框的合写分写

边框简写：

 border: 1px solid red;

边框分开写法：

 border-top: 1px solid red;  /* 只设定上边框， 其余同理 */

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      /*1、border-width 边框的的粗细  一般情况下使用 px*/
      /*border-width: 5px;*/

      /*2、border-style   边框的样式  solid 实线边框; dashed 虚线边框; dotted 点线边框 */
      /*border-style: solid;*/
      /*border-style: dashed;*/
      /*border-style: dotted;*/

      /*3、边框的简写方式*/
      border: 1px solid red;

      /*4、边框分开写法*/
      border-top: 1px solid orange;
      /*合理使用层叠性：先写大的后写小的*/
      
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>

12.3.2 表格的细线边框

1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

2、语法：

 border-collapse:collapse;

collapse 单词是合并的意思

border-collapse: collapse; 表示相邻边框合并在一起
小说排行案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格模型</title>
  <style>
    table {
      width: 500px;
      height: 249px;
    }
    table,
    th,
    td {
      border: 1px solid orange;
      border-collapse: collapse;
    }
  </style>
</head>
<body>
<table align="center" border="2" cellpadding="4" >
  <thead>
  <tr>
    <th>排行</th>
    <th>关键词</th>
    <th>趋势</th>
    <th>今日搜索</th>
    <th>最近几日</th>
    <th>相关链接</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>鬼吹灯</td>
    <td><img src="小说排行榜图片/down.jpg"/></td>
    <td>345</td>
    <td>2131</td>
    <td><a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com">贴吧</a> <a
            href="https://image.baidu.com/">图片</a> <a href="https://baike.baidu.com/">百科</a></td>
  </tr>

  <tr>
    <td>2</td>
    <td>盗墓笔记</td>
    <td><img src="小说排行榜图片/down.jpg"/></td>
    <td>124</td>
    <td>312311</td>
    <td><a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com">贴吧</a> <a
            href="https://image.baidu.com/">图片</a> <a href="https://baike.baidu.com/">百科</a></td>
  </tr>
  <tr>
    <td>3</td>
    <td>西游记</td>
    <td><img src="小说排行榜图片/up.jpg"/></td>
    <td>93179</td>
    <td>1231</td>
    <td><a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com">贴吧</a> <a
            href="https://image.baidu.com/">图片</a> <a href="https://baike.baidu.com/">百科</a></td>
  </tr>
  <tr>
    <td>4</td>
    <td>东游记</td>
    <td><img src="小说排行榜图片/up.jpg"/></td>
    <td>412</td>
    <td>3453</td>
    <td><a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com">贴吧</a> <a
            href="https://image.baidu.com/">图片</a> <a href="https://baike.baidu.com/">百科</a></td>
  </tr>
  <tr>
    <td>5</td>
    <td>甄嬛传</td>
    <td><img src="小说排行榜图片/down.jpg"/></td>
    <td>2342</td>
    <td>3453</td>
    <td><a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com">贴吧</a> <a
            href="https://image.baidu.com/">图片</a> <a href="https://baike.baidu.com/">百科</a></td>
  </tr>
  <tr>
    <td>6</td>
    <td>水浒传</td>
    <td><img src="小说排行榜图片/up.jpg"/></td>
    <td>234</td>
    <td>53</td>
    <td><a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com">贴吧</a> <a
            href="https://image.baidu.com/">图片</a> <a href="https://baike.baidu.com/">百科</a></td>
  </tr>
  <tr>
    <td>7</td>
    <td>三国演义</td>
    <td><img src="小说排行榜图片/up.jpg"/></td>
    <td>1</td>
    <td>5345</td>
    <td><a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com">贴吧</a> <a
            href="https://image.baidu.com/">图片</a> <a href="https://baike.baidu.com/">百科</a></td>
  </tr>
  </tbody>
</table>
</body>
</html>

效果：

12.3.3 边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

测量盒子大小的时候,不量边框。
如果测量的时候包含了边框,则需要 width/height 减去边框宽度

12.4 内边距（padding）

12.4.1 内边距的使用方式

1、padding 属性用于设置内边距，即边框与内容之间的距离。

2、语法：

合写属性：
12.4.1
分写属性：

12.4.2
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding复合属性</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      /*padding-left: 1px;*/
      /*padding-top: 2px;*/
      /*padding-right: 3px;*/
      /*padding-bottom: 4px;*/
      /*内边距复合写法（简写）*/
      padding: 2px 3px 4px 1px;

    }

  </style>
</head>
<body>
<div>加油呀！！！</div>
</body>
</html>

效果：
在这里插入图片描述

12.4.2 内边距会影响盒子实际大小

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

12.4.3 新浪导航栏案例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪微博案例</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            /*a 属于行内元素 此时必须要转换 行内块元素*/
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .nav a:hover {
            background-color: #eee;
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="#">新浪导航</a>
    <a href="#">手机新浪网</a>
    <a href="#">手机客户端</a>
    <a href="#">微博</a>
    <a href="#">三个字</a>

</div>
</body>
</html>

效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不会撑开盒子</title>
    <style>
        h1 {
            /*width: 100%;*/
            /*如果没有 width 或 height 值， 就不会撑大盒子*/
            height: 200px;
            background-color: pink;
            padding: 30px;
        }
        div {
            width: 300px;
            height: 100px;
            background-color: purple;
        }
        div p {
            padding: 30px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<h1></h1>
<div>
    <p></p>
</div>
</body>
</html>

效果：

12.5 外边距（margin）

12.5.1 外边距的使用方式

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

12.5.1
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: orange;
    }
    .one {
      /*margin-bottom: 20px;*/
      margin: 30px;
      /*可以后面加四个参数, 和padding 一样*/
      
    }
  </style>
</head>
<body>
<div class="one">1</div>
<div>2</div>
</body>
</html>

效果：
在这里插入图片描述

12.5.2 外边距典型应用

外边距可以让块级盒子水平居中的两个条件：

盒子必须指定了宽度（width）。
盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
  <style>
    .header {
      width: 900px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      text-align: center;
    }
    /*注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。*/
  </style>
</head>
<body>
<div class="header">
  <sapn>加油呀！！！</sapn>
</div>
<div class="header">
  <img src="www" alt="提示">
</div>
</body>
</html>

效果：
在这里插入图片描述

12.5.3 外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

1、相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

12.5.3

解决方案：
尽量只给一个盒子添加 margin 值。

2、嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

12.5.3

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加 overflow:hidden（常见）。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套块元素塌陷</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /*三种解决方案： 1、为父级元素定义上边框；2、 为父级元素定义上内边框； 3、可以为父级元素添加： overflow: hidden;*/
            border: 1px solid transparent;
            padding: 1px;
            overflow: hidden;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son">222</div>
</div>

</body>
</html>

效果：

12.5.4 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

 * {
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
  }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除内外边距</title>
  <style>
    /*这是一个神奇的代码*/
    * {
      margin: 0;
      padding: 0;
    }
    span {
      background-color: pink;
      margin: 20px;
    }
  </style>
</head>
<body>
123
<ul>
  <li>abcd</li>
</ul>

</body>
</html>

效果：
在这里插入图片描述
修改后：

13 PS 基本操作

因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS 里面完成。

部分操作：

文件→打开：可以打开我们要测量的图片
Ctrl+R：可以打开标尺，或者视图→标尺
右击标尺，把里面的单位改为像素
Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
按住空格键，鼠标可以变成小手，拖动 PS 视图
用选区拖动可以测量大小
Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

小米商城案例：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }
        a {
            color: #333;
            text-decoration: none;
        }
        .box {
            width: 248px;
            height: 470px;
            background-color: #fff;
            margin: 100px auto;
            /*overflow: hidden;*/
        }
        .box img {
            width: 100%;
            /*上面的是宽度和父亲一样宽*/
        }
        .review {
            height: 60px;
            font-size: 14px;
            /*因为这个段落没有width属性，所以padding不会撑开盒子的宽度*/
            padding: 0 28px;
            margin-top: 30px;
        }
        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            padding: 0 28px;
            margin-top: 20px;
        }
        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 8px;
        }
        .info h4 {
            display: inline-block;
            font-weight: 400;
        }
        .info span {
            color: orange;
        }
        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="https://www.mi.com/mi11Pro"><img alt="Remi小米小爱触屏音响" src="产品模型案例图片/手机.webp"></a>
    <p class="review"><a href="https://www.mi.com/mi11Pro">小米手机一亿像素照亮你的美</a></p>
    <div class="appraise"><a href="https://www.mi.com/mi11Pro">来自于 1992939 的评价</a></div>
    <div class="info">
        <h4><a href="https://www.mi.com/mi11Pro">Redmi AirDots真无线...</a></h4>
        <em>|</em>
        <span>99.9元</span>
    </div>
</div>
</body>
</html>

效果：
在这里插入图片描述
快报案例：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快报案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        li {
            list-style: none;
            /*去掉小圆点*/
        }

        .box {
            width: 248px;
            height: 183px;
            background-color: #fff;
            margin: 100px auto;
            border: 1px solid #ccc;
        }

        .box h3 {
            width: 100%;
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding: 15px;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        .box li {
            line-height: 23px;
            height: 23px;
            padding-left: 18px;
        }
        .box ul li a:hover {
            text-decoration: underline;
        }

    </style>
</head>
<body>
<div class="box">
    <h3>头条</h3>
    <ul>
        <li><a href="#">100周年</a></li>
        <li><a href="#">又起</a></li>
        <li><a href="#">大漠叔叔百大up</a></li>
        <li><a href="#">空间站揭秘</a></li>
        <li><a href="#">开始</a></li>
    </ul>
</div>
</body>
</html>

好饿呀~～～

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css知识点1

css第一天总结css简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。CSS 最大价值: 由 HTML 专
复制链接

扫一扫