前端-CSS详细笔记-2021-5-6

一、CSS简介

1.1-HTML的局限性

• 说起HTML，这其实是个非常单纯的佳话，他只关注内容的语义。比如表明这是一个大标题，表明这是一个段落，表明这儿有一个乳片，表示此处有链接。
• 很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特性：丑。
• 虽然HTML可以做简单地样式，但是带来的是五金的臃肿和繁琐…

1.2-CSS-网页的美容师

• CSS是层叠样式表（Cascading Style Sheets）的简称。有时候我们也会称之为CSS样式表或级联样式表。

• CSS也是一种标记语言。

• CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

• CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

• 总结：

  • 1、HTML主要做结构，显示元素内容。

  • 2、CSS美化HTML，布局网页、

  • 3、CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构与样式相分离。

1.3-CSS语法规范

• 使用HTML时，需要遵从一定的规范，CSS也是如此。想要熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。
• CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
• 选择器是用于指定CSS样式的html标签，花括号是对该对象设置的具体样式。
• 属性和属性值之间是以 “键值对” 的形式出现。
• 实行是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
• 属性和属性值之间用英文 “:” 分开。
• 多个 “键值对” 之间用英文 “:” 进行区分。

1.4-CSS代码风格

以下代码书写风格不是强规范，而是符合实际开发书写方式。

• 1、样式格式书写

  • ①紧凑格式

  • ②展开格式

  • 强烈推荐第二种

• 2、样式大小写风格

  • 强烈推荐样式选择器、属性名、是行之关键字全部使用小写字母，特殊情况除外。

• 3、样式空格风格

  • ①属性值前面、冒号后面，保留一个空格。

  • ②选择器（标签）和大括号中间保留空格。

二、CSS基础的选择器

2.1-CSS选择器的作用

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

2.2-选择器分类

• 选择器分为基础选择器和复合选择器两大类。
• 基础选择器是由单个选择器组成的。
• 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。

2.3-标签选择器

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

• 作用

  标签选择器可以把某一类标签全部选择出来，比如所有的标签和所有的标签。

• 优点

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

• 缺点

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

2.4-类选择器

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

• 结构需要用class属性来调用class类的意思。

• 类选择器口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用。

• 注意

  • 类选择器使用 “.” （英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。

  • 可以理解为：给这个标签起了一个名字，来表示。

  • 长名称或词组可以使用中横线来为选择器命名。

  • 不要使用纯数字、中文等命名，尽量使用英文字母来表示。

  • 命名要有意义，尽量使别人一眼就知道这个类名的目的。

  • 类命名规范

    • 头：header

    • 内容：content/container

    • 尾：footer

    • 导航：nav

    • 侧栏：sidebar

    • 栏目：column

    • 页面外围控制整体布局宽度：wrapper

    • 左右中：left right center

    • 登录条：loginbar

    • 标志：logo

    • 广告：banner

    • 页面主体：main

    • 热点：hot

    • 新闻：news

    • 下载：download

    • 子导航：subnav

    • 菜单：menu

    • 子菜单：submenu

    • 搜索：search

    • 友情链接：friendlink

• 类选择器-多类名

  • 我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选择出这个标签。

  • 简单理解就是一个标签有多个名字。

  • 1、多类名使用方式

    • 在标签class属性中写多个类名。
    • 多个类名中间必须用空格分开。
    • 这个标签就可以分别具有这些类名的样式。

  • 2、多类名开发中使用场景

    • 可以吧一些标签匀速相同的样式（共同部分）放到一个类里面。
    • 这些标签都可以调用这个公共的类，然后再调用自己独有的类。
    • 从而节省CSS代码，统一修改也非常方便。

2.5-id选择器

• id选择器可以为标有特定id的HTML元素指定特定的样式。

• HTML元素以id属性来设置id选择器，CSS中id选择器以 "#"来定义。

• 注意：id属性只能在每个HTML文档中出现一次。口诀：样式#定义结构id调用，只能调用一次，别人切勿使用。

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

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

  • id选择器好比人的身份证号码，全中国是唯一的，不得重复。

  • id选择器和类选择器最大的不同在于使用次数上。

  • 类选择器在修改样式中用的最多，id选择器一般用于页面唯一的元素上，经常和JavaScript搭配使用。

2.6-通配符选择器

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

• 通配符选择器不需要调用，自动就给所有的元素使用样式。

• 特殊情况下使用。

2.7-基础选择器总

• ​ 基础选择器 作用 特点 使用情况 用法

  • 标签选择器 可以选出所有相同的标签，比如p。 不能差异化选择 较多 p{color: red;}

  • 类选择器 可以选出1个或多个标签 可以根据需求选择 非常多 .nav{color: red;}

  • id选择器 一次只能选择一个标签 ID属性只能在每个 一般和JS搭配 #nav{color:

    ​ HTML文档出现一次 red;}

  • 通配符选择器 选择所有的标签 选择的太多，有部分不需要 特殊请款使用 *{color：

    ​ red}

三、CSS字体属性

3.1-字体系列

• CSS使用font-family属性定义文本的字体系列。
• 各种字体之间必须使用英文状态下的逗号隔开。
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。
• 最常见的几个字体：body{font-family: ‘Mircosoft YaHei’, tahoma,arial,‘Hirgino Sans GB’}

3.2-字体大小

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

3.3-字体粗细

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

• 属性值 描述

​ normal 默认值（不加粗）

​ bold 定义粗体（加粗的）

​ 100-900 400等同于normal，而700等同于bold 注意这个数字后面不跟单位。

• 学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗。
• 实际开发时，我们更喜欢用数字表示加粗。

3.4-文字样式

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

• 属性值 作用

  normal 默认值，浏览器会显示标准的字体样式font-size:normal;

  italic 浏览器会显示斜体的样式。

• 注意：平时我们很少给文字加倾斜，反而要给斜体标签（em,i）改为不倾斜字体。

3.4-字体符合属性

• 字体复合属性可以吧以上文字样式综合来写，这样可以更节约代码。

• 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性之间以空格隔开。

• 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，佛则font属性将补齐作用。

3.5-字体属性总结

• 属性 表示 注意点

​ font-size 字号 我们通常用的单位是px玄素，一定要跟上单位。

​ font-family 字体 实际工作中按照团队约定来写字体。

​ font-weight 字体粗细 记住加粗是700或者bold，不加粗是normal或400，记住数字不跟单位。

​ font-style 字体样式 记住倾斜是italic，不倾斜是normal，工作中我们最常用normal。

​ font 字体连写 1.字体连写是由顺序的，不能随意换位置2.其中字号和字体必须同时出现。

四、文本属性

CSStext（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

4.1-文本颜色

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

• 表示 属性值

  预定义的颜色值 red，green，blue

  十六进制 #FF0000，#FF6600，#29D794

  RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)

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

4.2-对齐文本

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

• 属性值 解释

  left 左对齐

  right 右对齐

  center 居中对齐

4.3-装饰文本

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

• 属性值 描述

  none 默认。没有装饰线（最常用）。

  underline 下划线。链接a自带下划线（常用）。

  overline 上划线。（几乎不用）。

  line-through 删除线。（不常用）。

4.4-文本缩进

• text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
• em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前匀速没有设置大小，则会按照父元素的1个文字大小。

4.5-行间距

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

4.6-文本属性

• 属性 表示 注意点

  color 文本颜色 我们通常用十六进制，而且是简写形式#fff。

  text-align 文本对齐 可以设定文字水平的对齐方式。

  text-indent 文本缩进 通常我们用于段落首行缩进2个字的距离 text-align: 2em。

  text-decoration 文本修饰 记住 添加下划线underline 取消下划线none。

  line-height 行高 控制行与行之间的距离。

五、CSS的引入方式

5.1-CSS的三种样式表

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

5.2-内部样式表

• 内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个标签中。
• 标签理论上可以放在HTML文档的任何地方，但一般会放在文档的 标签中。
• 通过此种方式，可以方便控制整个页面中的元素样式设置。
• 代码结构清晰，但是并没有实现结构域样式完全分离。
• 使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式使我们联系时常用的方法。

5.3-行内样式表

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

5.4-外部样式表

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

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

  • 1、新建一个后缀名为.css的样式文件，它所有CSS代码放入此文件中。

  • 2、在HTML页面中，使用标签引入这个文件。

    • 属性 作用

    • rel 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文

      ​ 档是一个样式表文档。

    • href 定义所链接外部样式表文档的URL，可以是相对路径，也可以是绝对路径。

• 使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方法是开发中常用的方式。

5.5-CSS引入方式总结

• 样式表 优点 缺点 使用情况 控制范围**

  行内样式表 书写方便，权重高 结构样式混写 较少 控制一个标签

  内部样式表 部分结构和样式分离 没有彻底分离 较多 控制一个页面

  外部样式表 完全实现结构和样式项分离 需要引入 最多，吐血推荐 控制多个页面

六、综合案例

七、chorme调试工具

7.1-使用调试工具

• Ctrl + 滚轮 可以放大开发者工具代码大小。
• 左边是HTML元素结构，右边是CSS样式。
• 右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色。
• Ctrl + 0 复原浏览器大小。
• 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
• 如果有样式，但是样式前面有黄色单号提示，则是样式属性书写错误。

八、Emmet语法

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

8.1-快速生成HTML结构语法

• 1、生成标签 直接输入标签名 按tab键即可。
• 2、如果想要生成多个相同标签，加上*就可以了。
• 3、如果有父子级关系的标签，就可以用 > 就可以了。
• 4、如果有兄弟关系的标签，用+ 就可以了。
• 5、如果生成带有类名或者id名字的，直接写 .demo 或者 #two ,tab键就可以了。
• 6、如果生成的div类名是由顺序的，就可以用自增符号 $。
• 7、如果想要在生成的标签内部写内容可以用 {} 表示。

8.2-快速生成CSS样式语法

• CSS基本采取简写形式即可。
  • 比如w200 按tab键 可以生成width: 200px;
  • 比如lh26 按tab键 可以生成line-height: 26px;

8.3-快速格式化代码

• Vscode 快速格式化代码： shift + alt + f

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

  • 1、文件 -> 首选项 -> 设置；

  • 2、搜索emmet.include;

  • 3、在settings.json下的【用户中】添加以下语句。

    “editor.formatOnType”: true;

    “editor.formatOnSave”: true;

    只需要设置一次即可，以后都可以自动保存格式化代码。

九、CSS的复合选择器

9.1-什么是复合选择器

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

9.2-后代选择器（重要）

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

9.3-子选择器（重要）

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

  • 元素1和元素2中间用 大于号 隔开。

  • 元素1是父亲，元素2是子级，最终选择的是元素2。

  • 元素2必须是亲儿子，其孙子。重孙之类都不贵他管。你也可以叫它 亲儿子选择器。

9.4-并集选择器（重要）

• 并集选择器可以选择多组标签，同事为他们定义相同的样式。通常用于集体声明。
• 并集选择器是各选择器通过英文逗号链接而成，任何形式的选择器都可以作为并集选择器的一部分。
• 约定的语法规范，我们并集选择器喜欢竖着写。

9.5-伪类选择器

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

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

• 因为伪类选择器很多，比如有链接伪类、结构伪类等。

9.6-链接伪类选择器

• a:link 选择所有被违背访问的链接

• a:visited 选择所有已被访问的链接

• a:hover 选择鼠标指针位于其上的链接

• a:active 选择活动链接（鼠标按下未弹起的链接）

• 链接伪类选择器注意事项

  • 1、为了确保生效，请按照LVHA的顺序声明：:link - :cisited - :hover - :active。
  • 2、记忆法：love hate 或者 lv 包包 hao。
  • 3、因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

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

9.7-:focus伪类选择器

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

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

9.8-复合选择器总结

​ 选择器 作用 特征 使用情况 隔开符号及用法

• 后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格

• 子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于号

• 并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号

• 链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住a{}和a:hover

• :focus选择器 选择获得光标的表单 跟表单有关 较少 input:focus 记住这个写法

十、CSS的元素选择模式

10.1-什么是元素显示模式

• 作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特性可以更好的布局我们的网页。
• 元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个
• HTML元素一般分为块元素和行内元素两种类型。

10.2-块元素

• 常见的块元素有

  、

  、

  、

  • 、
    1. 、
    2. 等，其中标签是最典型的块级元素
    3. 块级元素的特点：
       • 比较霸道，自己独占一行。
       • 高度、宽度、内外边距都可做控制。
       • 宽度默认是容器（父级宽度）的100%。
       • 是一个容器及盒子，里面可以放行内或者块级元素。
    4. 注意
       • 文字类的元素内不能使用块级元素。
       • 标签主要用于存放文字，因此里面不能放块级元素，特别是不能放
       • 同理，

         等都是文字类块级标签，里面也不能放其他块级元素。

10.3-行内元素

• 常见的行内元素有、、、、、、、、、等，其中标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
• 行内元素的特点：
  • 相邻行内元素在一行上，一行可以显示多个。
  • 高、宽直接设置是无效的。
  • 默认宽度就是它本身内容的宽度。
  • 行内元素只能容纳文本或其他行内元素。
• 注意
  • 链接里面不能再放链接。
  • 特殊情况链接里面可以放块级元素，但是给转化一下块级模式最安全。

10.4-行内块元素

• 在行内元素中有有几个特殊的标签——、、，他们同事具有块元素和行内元素的特点。有些资料称它们为行内块元素。
• 行内块元素的特点：
  • 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
  • 默认宽度就是它本身内容的宽度（行内元素特点）。
  • 高度、行高、内外边距都可以控制（块级元素特点）。

10.5-元素显示模式总结

​ 元素模式 元素排列 设置样式 默认宽度 包含

• 块级元素 一行只能放一个块级元素 可以设置宽高 容器的100% 容器级可以包含任何标签
• 行内元素 一行可以放多个行内元素 不可以设置宽高 它本身内容的宽度 容器文本或者其他行内元素
• 行内块元素 一行放多个行内块元素 可以设置宽高 它本身内容的宽度

10.6-元素显示模式转换

• 特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性。比如想要增加链接的触发范围。
• **转化为块级元素：**display:block重点
• **转化为行内元素：**display:inline
• **转化为行内块：**display:inline-block重点

10.7-一个小工具的使用snipaste

• Snipsae是一个简单但强大的截图工具，也可以让你的截图贴回到屏幕上。
• 常用快捷方式：
  • F1可以截图，同事测量大小，设置箭头，书写文字等。
  • F3在桌面上置顶。
  • 点击图片，alt 可以取色，（按下shift键可以切换取色模式）
  • 按下ESC取消图片显示。

10.8-一个小技巧 单行文字垂直居中

• CSS没有给我们提供文字垂直居中的代码。这里我们可以使用一个小技巧来实现。
• 解决方案： 让文字的行号等于盒子的高度 就可以让文字在当前盒子内垂直居中。

十一、CSS的背景

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

11.1-背景颜色

• background-color属性定义了元素的背景颜色。
• 一般情况下元素背景颜色默认值是transparent，我们也可以手动指定背景颜色为透明色。

11.2-背景图片

• background-color属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片上或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

• 参数值 作用

  none 无背景图（默认的）。

  url() 使用绝对路径或相对地址指定背景图像。

11.3-背景平铺

• 如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

• 参数值 作用

  repeat 背景图像在纵向和横向上平铺（默认的）。

  no-repeat 背景图像不平铺。

  repeat-x 背景图像在横向上平铺。

  repeat-y 背景图像在纵向上平铺。

11.4-背景图片位置

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

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

• 参数值 说明

  length 百分数 | 有浮点数字和单位标识符组成的长度值。

  position top | center | bottom | left | right 方位名词。

• 1、参数是方位名词

  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致。
  • 如果只制定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

• 2、参数是精确单位

  • 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。
  • 如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中。

• 3、参数是混合单位

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

11.5-背景图像固定

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

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

• 参数 作用

  scroll 背景图像是随对象内容滚动。

  fixed 背景图像固定

11.6-背景复合写法

• 为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量。

• 当时用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

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

11.7-背景颜色半透明

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

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

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

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

  • CSS3新增属性，是IE9+ 版本浏览器才支持。

  • 但是现在在实习开发，我们不太关注兼容性写法了，可以放心使用。

11.8-背景总结

属性 作用 值

background-color 背景颜色 预定义的颜色纸/十六进制/RGB代码。

background-image 背景图片 url（图片路径） 。

background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y。

background-position 背景位置 length/position 分别是 x 和 y 坐标。

background-attachment 背景颜色半透明 scroll（背景滚动）/fixed（背景固定）。

背景简写 书写更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置。

背景色半透明 背景颜色半透明 background：rgb（0,0,0,0.3）;后面必须是4个值。

• 背景图片：实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）

十二、CSS的三大特性

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

12.1-层叠性

• 相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个样式。层叠性主要解决样式冲突。
• 层叠性原则：
  • 样式冲突，遵循的原则是就近原则，那个样式离结构近，就执行哪个样式。
  • 样式不冲突，不会层叠

12.2-继承性

• CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单理解：子承父业。

• 恰当地使用继承性可以简化代码，降低CSS样式的复杂性。

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

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

• 行高的继承

  • 行高可以跟单位也可以不跟单位。

  • 如果子元素没有设置行高，则会继承父元素的行高为1.5倍。

  • 此时子元素的行高：当前子元素的文字大小*1.5。

  • body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

12.3-优先级

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

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

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

• 选择器权重如下：

  • 选择器 选择器权重

    继承或者* 0,0,0,0

    元素选择器 0,0,0,1

    类选择器，伪类选择器 0,0,1,0

    ID选择器 0,1,0,0

    行内样式style="" 1,0,0,0

    !important 重要的 无穷大

• 优先级注意点

  • 1、权重是由4个数字组成，但是不会有进位。
  • 2、可以理解为类选择器大于元素选择器，id选择器永远大于类选择器，一次类推。
  • 3、等级判断从左向右，如果某一位数值相同，则判断下一位数值。
  • 4、可以简单记忆：通配符和继承权重为0，标签选择器为1，类选择器为10，id选择器为100，行为样式表位1000，！important无穷大。
  • 5、继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，则元素得到的权重都是0。

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

十三、CSS盒子模型

13.1-盒子模型

页面布局要学习三大核心：盒子模型、浮动 和 定位。学号盒子模型能非常好的帮助我们布局页面。

• ①网页布局过程：

  • 1、先准备好相关的网页元素，网页元素基本都是盒子box。
  • 2、利用CSS设置好盒子样式，然后摆放到相应位置。
  • 3、往盒子里面装内容。
  • 网页布局的核心本质：就是利用CSS摆盒子。

• ②盒子模型组成

  • 所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
  • CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，他包括：边框、外边框、内边距、和实际内容。

• ③边框（border）

  • border可以设置元素的边框。边框有三部分组成：边框宽度、边框样式、边框颜色。

  • 属性 作用

    border-width 定义边框粗细，单位是px。

    border-style 边框的样式。solid（实线边框）、dashed（虚线边框）、dotted（点线边框）。

    border-color 边框颜色。

• ④边框的复合写法

  • CSS边框属性允许你指定一个元素边框的样式和颜色。

  • 边框简介：

  • 边框分开写法：

• ⑤表格的细线边框

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

  • collapse单词是合并的意思。

  • border-collapse：collapse；表示相邻边框合并在一起。

• ⑥边框会影响盒子实际大小

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

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

• ⑦内边距（padding）

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

  • 值的个数 表达意思

    padding：5px； 1个值，代表上下左右都有5个像素内边距。

    padding：5px 10px； 2个值， 代表上下内边距是5像素，左右内边距是10像素。

    padding：5px 10px 20px； 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素

    padding：5px 10px 20px 30px 4个值，上是5，右是10，下是20，左是30。 顺时针。

  • 当我们给盒子指定paddin值之后，发生了2件事情。

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

    • 2、padding影响盒子的实际大小。

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

    • 解决方案

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

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

• ⑧外边距（margin）

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

  • margin简写形式与padding简写形式 代表意义完全相同。

  • 外边距可以让块级元素水平居中，但是必须满足2个条件。

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

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

    • 常见的写法，有一下三种：

      • margin-left：auto； margin-right：auto；
      • margin：auto；
      • margin：0 auto；

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

• ⑨外边距合并

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

  • 1、相邻块元素垂直外边距的合并。
    • 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面元素右上边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top纸盒。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
    • 解决方案：
      • 尽量只给一个盒子添加margin值。
  • 2、嵌套块元素垂直外边距的塌陷
    • 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
    • 解决方案：
      • 1.可以为父元素定义上边框。
      • 2.可以为父元素定义上内边距。
      • 3.可以为父元素添加overflow：hidden。

• ⑩清除内外边距

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

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

13.2-PS基础操作

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

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

14.3-综合案例

产品模块

品优购快报

• 1、布局为啥用不同的盒子，我只想用div

  • 标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p。

• 2、为啥用那么多类名？

  • 类名就是给每个盒子起了个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也方便。

• 3、到底用margin还是padding？

  • 大部分情况两个是可以混用，两者各有优缺点，但是根据实际情况，总有更简单地方法实现。

• 4、自己做没有思路？

  • 布局有很多种实现方式，可以先模仿，再做出自己的风格。
  • 最后一定要多运用辅助工具，比如屏幕画笔、PS等。

13.4-圆角边框（重点）

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

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

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

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

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

• 如果是矩形，设置为高度的一般就可以做圆角矩形。

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

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

  border-bottom-left-radius。

13.5-盒子阴影

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

• 值 描述

  h-shadow 必须。水平阴影的位置。允许负值。

  v-shadow 必须。垂直阴影的位置。允许负值。

  blur 可选。模糊距离。

  spread 可选。阴影的尺寸。

  color 可选。阴影的颜色。请参阅CSS颜色纸。

  inset 可选。将外部阴影（outset）改为内部阴影。

• 注意：

  • 1、默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效。
  • 2、盒子阴影不占用空间，不会影响其他盒子排列。

• 浮动

  • 1、传统网页布局的三种方式

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

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

    实际开发中，一个页面基本都把汗了这三种布局方式（后面移动端学习信的布局方式）

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

      • 所谓标准流：就是标签按照规定好默认方式排列。
        • 1.块级元素会独占一行，从上乡下顺序排列。
          • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table。
        • 2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
          • 常用元素：span、a、i、em等。
        • 以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

    • 浮动

      • 为什么需要浮动？

        • 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
        • 浮动最典型的应用：可以让多个块级元素一行内排列显示。
        • 网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动。

      • 什么是浮动？

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

        • 属性值 描述

          none 元素不浮动（默认值）。

          left 元素向左浮动。

          right 元素向右浮动。

      • 浮动特性（重难点）

        • 加了浮动之后的元素，会具有很多特性。

        • 1、浮动的元素会脱离标准流。

          • ①脱离标准普通流的控制，移动到指定位置，俗称脱标。

          • ②浮动的盒子不在保留原先的位置。

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

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

        • 3、浮动元素会具有行内块元素的特性

          • 任何元素都可以浮动。不管原先是是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
          • 如果行内元素有了浮动，则不需要转换块级/行内块级元素就可以直接给高度和宽度。
          • 如果块级元素没有设置宽度，默认宽度和父级一样，但是添加浮动之后，它的大小根据内容来决定。
          • 浮动的盒子中间是没有缝隙的，是紧挨着一起的。
          • 行内元素同理。

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

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

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

          • 一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟元素也应该浮动，以防止引起问题。
          • 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

        • 为什么需要清除浮动？

          • 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占又位置，最后父级盒子高度为0是，就会影响下面的标准流盒子。
          • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

        • 清除浮动的本质

          • 清除浮动的本质是清除浮动元素造成的影响。

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

          • 清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

          • 属性值 描述

            left 不允许左侧有浮动元素（清除左侧浮动的影响）。

            right 不允许右侧有浮动元素（清除右侧浮动的影响）。

            both 同时清除左右两侧浮动的影响。

            我们实际工作中，几乎只用clear: both;

          • 清除浮动的策略是：闭合浮动

        • 清除浮动方法

          • 1.额外标签法也称为隔墙法，是W3C推荐的做法。

            • 额外表前阀会在浮动元素末端添加一个空的标签。如
              ,或者其他标签（如）。
            • 优点：通俗易懂，书写方便。
            • 缺点：添加许多无意义的标签，结构化较差。
            • 注意：要求这个新的空标签必须是块级元素。

          • 2.父级添加overflow属性。

            • 可以给父级添加overflow属性，将其属性值设置为hidden、auto、scroll。
            • 子不教，父之过。注意是给父元素添加代码。
            • 优点：代码简介。
            • 缺点：无法显示溢出部分。

          • 3.父级添加after伪元素。

            • :after 方式是额外标签法的升级版。也是给父元素添加。

            • 优点：没有增加标签，结构更加简介。

            • 缺点：照顾低版本浏览器。

            • 代表网站：百度、淘宝网、网易等。

          • 4.父级添加双伪元素。

            • 优点：代码更简洁。

            • 缺点：照顾低版本浏览器。

            • 代表网站：小米、腾讯等。

    • 定位

13.6-文字阴影

13.7-PS切图

• 常见的图片格式
  • 1、jpg图像格式：JPEG（JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的。
  • 2、gif图像格式：GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果。
  • 3、png图像格式：是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片，请选择PNG格式。
  • 4、PSD图像格式：是PS的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点就是，我们可以直接从上面文字，获得图片，还可以测量大小和距离。
• PS有很多切图方式：图层切图、切片切图、PS插件切图等。
• 一、图层切图：
  • 最简单的切图方式：右击图层 -> 快速导出为PNG。
  • 但是很多情况下我们需要合并图层后再导出。
    • 1.选中需要的图层：图层菜单→合并图层（）Ctrl + e。
    • 2.右击→快速导出为PNG。
  • 最好的方法是：沟通。
• 二、切片切图
  • 利用切片选中图片
    • 利用切片工具手动划出。
  • 导出选中的图片
    • 文件菜单→导出→存储为web设备所用格式→选择我们要的图片格式→存储。
• 三、PS插件切图
  • Cutterman是一款运行在Photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程。
  • 官网：http://www.cutterman.cn/zh/cutterman
  • 注意Cutterman插件要求你的PS必须是完整版，不能是绿色版。

13.8-CSS属性书写顺序

• 建议遵循一下顺序
  • 1.布局定位属性：display/position/float/clear/visibility/overflow（建议display第一，毕竟关系到模式）
  • 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…

13.9-学成在线案例

• 导航栏注意点

• 实际开发中，我们不会直接用链接a 而是利用li 包含链接a 的做法。

  • 1.li + a 语义更清晰，一看这就是有条有理的列表型内容。
  • 2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。

13.10-定位

• 1.为什么需要定位

  • 某个元素可以自由的在一个盒子内移动，并且压住其他盒子。
  • 当我们打开窗口的时候，有时候某个模块会固定在屏幕上。
  • 以上效果，标准流会浮动都无法实现，此时需要定位来实现。
    • 所以：
    • ①浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
    • ②定位则是可以让盒子自由的在某一个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

• 2.定位组装成

  • 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

  • 定位 = 定位模式 + 边偏移。

  • 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

  • ①定位模式

    定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

    值 语义

    static 静态定位

    relative 相对定位

    absolute 绝对定位

    fixed 固定定位

  • ②边偏移

    边偏移就是定位的盒子移动到最终位置。有4个属性。

    边偏移属性 示例 描述

    top top：80px 顶端偏移量，定义元素相对于其父元素上边线的边距。

    bottom bottom：80px 底部偏移量，定义元素相对于其父元素下边线的距离。

    left left：80px 左侧偏移量，定义元素相对于其父元素左边线的距离。

    right right：80px 右侧偏移量，定义元素相对于其父元素右边线的距离。

  • ③静态定位static（了解）

    静态定位是元素的默认定位方式，无定位的意思。

    • 静态定位按照标准流特性摆放位置，它没有边偏移。
    • 静态定位在布局中很少使用。

  • ④相对定位relative（重要）

    相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。（自恋型）

    相对定位的特点：（务必记住）

    • 1.它是相对于自己原来的位置来移动的（移动位置的时候参照自己原来的位置）。
    • 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）。因此，相对定位没有脱标。它最典型的应用是给绝对定位当爹的。。。

  • ⑤绝对定位absolute（重要）

    绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。（拼爹型）。

    绝对定位的特点：（务必记住）

    • 1.如果没有祖先元素或者祖先元素 没有定位，则以浏览器为准定位（document文档）。
    • 2.如果祖先元素有定位（相对、绝度、固定定位），则以最近一级的有定位祖先元素为参考点移动。
    • 3.绝对定位不再占用之前的位置。（脱标）

  • ⑥子绝父相的由来

    这个“子绝父相”太重要了，使我们学习定位的口诀，是定位中最常用的一种方式。这句话的意思是：子级是绝对定位的话，父级要用相对定位。

    • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
    • 父盒子需要加定位限制子盒子在父盒子内显示。
    • 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
    • 这就是子绝父相的由来。所以相对定位经常用来作为绝对定位的父级
    • 总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
    • 当然，子绝父相不是永远不变的，如果父元素不需要占有位置，也会遇到子绝父绝。

  • ⑦固定定位fixed（重要）

    • 固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动式元素的位置不会改变。

    • 固定定位的特点：（务必记住）

      • 1.以浏览器的可是窗口为参照点移动元素。

        • 跟父元素没有任何关系。
        • 不随滚动条滚动。

      • 2.固定定位不再占有原先的位置。

        • 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

      • 固定定位小技巧：固定在版心右侧位置

        • 小算法：

          让固定定位的盒子 left：50%。走到浏览器可视区（也可以看做版心）的一半位置。

          让固定定位的盒子 margin-left。版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

  • ⑧粘性定位sticky（了解）

    • 粘性定位可以被认为是相对定位和固定定位的混合。sticky 粘性的。

    • 粘性定位的特点：

      • 1.以浏览器的可是窗口为参照点移动元素（固定定位的特点）。
      • 2.粘性定位占有原先的位置（相对定位特点）。
      • 3.必须添加top、left、right、bottom其中一个才有效。
      • 跟页面滚动搭配使用。兼容性较差，IE不支持。

  • ⑨定位的总结

    定位模式 是否脱标 移动位置 是否常用

    static静态定位 否 不能使用偏移量 很少

    relative相对定位       是（占有位置）            相对于自身位置移动          常用

    absolute绝对定位     是（不占有位置）        带有定位的父级                  常用

    fixed固定定位            是（不占有位置）        浏览器可视区                      常用

    sticky粘性定位 否（占有位置） 浏览器可视区 当前阶段少

    一定记住 相对定位、固定定位、绝对定位 的量大特点：1.是否占有位置（脱标）2.以谁为基点移动位置。

    学会定位重点学会子绝父相。

  • ⑩定位叠放次序 z-index

    • 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）。

    • 数值可以使正整数、负整数或0，默认是auto，数值越大，盒子越靠上。

    • 如果属性值相同，则按照书写顺序，后来者居上。

    • 数字后面不能加单位。

    • 只有定位的盒子才有z-index属性。

  • 定位的拓展

    • 1.绝对定位的盒子居中。
      • 加了绝对定位的盒子不能通过margin：0 auto 水平居中，但是可以通过一下计算方法实现水平和垂直居中。
        • 1.left：50%；让盒子的左侧移动到父级元素的水平中心位置。
        • 2.margin-left：-100px; 让盒子向左移动自身宽度的一半。
    • 2.定位特殊特性。
      • 绝对定位和固定定位也和浮动类似
        • 1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
        • 2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
    • 3.脱标的盒子不会出发外边距塌陷。
      • 浮动元素、绝对定位（固定定位）元素都不会出发外边距合并的问题。
    • 4.绝对定位（固定定位）会完全压住盒子。
      • 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。
      • 但是绝对定位（固定定位）会压住下面标准流所有内容。
      • 浮动之所以不会压住文字，因为浮动产生的最初目的是为了做文字环绕效果的。文字会围绕浮动元素。

13.11-综合案例

13.12-网页布局总结

• 通过盒子模型，清除知道大部分HTML标签是一个盒子。

• 通过CSS浮动，定位可以让每个盒子排列成为网页。

• 一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

• 1、标准流：

  可以让盒子上下排列或左右排列，垂直的块级盒子就用标准流显示。

• 2、浮动：

  可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动。

• 3、定位：

  定位最大的特点是由层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素在某个盒子内移动就用定位布局。

13.13-元素的显示与隐藏

类似于网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。

本质：让一个元素在页面中隐藏或者显示出来。

• 1、display显示隐藏

  display属性用于设置一个元素应如何显示。

  • display：none；隐藏对象。
  • display：block；除了转换为块级元素之外，同时还有显示元素的意思。

  display隐藏元素后，不再占有原来的位置。

  后面应用及其广泛，搭配JS可以做很多的网页特效。

• 2、visibility显示隐藏

  visibility：visible；元素可视。

  visibility：hidden；元素隐藏。

  visibility隐藏元素之后，继续占有原来的位置。

  如果隐藏元素想要原来的位置，就用visibility：hidden。

  如果隐藏元素不想要原来位置，就用display：none（用处更多重点）。

• 3、overflow溢出显示隐藏

  overflow属性指如果一个内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

  属性值 描述

  visible 不剪切内容也不添加滚动条。

  hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉。

  scroll 不管超出内容否，总是显示滚动条。

  auto 超出自动洗那是滚动条，不超出不显示滚动条。

  • 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
  • 但是如果有定位的盒子，请慎用overflow：hidden，因为它会隐藏多余的部分。

十四、CSS高级

14.1-精灵图

• 为什么需要精灵图

  • 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
  • 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现CSS精灵技术（也称为 CSS Sprites、CSS雪碧）。
  • 核心原理：将网页中的一些小北京图像整合到一张大图中，这样服务器只需要一次请求就可以了。
  • 精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

• 精灵图（sprites）的使用

  • 使用精灵图核心：

    • 1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

    • 2.这个大图片也称为sprites 精灵图 或者 雪碧图。

    • 3.移动背景图片位置，此时可以利用background-position。

    • 4.移动的距离就是这个目标图片的 X 和 Y 坐标。注意网页中的坐标有所不同。x轴往右y轴往下为正值

    • 5.一般情况下都是网上往左移动，所以数值是负值。

    • 6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

14.2-字体图标

• 字体图标的产生

  • 字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
  • 精灵图是由诸多优点，但是缺点也很明显。
    • 1.图片文件还是比较大的。
    • 2.图片本身放大和缩小会失真。
    • 3.一旦图片制作完毕想要更换非常复杂。
  • 此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。
  • 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

• 字体图标的优点

  • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
  • 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
  • 兼容性：几乎所有的浏览器，请放心使用。
  • 注意：字体图标不能替代精灵技术，只是对工作中部分技术的提升和优化。
  • 总结：
    • 1.如果遇到一些结构和样式比较简单地小图标，就用字体图标。
    • 2.如果遇到一些结构和样式复杂一点的小图标，就用精灵图。

• 字体图标的使用

  字体图标是一些网页常见的小图标，我们直接网上下载即可。因此可分为：

  • 1.字体图标的下载。

    • 推荐下载网站：

      icomoon字库 http://icomoon.io

      • icoMoon成立于2011年，推出了一个自定义图标字体生成器，它允许用户选择所需要的的图标，使它们成为一字型。该字体库内容盅内繁多，非常全面，唯一的遗憾是国外服务器，打开网速比较慢。

      阿里iconfont字库 http://www.iconfont.cn/

      • 这个是阿里巴巴M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里巴巴图标库。可以使用AI制作图标上传生成。重点是，免费！

  • 2.字体图标的引入（引入到我们HTML页面中）。

    • 1.把下载包里面的fonts文件夹放在页面根目录下。

      • 不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。
      • ①.ttf格式字体：该字体是Windows和Mac的最常见字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobil、Safari4.2+
      • ②.woof格式字体：支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
      • ③.eot格式字体：该字体是IE专用字体，支持这种字体的浏览器有IE4+
      • ④.svg格式字体：是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

    • 2.在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。注意字体路径。

  • 3.字体图标的追加（以后添加新的小图标）。

    如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

    把压缩包里面的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并且重新替换原来的文件即可。

14.3-CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体库。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kwXx6CTP-1620312154113)(D:丁娜娜软件Typora笔记image-20210430180900871.png)]

14.4-CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，一边提高更好的用户体验。

• 1、更改用户的鼠标样式

  设置或检索在对象上移动的鼠标指针采用系统预定的光标形状。

  属性值 描述

  default 小白。默认。

  pointer 小手。

  move 移动。

  text 文本。

  not-allowed 禁止。

• 2、表单轮廓线 outline

  给表单添加outline：0；或者 outline: none；样式之后，就可以去掉默认的蓝色边框。

• 3、防止表单域拖拽

  实际开发中，我们文本域右下角是不可以拖拽的。

14.5-vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

值 描述

baseline 默认。元素防止在父元素的基线上。

top 把元素的顶端与行中最高元素的顶端对齐。

middle 把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低元素的顶端对齐。

• 图片、表单和文字对齐

  图片、表单都属于行内块元素，默认的vertical-align是基线对齐。

  此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。

• 解决图片底部默认空白缝隙问题。

  bug:图片地测会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

  主要解决方法有两种：

  • 1.给图片添加vertical-align：middle | top | bottom等。（提倡使用）

  • 2.把图片转化为块级元素：display:block

14.6-溢出的文字省略号显示

• 1、单行文本溢出显示省略号-必须满足三个条件

• 2、多行文本溢出显示省略号

  多行文本期初显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）。

  更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

14.7-常见布局技巧

巧妙利用一个技能更快更好的布局：

• 1、margin负值的运用

  • ①让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框。
  • ②鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有位置，则加 z-index）。

• 2、文字围绕浮动元素

• 3、行内块的巧妙运用

• 4、CSS三角强化

十五、CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。

简单理解：CSS初始化是指重设浏览器的样式。（也成为了CSSreset）。

每个网页都必须首先进行CSS初始化。

京东CSS为例：

Unicode编码字体

• 把中文字体的名称用相应的Unicode编码来代替，这样就可以有效地避免浏览器解释CSS代码时出现乱码的问题。

• 比如：

  黑体 9ED14F53

  宋体 9B8B4F53

  微软雅黑 5FAE8F6F96C59ED1

十六、HTML5和CSS提高

16.1-HTML5的新特性

HTML5新增的特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本上是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

• 1.1-HTML5新增的语义化标签

  以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的。

  • ：头部标签
  • ：导航标签
  • ：内容标签
  • ：定义文档某个区域
  • ：侧边栏标签
  • ：尾部标签
  • 注意：
    • 这种语义化标准主要是针对搜索引擎的。
    • 这些新标签页面中可以使用多次。
    • 在IE9中，需要把这些元素转换为块级元素。
    • 其实，我们移动端更喜欢使用这些标签。
    • HTML5还增加了很多其它标签。

• 1.2-新增的多媒体标签

  HTML5在不同插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。

  • 新增的多媒体标签主要包含两个：

    • 1、音频：

    • 2、视频：

      使用他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。

  • 视频：

    当前元素支持三种视频格式：尽量使用MP4格式。

  • 视频—常见属性

    属性 值 描述

    autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）

    controls controls 向用户显示播放控件。

    width pixels(像素) 设置播放器宽度。

    height pixels(像素) 设置播放器高度

    loop loop 播放完是否继续播放该视频，循环播放

    preload auto(预先加载视频) 规定是否预加载视频（如果有了autoplay，就忽略该属性）

    ​ none(不应加载视频）

    src url 视频url地址

    poster imgurl 加载等待的画面图片

    muted muted 静音播放

  • 音频：

  • 音频—常见属性

    属性 值 描述

    autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。

    controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

    loop loop 如果出现该属性，则每当音频结束时溪红心开始播放。

    src url 要播放的音频的URL。

    • 谷歌浏览器把音频和视频自动播放禁止了。

  • 多媒体标签总结

    • 音频标签和视频标签使用方法基本一直。

    • 浏览器支持情况不同。

    • 谷歌浏览器把音频和视频自动播放禁止了。

    • 我们可以给视频标签添加muted属性来经营播放视频，音频不可以（可以通过JavaScript来解决）。

    • 视频标签市重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性。

• 1.3-HTML5新增的input类型

  属性值 说明

  type=“email” 限制用户输入必须为email类型

  type=“url” 限制用户输入必须为URL类型

  type=“date” 限制用户输入必须为日期类型

  type=“time” 限制用户输入必须为时间类型

  type=“month” 限制用户输入必须为月类型

  type=“week” 限制用户输入必须为周类型

  type=“number” 限制用户输入必须为数字类型

  type=“tel” 手机号

  type=“search” 搜索框

  type=“color” 生成一个颜色选择表单

  **重点记住：number、tel、search这三个。

• 1.4-HTML5新增的表单属性

  属性 值 说明

  required required 表单拥有该属性，表示其内容不能为空，必填。

  placeholder 提示文本 表单的提示信息，存在默认值将不显示。

  autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定的表单。

  autocomplete off/on 当用户在字段开始键入是，浏览器基于之前键入过的值，应该显示出在字段中 填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete=“off”，需要放在表单内，同事加上name属性，同时成功提交。

  multiple multiple 可以多选文件提交。

  可以通过一下设置方式修改placeholder里面的字体颜色。

  • input::placeholder {

    color: pink

    }

16.2-CSS3的新特性

• 2.1-CSS3的现状

  • 新增的CSS3特性有兼容性问题，IE9+才支持。

  • 移动端支持由于PC端。

  • 不断改进中。

  • 应用相对广泛。

  • 现阶段主要学习：新增选择器和盒子模型以及其他特性。

• 2.2-CSS3新增选择器

  CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

  • 1、属性选择器

    属性选择器可以根据元素特定的属性来选择元素。这样就可以不借助类或者id选择器。

    选择符 简介

    E[att] 选择具有att属性的E元素。

    E[att=“val”] 选择具有att属性且属性值等于val的E元素。

    E[att∧=“val”] 匹配具有att属性且值以val开头的E元素。

    E[att$=“val”] 匹配具有att属性且值以val结尾的E元素。

    E[att*=“val”] 匹配具有att属性且值中包含val的E元素。

    类、伪类、属性 权重都是10

  • 2、结构伪类选择器

    结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。

    选择符 简介

    E:first-child 匹配父元素中的第一个子元素E。

    E:last-child 匹配父元素中最后一个E元素。

    E:nth-child（n） 匹配父元素中的第n个子元素E。

    E:first-of-type 指定类型E的第一个。

    E:last-of-type 指定类型E的最后一个。

    E:nth-of-type(n) 指定类型E的第n个。

    区别：

    • nth-child对父元素里面所有孩子选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配。
    • nth-of-type随附元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找到第n个孩子。

    **nth-child（n）**选择某个父元素的一个或多个特定的子元素。

    • n可以是数字、关键字或公式。
    • n如果是数字，就是选择第n个子元素，里面数字从1开始…
    • n可以是关键字：even偶数，odd奇数。
    • n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）。

  • 3、结构伪类选择器小结：

    • 结构伪类选择器一般用于选择父级里面的第几个孩子。

    • nth-child对父元素里面所有孩子排序选择（序是固定的）先找到第n个孩子，然后看看是否和E匹配。

    • nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子。

    • 关于nth-child（n）我们要知道n是从0开始计算的，要记住常用的公式。

    • 如果是无需列表，我们肯定用nth-child更多。

    • 类选择器、属性选择器、伪类选择器，权重均为10。

• 2.3-伪元素选择器（重点）

  伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

  选择符 简介

  ::before 在元素内部的前面插入内容。

  ::after 在元素内部的后面插入内容。

  注意:

  • before 和 after创建一个元素，但是属于行内元素。
  • 新创建的这个元素在文档树种是找不到的，所以我们称为伪元素。
  • 语法：element::before{}
  • before 和 after 必须有content属性。
  • before 在父元素内容的前面插入元素，after在父元素内容的后面插入元素。
  • 伪元素选择器和标签选择器一样，权重为1。

  伪元素选择器使用场景1：伪元素字体图标。

  伪元素选择器使用场景2：仿土豆遮罩效果。

  伪元素选择器使用场景3：伪元素清除浮动。

  • 1、额外标签法也称为隔墙法，W3C推荐的做法。

    • 最后一个盒子后面添加新盒子，新盒子属性{clear: both}，要求这个新的空标签必须是块级元素。

  • 2、父级添加overflow属性。

  • 3、父级添加after伪元素。

  • 4、父级添加双伪元素。

16.3-CSS3盒子模型

CSS3中可以通过box-sizing来指定盒子模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方法就发生了改变。

• 可以分成两种情况：
  • 1、box-sizing：content-box 盒子大小为width + padding + border （以前默认的）。
  • 2、box-sizing：border-box 盒子大小为width。
• 如果盒子模型我们该为了box-sizing：border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

16.4-CSS3其他特性（了解）

一、CSS3滤镜filter：

• filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

二、CSS3 calc函数：

• calc()此CSS函数让你声明CSS属性值时执行一些计算。

  括号里面可以使用 + - * /来进行计算。

三、CSS3还增加了一些动画 、2D 、3D等新特性。

四、CSS3过渡（重点）

• 过渡（transition）是CSS3中最具有颠覆性的特征之一，我们可以不使用flas或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

• 过渡动画：是从一个状态渐渐的过渡到另外一个状态。

• 可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（IE9以下版本）但是不会影响页面布局。

• 我们现在经常和 :hover一起搭配使用。

  • 1.属性：想要变化的CSS属性，宽度、高度。背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
  • 2.花费时间：单位是秒（必须写单位）比如0.5s。
  • 3.运动曲线：默认是ease（可以省略）。
  • 4.何时开始：单位是秒（必须写单位）可以设置延迟出发时间 默认是0s（可以省略）。

• 记住过渡的使用口诀：谁做过度给谁加。

16.5-广义的HTML5

• 1、广义的HTML5是HTML5本身 + CSS3 + JavaScript。

• 2、这个有时称为HTML5和朋友，通常缩写为HTML5。

• 3、虽然HTML5的一些特性仍然不被某写浏览器支持，但它是一种发展趋势。

• 4、HTML5 MDN介绍：

  https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

十七、PC端品优购项目

目标：

• 能够独立完成品优购首页制作。
• 能够独立完成品优购列表制作。
• 能够独立完成品优购注册页制作。
• 能够把品优购网站部署上线。

目录：

• 品优购项目规划。
• 品优购首页制作。
• 品优购列表页制作。
• 品优购注册页制作。
• 域名注册与网站上传。

网站制作流程

• 1、客户沟通、制定方案。
• 2、签订合同。
• 3、预付定金。
• 4、初稿审核。
• 5、前台页面设计、后台功能开发。
• 6、测试验收。
• 7、上线培训。
• 8、后期维护。

品优购项目规划

• 1、品优购项目整体介绍。
  • 项目名称：品优购。
  • 项目描述：品优购是一个电商网站我们要完成PC端首页、列表页、注册页面的制作。
• 2、品优购项目学习目的。
  • 1.电商类网站比较综合，里面需要大量的布局拘束，包括布局方式，常见效果以及周边技术。
  • 2.品优购项目能复习、总结、提高之前所学布局技术。
  • 3.写完品优购项目，能对实际开发中制作PC端页面流程有一个整体的感知。
  • 4.为后期学习移动端项目做铺垫。
• 3、开发工具以及技术栈。
  • 1.开发工具
    • vscode、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）。
  • 2.技术栈
    • 利用HTML5 + CSS3手动布局，可以大量使用HTML5新增标签和样式。
    • 采取结构与样式相分离，模块化开发。
    • 良好的代码规范有力与团队更好的开发协作，提高代码质量。

总结

• 1、品优购项目整体介绍（制作首页、列表页、注册页三个页面）。
• 2、品优购项目学习目的（里面包含技术较多，能极大锻炼我们布局技术）。
• 3、开发工具以及技术栈（切图PS，代码用vscode，测试用Chrome，大量使用HTML5 + CSS3）。

1-品优购项目搭建工作

• 1.需要创建文件夹

  名称 说明

  项目文件夹 shoping

  样式类图片文件夹 images

  样式文件夹 css

  产品图片文件夹 upload

  字体类文件夹 fonts

  脚本文件夹 js

• 2.需要创建如下文件夹

  名称 说明

  首页 index.html

  CSS初始化样式文件 base.css

  CSS公共样式文件 common.css

• 3.模块化开发

  • 所谓的模块化：讲一个项目按照功能划分，一个功能一个模块，互不影响。

  • 模块化开发具有重复使用，更换方便等优点。

  • 有些样式和结构在很多方面都会出现，比如页面头部和底部，大部分页面都有。此时，可以吧这些结构和样式单独作为一个模块，然后重复使用。

  • 这里最典型的应用就是common.css公共样式。写好一个样式，其余的页面用到这些相同的样式。

    • common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。

• 4.网站

• 5.网站favicon图标

  favicon.ico一般用于作为缩略的网站图标，它显示在浏览器的地址栏或者标签上。

  目前主要的浏览器都支持favicon.ico图标。

  • 一、制作favicon图标。

    • 把品优购图标切成png图片。

    • 把PNG图片转为ico图标，这需要借助于第三方转换网站，例如 比特虫：http://www.bitbug.net/

  • 二、favicon图标放到网站根目录下。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JkXJbzSk-1620312154124)(D:丁娜娜软件Typora笔记image-20210504194324032.png)]

  • 三、HTML页面引入favicon图标。

    • 在HTML页面里的元素之间引入代码。

  • 四、网站TDK三大标签SEO优化。

    • SEO (Search Engine Optimization) 汉译为搜索引擎优化。是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

    • SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

    • 页面必须有三个标签用来复合SEO优化。

      • title + description + keyword

      • 1.title网站标题

        • title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主体归属的最佳判断点。
        • 建议：网站名（产品名）- 网站介绍（尽量不要超过30个汉字）
        • 例如：
          • 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
          • 小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站。

      • 2.description 网站说明

        • 简单说明我们网站主要是做什么的？

        • 我们提倡，description作为网站的总体业务和主体概括，多采用 “我们是…”、“我们提供…”、"***网作为…"、“电话：010…” 之类语句。

        • 例如：

      • 3.keyword关键字

        • keyword是页面关键词，是搜索引擎的关注点之一。

        • keyword最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1，关键词2的形式。

        • 例如：

  2-品优购首页制作

  网站的首页一般都是使用 Index 命名，比如 index.html 或者 index.php。

  我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到 common.css里面。

  2.1-常用模块类名

  以下使我们约定的命名模块

  名称 说明

  快捷导航栏 shortcut

  头部 header

  标志 logo

  购物车 shopcar

  搜索 search

  热点词 hotwords

  导航 nav

  导航左侧 dropdown 包含 .dd .dt

  导航右侧 navitems

  页面底部 footer

  页面底部服务模块 mod_service

  页面底部帮助模块 mod_help

  页面底部版权模块 mod_copyright

  2.2-快捷导航shortcut制作

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ik1yesS-1620312154144)(D:丁娜娜软件Typora笔记image-20210504210741136.png)]

  • 通栏的盒子命名为shortcut，是快捷导航的意思。注意这里的行高，可以继承给里面的子盒子。
  • 里面包含版心的盒子
  • 版心盒子里面包含左侧盒子左浮动、右侧盒子右浮动。

  2.3-header制作

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zo5WdtNd-1620312154150)(D:丁娜娜软件Typora笔记image-20210504210543719.png)]

  • header盒子必须要有高度。
  • 1号盒子是logo标志定位。
  • 2号盒子是search搜索模块定位。
  • 3号盒子是hotwords热搜模块定位。
  • 4号盒子是shopcar购物车模块。
    • count统计部分采用绝对定位做。
    • count统计部分不要给宽度，因为可能买的件数买的比较多，让件数撑开就好了，给个高度。
    • 一定注意左下角不是圆角，其余三个是圆角。写法：border-radius:7px 7px 7px 0;

  logo SEO优化

  • 1、logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
  • 2、h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。
  • 3、为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。
    • 方法1：text-align移到盒子外面(text-indent:-9999px),然后overflow:hidden，淘宝的做法。
    • 方法2：直接给font-size：0；就看不到文字了，京东的做法。
  • 4、做后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了。

  2.4-nav导航制作

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nrh045RN-1620312154154)(D:丁娜娜软件Typora笔记image-20210504225241435.png)]

  • nav盒子通栏高度，而且有个下边框。
  • 左边盒子左浮动，dropdown。
  • 右边盒子左浮动，navitems导航栏组。
  • 左边盒子有讲究，根据相关性 里面包含 .dt 和 .dd 两个盒子。

  2.5-footer底部制作

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dwdLJiap-1620312154158)(D:丁娜娜软件Typora笔记image-20210505002115596.png)]

  • footer页面底部盒子通栏给一个高度和灰色的背景。
  • footer页面有一个大的版心。
  • 版心里面包含上面盒子，mod-service是服务模块，mod是模块的意思。
  • 版心里面包含中建合资，mod-help是帮助模块。
  • 版心里面包含下面盒子，mod-copyright是版权模块。

  2.6-main主体模块制作

  以前书写的就是模块化中的公共部分。

  main 主体模块是index里面专有的，注意需要信的样式文件index.css。

  • main盒子宽度为980像素，位置距离左边220xp(margin-left)，给高度就不用了清除浮动。
  • main里面包含左侧盒子，左浮动，focus焦点图模块。
  • main里面包含右侧盒子，右浮动，newflash新闻快报模块。

  newflash新闻快报模块

  • 上面盒子为news新闻模块 高度为165px。
  • 中间盒子为lifeservice生活服务模块 高度为209px。
  • 下面盒子bargain特价商品。

  2.7-推荐模块制作

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9RvYEgsS-1620312154160)(D:丁娜娜软件Typora笔记image-20210505014527418.png)]

  • 大盒子recommend 推荐模块 recommend。
  • 里面包含2个盒子，浮动即可。
  • 左边盒子recommend-head。
  • 又扁盒子recommend-body，注意里面的小竖线。

  2.8-楼层floor制作

  注意这个floor，不要给高度，内容有多少，算多少。

  2.9-列表页准备工作

  • 1、列表页面是新的页面，我们需要新建页面文件list.html。
  • 2、因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构过来。
  • 3、头部和底部的样式也需要，因此list.html中还需要引入common.css。
  • 4、需要新的list.css样式文件，这是列表页专门的样式文件。

  2.10-注册页面命名

  • 注册页面：register.html

  • 注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

  • 名称 说明

    注册专区 registerarea

    注册内容 reg-form

    错误的 error

    成功的 success

    默认的 default

十八、web服务器

18.1-什么是web服务器

• 服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据服务器、应用程序服务器、web服务器等。

• web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据，让全世界下载。

• 一下服务器我们主要指的是web服务器。

• 根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

18.2-本地服务器

• 我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的同学就可以访问你的品优购网站了。学Ajax时再讲。

18.3-远程服务器

• 本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。

• 远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。

• 比如域名：www.mi.com 可以访问小米网站。

总结

1、服务器就是一台电脑，因为我们主要是做网站，所以我们主要使用web服务器。

2、服务器可以分为本地服务器和远程服务器。

3、远程服务器是别的公司为我们提供了一台计算机。

4、我们可以吧网站上传到远程服务器里面，别人就可以通过域名访问我们的网站了。

18.4-将自己的网站上传到远程服务器

• 注意：一般稳定的服务器都是需要收费大的。比如：阿里云。

• 这里推荐一个免费的远程服务器（免费空间） http://free.3v.do/

  • 1、去免费空间注册账号。
  • 2、记录下主机名、用户名、密码、域名。
  • 3、利用cuteftp软件 上传网站到远程服务器。
  • 4、在浏览器输入域名，即可访问我们品优购网站了。

十九、课程总结

1、HTML我们学的就是常用标签，就是基本盒子。

2、css就是用来美化布局网页。

3、HTML + CSS是没有逻辑可言的，基本就是搭积木百合子的过程，需要的是耐心。

4、现在最困难的是布局结构，欠缺分析页面布局的能力。

5、同一个模块，有很多布局方式，能做出来就是好的。

6、多看别人写的页面，模仿人家的布局、每次写页面总会有收获。

7、错误总是在所难免，一定学会利用Chrome调试工具，他们能快速帮我们排查错误，需要耐心。