重拾前端 —— CSS篇(pink老师)

2024-03-06 01:40:01 分类：前端 热度：115 评论： 0

—————————————————— 2024.2.27 已更新 ————————————————

01 css简介

CSS的主要使用场景就是美化网页，布局页面的.

        1.HTML的局限性

                说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片，<a>表示此处有链接。

                很早的时候，世界上的网站虽然很多，但是她们都有一个共同的特点：丑

                虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐......

        2.CSS——网页的美容师

                css时层叠样式表(Cascading Style Sheets)的简称。

                有时我们也会称之为CSS样式表 或 级联样式表

                CSS也是一种标记语言

                主要用于设置

02 CSS语法规范

使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

  1. 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
  2. 属性和属性值以“键值对”的形式出现
  3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  4. 属性和属性值之间用英文 “:” 分开
  5. 多个“键值对”之间用英文 “;” 进行区分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式 { 改什么样式 } */
        p{
            color: red;
            /* 修改了文字大小为12像素 */
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

03 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;    
    }

04 基础选择器

04.1 CSS选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。  简单来说，就是选择标签用的。

 ：

        找到所有的 h1 标签。

        选择器（选对人） 设置这些标签的样式，比如颜色为红色（做对事）。

04.2 标签选择器

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

语法：

标签名{
    属性1: 属性值1;
    属性2: 属性值2;
    ···
}

作用：可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。

优点：能快速为页面中同类型的标签统一设置样式

缺点：不能设计差异化样式，只能选择全部的当前标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>

</body>
</html>

04.3 类选择器

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

语法：

.类名{
    属性1: 属性值1;
    ···
}

结构需要用class属性来调用 class 类的意思   <div class="类名"> 变红色 </div>

  1. 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
  2. 类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
  3. 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
  4. 可以理解为给这个标签起了一个名字，来表示。
  5. 长名称或词组可以使用中横线来为选择器命名。
  6. 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
  7. 命名要有意义，尽量使别人一眼就知道这个类名的目的。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>基础选择器之类选择器</title>
    <style>
        /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
      .red {
          color: red;
      }
      .star-sing {
        color: green;
      }
      .memeda {  
         color: pink;
      }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li>李香兰</li>
        <li class="memeda">生僻字</li>
        <li class="star-sing">江南style</li>
    </ul>
    <div class="red">我也想变红色</div>
</body>
</html>

04.4 课堂案例 --- 使用类选择器画盒子

通过div标签以及类选择器的使用画盒子 (div就是一个盒子，用来装网页内容的)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .blue{
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
</body>
</html>

04.5 类选择器特殊使用 —— 多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签.
简单理解就是一个标签有多个名字.

多类名的具体使用：

        1. <div class="red font20">亚瑟</div>

        注意：

                1.在标签class 属性中写 多个类名

                2.多个类名中间必须用空格分开

                3.这个标签就可以分别具有这些类名的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .font35{
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>
</html>

上述案例修改：将相同的样式放在同样的类里，便于修改，减少代码量

<style>
        .box{
            width: 150px;
            height: 100px;
        }
        .red{
            /* 背景颜色 */
            background-color: red;
        }
        .blue{
            /* 背景颜色 */
            background-color: blue;
        }
</style>

<body>
    <div class="red box"></div>
    <div class="blue box"></div>
    <div class="red box"></div>
</body>

04.6 id选择器

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

#id名 {
        属性1: 属性值1;  
        ...
    } 

注意：id 属性只能在每个 HTML 文档中出现一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #pink{
        color: pink;
    }
</style>
<body>
    <div id="pink">迈克尔·杰克逊</div>
</body>
</html>

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

       1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

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

04.7 通配符选择器

在CSS中，通配符选择器使用 " * " 定义，它表示选取页面中所有元素(标签)。

语法：

        

*{
    属性1:属性值1;
    ···
}
  • 通配符选择器不需要调用，自动给所有的元素使用样式
  • 特殊情况才用，后续说明
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color:red;
        }
        /* 这里把 html body div span li 等标签都改为红色  */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

04.8 基础选择器总结

  • 每个基础选择器都有使用场景，都需要掌握
  • 如果是样式修改，类选择器是使用最多的

05 CSS字体属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、文字样式 (如斜体)。

05.1 font-family设置字体系列

CSS使用 font-family 属性定义文本的字体系列。

  • 各个字体之间必须使用英文状态下的逗号隔开
  • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
  • 最常见的字体：body{ font-family: 'Microsoft Yahei', tahoma, arial, 'Hiragino Sans GB'; }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            font-family: '微软雅黑';
        }
        p {
            font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈，</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

05.2 font-size字体大小

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

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

05.3 font-weight 字体粗细

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

p{
    font-weight: 700; 
    /* font-weight: bold; */
}
  • 学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
  • 实际开发时，我们更喜欢用数字表示粗细

05.4 font-style 字体样式

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

p{
    font-style:normal;
}
  • 注: 平时我们很少给文字加斜体,反而要给斜体标签(em, i)改为不倾斜字体

05.5 font 复合属性写法

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

body { 
    /* font: font-style font-weight font-size/line-height font-family; */
    font: italic 700 16px 'Microsoft Yahei';
}
  • 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
  • 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

05.6 字体属性总结

06 CSS文本属性

06.1 文本颜色 color

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

语法:  

div{
    color: red;
}

        开发中最常用的是十六进制

06.2 文本对齐 text-align

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

 语法:  

div{
    text-align: center;
}

06.3 文本装饰 text-decoration

text-decoration 属性规定添加到文本的装饰.可以给文本添加下划线、删除线、上划线。

  语法:  

div{
     text-decoration：underline；
}

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

06.4 文本缩进 text-indent

text-indent 属性是用来制动文本的第一行的缩进,通常是将段落的首航缩进。

  语法:  

div { 
        text-indent：20px；
}
div { 
        text-indent：2em；
}

通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

06.5 行间距 line-height

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

语法:        

p { 
        line-height: 26px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            line-height: 26px;
        }
        p{
            /* 文本的第一行首行缩进 多少距离 */
            text-indent: 20px;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
    
    <p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>

    <p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

06.6 文本属性总结

属性 表示 注意点
color 文本颜色 我们通常用 十六进制 比如 #fff 而且是简写形式
text-align 文本对齐 可以设定文字水平的对齐方式
text-indent 文本缩进

通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 记住 添加下划线 underline 取消下划线 none
line-height 行高 控制行与行之间的距离

07 CSS引入方式

07.1 内部样式表

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

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

07.2 行内样式表

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

语法:

 <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
  • style 其实就是标签的属性  在双引号中间，写法要符合 CSS 规范
  • 可以控制当前的标签设置样式
  • 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
  • 使用行内样式表设定 CSS，通常也被称为行内式引入

07.3 外部样式表

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.

引入外部样式表分为两步：

  1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
  2. 在 HTML 页面中，使用<link> 标签引入这个文件。

语法： 

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

07.4 引入方式总结

07.4 综合案例 --- 新闻页面

素材:

北方高温明日达鼎盛 京津冀多地地表温度将超60℃
2019-07-03 16:31:47 来源: 中国天气网　  
请输入查询条件
 
中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。

气温41.4℃！地温66.5！北京强势迎七月首个高温日
今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。

在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。

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

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

本文来源：中国天气网 责任编辑：刘京_NO5631

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font: 16px/28px 'Microsoft Yahei';
        }
        h1{
            font-weight: 400;
            text-align: center;
        }
        .gray{
            color: #888888;
            font-size: 12px;
            text-align: center;
        }
        a{
            text-decoration: none;
            color: rgb(66, 32, 129);
        }
        .search{
            color: #666;
            width: 170px;
        }
        .btn{
            font-weight: 700;
        }
        p{
            text-indent: 2em;
        }
        .pic{
            text-align: center;
        }
        .footer{
            color: #888888;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>

    <div class="gray">2019-07-03 16:31:47 来源: <a href="#">中国天气网</a> <input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button> </div>
    <hr>

    <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>

    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>

    <p class="pic"> <img src="./images/pic.jpeg" alt=""> </p>

    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>

    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>

    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>

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

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

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

08 Chrome调试工具

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

09 Emmet 语法

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

  1. 快速生成HTML结构语法
    1. 生成标签 直接输入标签名 按tab键即可  比如 div+tab → <div></div>
    2. 如果想要生成多个相同的标签，加上 * 即可  比如 div*3
    3. 如果又父子级关系的标签  用 > 即可 比如 ul>li 
    4. 如果有兄弟关系的标签  用 + 即可 比如 div+p
    5. 如果生成带有类名或者id名字的 直接写 .demo 或者 #two + tab
    6. 如果生成的 div 类名是有顺序的，可以用 自增符号  $  比如 .demo $*5
    7. 如果想要在生成的标签内部写内容 可以用 标签+{ 文字 } 表示
  2. 快速生成CSS样式语法 —— 基本采取简写形式
    1. 比如 w200 + tab → width: 200px;
    2. 比如 lh26 + tab → line-height: 26px;

10 Vscode 自动格式化代码

设置 → 文本编辑器 → 格式化 → Format On Save

11 CSS 复合选择器

11.1 什么是复合选择器

在CSS中，可以根据选择器的类型把选择器分为 基础选择器 和 复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素（标签）
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

11.2 后代选择器(重要)

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

语法：（ 选择元素1里面的元素2，后代元素 ）

元素1 元素2 { 样式声明 }
  • 元素1 和 元素2 中间用 空格隔开
  • 元素1 是父级，元素2是子级，最终选择的是 元素2
  • 元素2 可以是儿子， 也可以是孙子等，只要是元素1的后代即可
  • 元素1 和 元素2 可以是任意的基础选择器
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 我想把ol里面的小li选出来改为pink */
    ol li {
        color: pink;
    }

    ol li a {
        color: red;
    }

    .nav li a {
        color: yellow;
    }
</style>

<body>
    <ol>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li> <a href="">我是孙子</a> </li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li> <a href="">不会变化的</a> </li>
    </ul>
    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li> <a href="">不会变化的</a> </li>
        <li> <a href="">不会变化的</a> </li>
        <li> <a href="">不会变化的</a> </li>
    </ul>
</body>

</html>

11.3 子元素选择器

子元素选择器（子选择器） 只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

语法：（选择元素1里面的所有直接后代 (子元素) 元素2）

元素1 > 元素2 { 样式声明 }
  • 元素1 和 元素2 中间用 大于号 隔开
  • 元素1 是父级， 元素2 是子级， 最终选择的是 元素2
  • 元素2 必须是 亲儿子， 其孙子、重孙之类都不归他管 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

11.4 练习

1. 请将下面的 链接文字 修改为红色

<div class="nav">
        <ul>
            <li> <a href="">百度</a> </li>
            <li> <a href="">百度</a> </li>
        </ul>
</div>

2.请将下面的 大肘子 文字修改为红色

<div class="hot">
        <a href="#">大肘子</a>
        <ul>
            <li><a href="#">猪头</a></li>
            <li><a href="#">猪尾巴</a></li>
        </ul>
</div>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav ul li a {
            color: red;
        }

        .hot>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li> <a href="">百度</a> </li>
            <li> <a href="">百度</a> </li>
        </ul>
    </div>

    <div class="hot">
        <a href="#">大肘子</a>
        <ul>
            <li><a href="#">猪头</a></li>
            <li><a href="#">猪尾巴</a></li>
        </ul>
    </div>
</body>

</html>

11.5 并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器 是各选择器通过英文逗号（ , ）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：（选择元素1 和 元素2）

元素1,元素2 { 样式声明 }
  • 元素1 和 元素2 中间用 逗号隔开
  • 逗号可以理解为 和 的意思
  • 并集选择器通常用于集体声明
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>

11.6 链接伪类选择器

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

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

伪类选择器有很多种，比如 链接伪类、结构伪类等，这里先介绍常用的链接伪类选择器

a:link      /* 选择所有未被访问的链接 */
a:visited     /* 选择所有已被访问的链接 */
a:hover      /* 选择鼠标指针位于其上的链接 */
a:active     /* 选择活动链接 （鼠标按下为弹起的链接）*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问过的链接 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 选择访问过的链接 */
        a:visited {
            color: orange;
        }

        /* 选择鼠标经过的那个标签 */
        a:hover {
            color: skyblue;
        }

        /* 选择鼠标正在按下但还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">小猪佩奇</a>
</body>
</html>
  1. 链接伪类选择器注意事项：
    1. 为了确保生效，请按照 LVHA 的顺序声明 :link  :visted  :hover  :active
    2. 记忆法：love hate 或者 lv 包包 hao
    3. 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
  2. 链接伪类选择器实际工作开发中的写法： 
    /* a是标签选择器  所有的链接 */
a{
    color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover{
    color: red;  /* 鼠标经过的时候，由原来的 灰色 变成了 红色 */
}

11.7 focus 伪类选择器

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

焦点就是光标，一般情况 <input>类表单元素才能获取，因此这个选择器也主要对于表单元素来说。

input:focus{
    background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把获得光标的 input 表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

11.8 复合选择器总结

选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格  .nav a
子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于  .nav>p
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号  .nav,.header
链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住 a{} 和 a:hover  实际开发的写法
:focus选择器 选择获得光标的表单 跟表单相关 较少 input:focus 

12 CSS 的元素显示模式

了解元素的显示模式可以更好的让我们页面布局。

  1. 什么是元素的显示模式
  2. 元素显示模式的分类
  3. 元素显示模式的转换

12.1 什么是元素显示模式

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

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

HTML 元素一般分为  块元素  和  行内元素  两种类型

12.2 块元素 &  行内元素

块元素

常见的块元素有 <h1> ~ <h6> 、 <p> 、 <div> 、 <ul> 、 <ol> 、 <li>等，其中 <div> 标签 是最典型的块元素。

特点：

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

注意：

  1. 文字类的元素内不能使用块级元素
  2. <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放 <div>
  3. 同理， <h1> ~ <h6> 等都是文字类块级标签，里面也不能放其他块级元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* width: 200px; */
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>比较霸道，自己独占一行</div> 瑟瑟发抖
    <p>
    <div>比较霸道，自己独占一行</div>
    </p>
</body>
</html>

行内元素

常见的块元素有 <a> 、 <strong> 、 <b> 、 <em> 、 <i> 、 <del>、 <s>、 <ins>、 <u>、 <span>等，其中 <span> 标签 是最典型的行内元素。有的地方也将行内元素称为 内联元素。

特点：

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

注意：

  1. 链接里面不能再放链接
  2. 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全  
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            /* width & height 无效 */
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <span>pink老师你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong>
    <span>pink老师</span> <strong>品如的衣服</strong>
</body>
</html>

行内块元素

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，他们同时 具有块元素和行内元素 的特点。有些资料称他们为行内块元素。

行内块元素特点：

  1. 和相邻行内元素在一行上，但是它们之间会有空白缝隙，一行可以显示多个
  2. 默认宽度就是它本身内容的宽度
  3. 高度、行高、外边距以及内边距都可以控制

 元素显示模式总结

12.3 元素显示模式的转换

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

转换方式

  • 转换为块元素：display:block;

  • 转换为行内元素：display:inline;

  • 转换为行内块：display: inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">123</a>
    <a href="#">123</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>
</html>

工具使用： snipaste

Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上。

常用快捷方式：

        1.F1 -- 截图；同时测量大小，设置箭头，书写文字等

        2.F3 -- 在桌面置顶显示

        3.点击图片，alt可以取色（按shift 可以切换取色模式）

        4.Esc -- 取消图片显示

下载地址：Snipaste - 截图 + 贴图

12.4 案例  --  简洁版小米侧边栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 230px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #fff;
            background-color: #55585a;
            text-indent: 2em;
            text-decoration: none;
            display: block;
        }

        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>

单行文字垂直居中

CSS没有给我们提供文字垂直居中的代码

解决方案：

        让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

                                

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

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

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

13 CSS 的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

13.1 背景颜色

样式名称：

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

使用方式：         

其他说明：

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

13.2 背景图片

样式名称：

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

使用方式：               

其他说明：

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

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

13.3 背景平铺

样式名称：

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

使用方式：        

注意：页面元素既可以添加背景颜色，也可以添加背景图片；只不过背景图片会压住背景颜色

13.4 背景图片位置

样式名称：

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

使用方式：

​

  background-position：x  y；

​ 参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

其他说明：

1、参数是方位名词

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

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

2、参数是精确单位

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

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

3、参数是混合单位

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

13.5 背景固定

样式名称：

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

使用方式：        

其他说明：

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

13.6 背景属性复合写法

背景合写样式：

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

使用方式： 

body{ background: black url(***) no-repeat fixed center top; }

13.7 背景颜色半透明

CSS3为我们提供了背景颜色半透明的效果。

使用方式：

background: rgba(0, 0, 0, 0.3);

  • 最后一个参数是 alpha 透明度，取值范围在 0~1之间

  • 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);

注意：

  • 背景半透明是指盒子背景半透明，盒子里面的内容不受影响

  • CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* background-color: black; */
            background: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

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

</html>

13.8 背景总结

13.9 综合案例 --- 五彩导航栏

1.链接属于行内元素，但是此时需要宽度高度，因此需要模式转换

2.里面文字需要水平居中和垂直居中 

3.链接里面需要设置背景颜色

4.鼠标经过变化背景图片

素材：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav a {
            width: 120px;
            height: 58px;
            line-height: 50px;
            display: inline-block;
            color: #fff;
            background-color: pink;
            text-align: center;
            text-decoration: none;
        }

        .nav .bg1 {
            background-image: url(images/bg1.png);
        }

        .nav .bg1:hover {
            background-image: url(images/bg11.png);
        }

        .nav .bg2 {
            background-image: url(images/bg2.png);
        }

        .nav .bg2:hover {
            background-image: url(images/bg22.png);
        }

        .nav .bg3 {
            background-image: url(images/bg11.png);
        }

        .nav .bg3:hover {
            background-image: url(images/bg5.png);
        }

        .nav .bg4 {
            background-image: url(images/bg4.png);
        }

        .nav .bg4:hover {
            background-image: url(images/bg2.png);
        }

        .nav .bg5 {
            background-image: url(images/bg5.png);
        }

        .nav .bg5:hover {
            background-image: url(images/bg1.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>

14 CSS 的三大特性

CSS有三个非常重要特性：层叠性、继承性、优先级。

 14.1 层叠性

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

​ 层叠性原则:

  • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

  • 样式不冲突，不会层叠

14.2 继承性

        CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。

  • 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
  • 子元素可以继承父元素的样式：text-，font-，line- 开头的，以及color属性

14.2.1 行高的继承

body{
    font: 12px/1.5 'Microsoft Yahei';
}
  • 行高可以跟单位也可以不跟单位
  • 子元素没有设置行高，则会继承父元素的行高
  • 此时子元素行高为：当前子元素文字大小 * 1.5
  • body 行高1.5  这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

14.3 优先级

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

  • 选择器相同，则执行层叠性

  • 选择器不同，则根据选择器权重执行

优先级注意点：

  1. 权重是有4组数字组成,但是不会有进位。

  2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..

  3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

  4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大。

  5. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

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

  • div ul li ------> 0,0,0,1 + 0,0,0,1 + 0,0,0,1 = 0,0,0,3

  • .nav ul li ------> 0,0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2

  • a:hover -----—>0,0,0,1 + 0,0,1,0 =  0,0,1,1

  • .nav a ------> 0,0,1,0 + 0,0,0,1 = 0,0,1,1

15 css盒子模型

页面布局的三大核心：盒子模型、浮动、定位

15.1 网页布局的本质

网页布局的本质：利用CSS摆盒子

网页布局的过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。

  2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。

  3. 往盒子里面装内容

15.2 盒子模型（Box Model）组成

盒子模型：

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

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

15.2.1 边框（border）

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

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

border-style

border-color

复合写法

简写：

        border：1px  solid  red；  //没有顺序

分开写法：top bottom  left  right

        border-top：1px  solid  red;   //只设定上边框

题目：请给一个200 * 200 的盒子，设置上边框为红色，其余边框为蓝色

div {
            width: 200px;
            height: 200px;
            border: 2px solid blue;
            border-top: 2px solid red;
        }

表格细线边框

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

语法：

border-collapse:collapse;
  • collapse 单词是合并的意思
  • border-collapse: collapse; 表示相邻边框合并在一起

边框会印象盒子实际大小

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

  • 测量盒子大小的时候,不量边框。

  • 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

15.2.2 内边距（padding）

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

padding 会影响盒子实际大小

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

  1. 内容和边框有了距离，添加了内边距。

  2. padding影响了盒子实际大小。

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

  • 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

  • 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

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

15.2.3 padding应用  -----  新浪导航栏

相关取值：

1.上边框为3px，颜色为 #ff8500

2.下边框为1px，颜色为 #edeef0

3.盒子高度为41px，背景颜色为 #fcfcfc

4.文字颜色为 #4c4c4c

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            height: 41px;
            line-height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
        }

        a {
            height: 41px;
            font-size: 12px;
            text-decoration: none;
            color: #4c4c4c;
            padding: 0 20px;
            display: inline-block;
        }

        .nav a:hover {
            color: #ff8500;
            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>

15.2.4 小米导航案例修改  -- padding影响盒子大小计算

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 200px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #fff;
            background-color: #55585a;
            padding-left: 30px;
            text-decoration: none;
            display: block;
        }

        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>

15.2.5 padding不会撑开盒子情况

如果盒子本身没有指定width / height 属性，则此时 padding 不会撑开盒子大小

15.2.3  外边距 margin

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

margin 简写方式代表意义与 padding 完全一致

外边距典型应用

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

  • 盒子必须指定了宽度（width）。

  • 盒子左右的外边距都设置为 auto 。

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

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

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

外边距合并

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

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

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

解决方案：

        尽量只给一个盒子添加margin值。

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

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

解决方案：

  • 可以为父元素定义上边框。

  • 可以为父元素定义上内边距。

  • 可以为父元素添加 overflow:hidden。

清除内外边距

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

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

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

16 PS基本操作

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

​ 部分操作：

  • 文件→打开 ：可以打开我们要测量的图片

  • Ctrl+R：可以打开标尺，或者 视图→标尺

  • 右击标尺，把里面的单位改为像素

  • Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图

  • 按住空格键，鼠标可以变成小手，拖动 PS 视图

  • 用选区拖动 可以测量大小

  • Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

17 综合案例

案例1：产品模块

素材：​​​

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;
        }

        .box img {
            /* 图片宽度与父亲一样宽 */
            width: 100%;
        }

        .review {
            font-size: 14px;
            height: 70px;
            /* 由于这个段落没有width属性，所以padding不会撑开盒子 */
            padding: 0 28px;
            margin-top: 30px;
        }

        .appraise {
            color: #b0b0b0;
            font-size: 12px;
            margin-top: 20px;
            padding: 0 28px;
        }

        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        .info h4 {
            display: inline-block;
            font-weight: 400;
        }

        .info span {
            color: #ff6700;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/img1.jpg" alt="">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="appraise">
            来自于 117384232 的评价
        </div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝...</a></h4> <em>|</em> <span>99.9元</span>
        </div>
    </div>
</body>

</html>

 案例2：快报模块布局

去掉  <li> 前面的点：

li {
            list-style: none;
        }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #***c;
            margin: 100px auto;
        }

        .box h3 {
            height: 30px;
            border-bottom: 1px dotted #***c;
            font-size: 14px;
            font-weight: 400;
            line-height: 30px;
            padding-left: 15px;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }

        .box ul {
            margin-top: 7px;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低质5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>

</html>

18 圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法：

border-radius: length;

radius  半径（圆的半径）原理；（椭）圆与边框的交集形成圆角效果

  • 参数值可以为数值或百分比的形式

  • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

  • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

  • 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

19 盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;
  • 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
  • 盒子阴影不占用空间，不会影响其他盒子排列

原先盒子没有影子，当我们鼠标经过就添加阴影效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3) ; */
        }

        div:hover {
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

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

</html>

20 文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

语法：

 text-shadow: h-shadow v-shadow blur color;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <div>
        你是阴影，我是火影
    </div>
</body>

</html>

21 浮动

目标：

  • 能够说出为什么需要浮动
  • 能够说出浮动的排列特性
  • 能够说出3种最常见的布局方式
  • 能够说出为什么需要清除浮动
  • 能够写出至少2种清除浮动的方式
  • 能够利用Photoshop实现基本的切图
  • 能够利用Photoshop插件实现切图
  • 能够完成学成在线的页面布局

21.1 传统网页布局的三种方式

网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应位置

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

  • 普通流（标准流）

  • 浮动

  • 定位

    这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。

21.1.1 标准流（普通流 / 文档流）

所谓的标准流: 就是标签按照规定好默认方式排列

  1. 块级元素会独占一行，从上向下顺序排列。

    常用元素：div、hr、p、h1 ~ h6、ul、ol、dl、form、table

  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

    常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了

注意：实际开发中，一个页面基本都包含了这三种布局方式。（后续移动端学习新的布局方式）。

21.2 为什么需要浮动？

        有很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式。

        浮动最典型的应用：可以让多个块级元素一行内排列显示。

        网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

21.3 什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器{ float: 属性值; }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>

</html>

21.4 浮动特性

21.4.1 浮动元素会脱离标准流（脱标）

 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(0, 153, 255);
        }
    </style>
</head>

<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

</html>

21.4.2 如果多个盒子都设置了浮动，则它们会按照属性值 一行内显示并且顶端对齐排列 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>浮动元素特性-浮动元素一行显示</title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .two {
            background-color: purple;
            height: 249px;
        }

        .four {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
</body>

</html>

注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

21.4.3 浮动元素会具有行内块元素特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

  • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
  • 浮动的盒子中间是没有缝隙的，是紧挨着一起的
  • 行内元素同理

21.4.4 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则

21.5 浮动布局练习1 ----- 小米布局案例框架

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>浮动元素搭配标准流父盒子1</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

21.6 浮动布局练习2 ----- 小米布局案例框架

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>浮动元素搭配标准流父盒子2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }

        /* 这里必须写 .box .last 要注意权重的问题  20 */
        .box .last {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

</html>

21.7 浮动布局练习3 ----- 小米布局案例框架

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>浮动布局练习3</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左青龙</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

</html>

21.8 常见网页布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>常见网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>

21.9 浮动布局注意点

1、浮动和标准流的父盒子搭配。

        先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

        一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

        浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

22 清除浮动

22.1 为什么需要清除浮动？

思考：前面浮动元素有一个标准流的父元素，他们有一个共同的特点，即均有高度；但所有的父盒子都必须有高度吗？

——— 理想状态是让子盒子撑开父亲，有多少孩子，父盒子就有多高，但子盒子浮动不占位置，最后父盒子的高度为0，会影响到下面的标准流盒子

  • 由于浮动元素不在占用原文档流的位置，所以他会对后面的元素排版产生影响

22.2 清除浮动本质

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

  • 如果父盒子本身有高度，则不需要清除浮动

  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

  • 父级有了高度，就不会影响下面的标准流了

22.3 清除浮动样式

语法：

选择器 { clear: 属性值; }
  • 实际开发中我们几乎只用 clear: both;
  • 清除浮动的策略是：闭合浮动

22.4 清除浮动方法

  1. 额外标签法 也称为隔墙法 ， 是W3C推荐的做法
  2. 父级添加 overflow 属性
  3. 父级添加 after 伪元素
  4. 父级添加 双伪元素

额外标签法

额外标签法 会在浮动元素末尾添加一个空的标签。例如 <div style="clear:both"> </div>，或者其他标签（如</br>等）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>清除浮动之额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- 最后一个浮动的盒子 -->
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>
    <div class="footer"></div>
</body>
</html>
  • 优点： 通俗易懂，书写方便
  • 缺点： 添加许多无意义的标签，结构化较差
  • 注意： 要求这个新的空标签必须是块级元素。

总结:

  1. 清除浮动本质是?        ——— 清除浮动元素脱离标准流造成的影响
  2. 清除浮动策略是?        ——— 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.
  3. 额外标签法?               ——— ​ 隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加 清除浮动样式，实际工作可能会遇到，但是不常用

父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>清除浮动之额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
            /* 清除浮动 */
            overflow: hidden;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>
  • 优点：代码简洁
  • 缺点：无法显示溢出的部分

父级添加after伪元素

:after 方式是额外标签法的升级版。给父元素添加：（现阶段了解即可）

.clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 专有 */ 
   *zoom: 1;
 }   
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>清除浮动之额外标签法</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>
  • 优点：没有增加标签，结构更简单
  • 缺点：照顾低版本浏览器
  • 代表网站： 百度、淘宝网、网易

父级添加双伪元素

给父元素添加：

 .clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>清除浮动之额外标签法</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>
</html>
  • 优点：代码更简洁
  • 缺点：照顾低版本浏览器
  • 代表网站：小米、腾讯等

22.5 清除浮动总结

为什么需要清除浮动？

  1. 父级没有高度
  2. 子盒子浮动了
  3. 影响下面布局了，我们就应该清除浮动

23 PS切图

常见图片格式：

  1. jpg图像格式：JPEG（JPG）对色彩的信息保留较好，高清，颜色较多，我们 产品类的图片经常用jpg格式
  2. gif图像格式：GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
  3. png图像格式：一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景；如果想要切成背景透明的图片，请选择png格式
  4. PSD图像格式：是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿，对前端人员来说最大的优点是可以直接从上面复制文字、获取图片、测量大小

图层切图

最简单的切图方式：右击图层 → 快速导出为PNG

合并图层导出：

  1. 选中需要的图层：图层菜单 → 合并图层 （ctrl + E）
  2. 右击 → 快速导出为PNG

切片切图

  1. 利用切片选中图片
    1. 利用切片工具手动划出
  2. 导出选中的图片
    1. 文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。

PS插件切图

Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。

官网：Cutterman - 最好用的切图工具

注意：Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本。

像素大厨

参考：常用的切图类软件_pxcook官网-CSDN博客

 24 学成在线静态页面案例

注：需要素材文件后台滴滴

准备素材和工具：

  1. 学成在线 PSD 源文件
  2. 开发工具 ： PS / cutterman插件 + vscode + chrome

CSS 属性书写顺序（重点）

  1. 布局定位属性：display / position / float / clear / visibility / overflow
  2. 自身属性： width / height / margin / padding / border / background
  3. 文本属性： color / font / text-decoration / text-align / vertical-align / white-space / break-word
  4. 其他属性（CSS3）： content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

举例：

 .jdc {
    display: block;
    position: relative;
    float: left;

    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;

    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
 }

页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路，具体如下：

​ 1.必须确定页面的版心（可视区），我们测量可得知。

​ 2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.

​ 3.一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置. 页面布局第二准则

​ 4.制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.

​ 5.所以, 先理清楚布局结构,再写代码尤为重要. 这需要我们多写多积累.

学成在线 --- header区域

结构图如下：

导航栏注意点：（序号3）

  • 实际开发中，我们不会直接用链接a而是用li包含链接（li + a）的做法。
  • li + a语义更清楚，一看就是有条理的列表型内容
  • 如果直接用a，搜索引擎容易辨别为有对齐关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。

注意：

  • 让导航栏一行显示，给li加浮动，是因为li是块级元素，需要一行显示
  • 这个nav导航栏可以不给宽度，将来可以继续添加其余文字
  • 因为导航栏里面的文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定高度 
  • 按钮button默认有一个边框需要我们手动去掉，且行内块元素之间默认有间隙，相消除可以加浮动
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="header w">
        <div class="logo">
            <img src="./images/logo.png" alt="">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <div class="user">
            <img src="./images/user.jpg" alt="">
            qq-leishui
        </div>
    </div>
</body>

</html>
*{
    margin: 0;
    padding: 0;
    font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
}
a{
    text-decoration: none;
}
li{
    list-style-type: none;
}
/* 该页面版心为1200px，每个版心需水平居中对其，即可定义版心为公共类 */
.w{
    width: 1200px;
    margin: auto;
}

.header{
    height: 42px;
    /* 不写auto的话会覆盖掉.w中的magrin */
    margin: 30px auto;  
}
.logo{
    float: left;
    width: 198px;
}
.nav{
     float: left;
    margin-left: 60px;
}
.nav li{
    float: left;
    margin: 0 15px;
}
.nav li a{
    display: block;
    height: 42px;
    font-size: 18px;
    color: #050505;
    padding: 0 8px;
    line-height: 42px;
}
.nav li a:hover{
    border-bottom: 2px solid #00a4ff;
}
.search{
    float: left;
    height: 42px;
    margin-left: 65px;
}
.search input{
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0px;
    font-size: 14px;
    color: #bfbfbf;
    padding-left: 20px;
}
.search button{
    float: left;
    width: 50px;
    height: 42px;
    background:url(./images/btn.jpg);
    border: 0;
}
.user{
    float: left;
    margin-left: 30px;
    line-height: 42px;
    font-size: 14px;
    color: #666666;
}

转载请说明出处内容投诉
CSS教程_站长资源网 » 重拾前端 —— CSS篇(pink老师)
PPT模板

PPT模板

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买