HTML + CSS详解 | lveMonsiのBlog

type

status

date

slug

summary

HTML + CSS 详解

黑马程序员前端Web开发HTML5+CSS3+移动web视频教程

阶段目标：掌握HTML、CSS常用布局技巧，能够独立制作网页。

day01：HTML 基础

目标：掌握标签基本语法，能够独立布局文章页。

01-今日课程介绍

今日目标：掌握标签基本语法，能够独立布局文章页。

核心技术点

网页组成

排版标签

多媒体标签及属性

综合案例一 - 个人简介

综合案例二 - Vue 简介

02-标签语法

HTML 超文本标记语言——HyperText Markup Language。

超文本：链接

标记：标签，带尖括号的文本

标签结构

标签要成对出现，中间包裹内容

<>里面放英文字母（标签名）

结束标签比开始标签多 /

标签分类：双标签和单标签

03-HTML骨架

html：整个网页

head：网页头部，用来存放给浏览器看的信息，例如 CSS

title：网页标题

body：网页主体，用来存放给用户看的信息，例如图片、文字

提示
VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

04-标签的关系

作用：明确标签的书写位置，让代码格式更整齐

父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

兄弟关系（并列关系）：兄弟标签换行要对齐

05-注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

06-标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

显示特点：

文字加粗

字号逐渐减小

独占一行（换行）

经验
h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
h2 ~ h6 没有使用次数的限制

07-段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

显示特点：

独占一行

段落之间存在间隙

08-换行和水平线

换行：br

水平线：hr

09-文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

提示：strong、em、ins、del 标签自带强调含义（语义）。

10-图像标签

作用：在网页中插入图片

src用于指定图像的位置和名称，是 <img> 的必须属性。

图像属性

属性语法

属性名="属性值"

属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

11-路径

概念：路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

相对路径：从当前文件位置出发查找目标文件

绝对路径：从盘符出发查找目标文件

Windows 电脑从盘符出发
Mac 电脑从根目录出发

相对路径

查找方式：从当前文件位置出发查找目标文件

特殊符号：

/ 表示进入某个文件夹里面 → 文件夹名/

*. ** 表示当前文件所在文件夹 → ./

.. 表示当前文件的上一级文件夹 → ../

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

提示
Windows 默认是 \ ，其他系统是 /，建议统一写为 /
特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接

12-超链接标签

作用：点击跳转到其他页面。

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

13-音频

常用属性

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

14-视频

常用属性

15-综合案例一-个人简介

网页制作思路：从上到下，先整体再局部，逐步分析制作
分析内容 → 写代码 → 保存 → 刷新浏览器，看效果

16-综合案例二-Vue简介

day02：列表、表格、表单

目标：掌握嵌套关系标签的写法，使用列表标签布局网页

01-列表

作用：布局内容排列整齐的区域。

列表分类：无序列表、有序列表、定义列表。

无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

注意事项：
ul 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容

有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

注意事项：
ol 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容

定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

注意事项：
dl 里面只能包含dt 和 dd
dt 和 dd 里面可以包含任何内容

02-表格

网页中的表格与 Excel 表格类似，用来展示数据。

基本使用

标签：table 嵌套 tr，tr 嵌套 td / th。

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

表格结构标签-了解

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

提示：表格结构标签可以省略。

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

合并单元格的步骤：

明确合并的目标

保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并，保留最上单元格，添加属性 rowspan

跨列合并，保留最左单元格，添加属性 colspan

删除其他单元格

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。

03-表单

作用：收集用户信息。

使用场景：

登录页面

注册页面

搜索区域

input 标签

input 标签 type 属性值不同，则功能不同。

input 标签占位文本

占位文本：提示信息，文本框和密码框都可以使用。

单选框

常用属性

提示：name 属性值自定义。

上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

多选框

多选框也叫复选框，默认选中：checked。

下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

默认显示第一项，selected 属性实现默认选中功能。

文本域

作用：多行输入文本的表单控件。

注意点：
实际开发中，使用 CSS 设置文本域的尺寸
实际开发中，一般禁用右下角的拖拽功能

label 标签

作用：网页中，某个标签的说明文本。

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

写法一

label 标签只包裹内容，不包裹表单控件
设置 label 标签的 for 属性值和表单控件的 id 属性值相同

写法二：使用 label 标签包裹文字和表单控件，不需要属性

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮

提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。

04-语义化

无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

div：独占一行

span：不换行

有语义的布局标签

05-字符实体

06-综合案例一-体育新闻列表

07-综合案例二-注册信息

day03-CSS基础

目标：掌握 CSS 属性基本写法，能够使用文字相关属性美化文章页。

01-CSS初体验

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

提示：属性名和属性值成对出现 → 键值对。

02-CSS引入方式

内部样式表：学习使用

CSS 代码写在 style 标签里面

外部样式表：开发使用

CSS 代码写在单独的 CSS 文件中（.css）
在 HTML 使用 link 标签引入

行内样式：配合 JavaScript 使用

CSS 写在标签的 style 属性值里

03-选择器

作用：查找标签，设置样式。

标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。

例如：p, h1, div, a, img......

注意：标签选择器无法差异化同名标签的显示效果。

类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

定义类选择器 → .类名

使用类选择器 → 标签添加 class="类名"

注意：

类名自定义，不要用纯数字或中文，尽量用英文命名

一个类选择器可以供多个标签使用

一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。

id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

定义 id 选择器 → #id名

使用 id 选择器 → 标签添加 id= "id名"

规则：同一个 id 选择器在一个页面只能使用一次。

通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。

04-盒子尺寸和背景色

05-文字控制属性

字体样式（是否倾斜）

作用：清除文字默认的倾斜效果

属性名：font-style

属性值

正常（不倾斜）：normal

倾斜：italic

行高

作用：设置多行文本的间距

属性名：line-height

属性值

数字 + px

数字（当前标签font-size属性值的倍数）

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

单行文字垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

字体族

属性名：font-family

属性值：字体名

拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体

font复合属性

使用场景：设置网页文字公共样式

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜是否加粗字号/行高字体（必须按顺序书写）

注意：字号和字体值必须书写，否则 font 属性不生效。

文本缩进

属性名：text-indent

属性值：

数字 + px

数字 + em（推荐：1em = 当前标签的字号大小）

文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

文本修饰线

属性名： text-decoration

color 文字颜色

提示：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色。

06-调试工具

作用：检查、调试代码；帮助程序员发现代码问题、解决问题

打开调试工具

浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查

使用调试工具

07-综合案例一-新闻详情

网页制作思路：

从上到下，先整体再局部

先标签，再 CSS 美化

HTML标签

CSS样式

08-综合案例二-CSS简介

HTML标签

CSS样式

day04-CSS进阶

目标：掌握复合选择器作用和写法；使用background属性添加背景效果

01-复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

后代选择器

后代选择器：选中某元素的后代元素。

选择器写法：父选择器子选择器 { CSS 属性}，父子选择器之间用空格隔开。

子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。

选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

交集选择器

交集选择器：选中同时满足多个条件的元素。

选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover { CSS 属性 }

超链接伪类

提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。
经验：工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置

02-CSS特性

CSS特性：化简代码 / 定位问题，并解决问题

继承性

层叠性

优先级

继承性

继承性：子级默认继承父级的文字控制属性。

注意：如果标签有默认文字样式会继承失败。例如：a 标签的颜色、标题的字体大小。

层叠性

特点：

相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性

不同的属性会叠加：不同的 CSS 属性都生效

注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

基础选择器

规则：选择器优先级高的样式生效。

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

复合选择器-叠加

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

公式：（每一级之间不存在进位）

规则：

从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较

!important 权重最高

继承权重最低

03-Emmet 写法

Emmet写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。

HTML标签

CSS：大多数简写方式为属性单词的首字母

04-背景属性

背景图

网页中，使用背景图实现装饰性的图片效果。

属性名：background-image（bgi）

属性值：url(背景图 URL)

提示：背景图默认有平铺（复制）效果。

平铺方式

属性名：background-repeat（bgr）

背景图位置

属性名：background-position（bgp）

属性值：水平方向位置垂直方向位置

关键字

坐标

水平：正数向右；负数向左
垂直：正数向下；负数向上

提示：
关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值：

关键字

cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白

百分比：根据盒子尺寸计算图片大小

数字 + 单位（例如：px）

提示：工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。

背景图固定

作用：背景不会随着元素的内容滚动。

属性名：background-attachment（bga）

属性值：fixed

背景复合属性

属性名：background（bg）

属性值：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定（空格隔开各个属性值，不区分顺序）

05-显示模式

显示模式：标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

块级元素

特点：

独占一行

宽度默认是父级的100%

添加宽高属性生效

行内元素

特点：

一行可以显示多个

设置宽高属性不生效

宽高尺寸由内容撑开

行内块元素

特点：

一行可以显示多个

设置宽高属性生效

宽高尺寸也可以由内容撑开

转换显示模式

属性：display

06-综合案例一-热词

HTML标签

CSS样式

07-综合案例二 – banner 效果

HTML标签

CSS样式

day05-盒子模型

目标：掌握盒子模型组成部分，使用盒子模型布局网页区域

01-选择器

结构伪类选择器

基本使用

作用：根据元素的结构关系查找元素。

:nth-child(公式)

提示：公式中的n取值从 0 开始。

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

注意点：

必须设置 content: ””属性，用来设置伪元素的内容，如果没有内容，则引号留空即可

伪元素默认是行内显示模式

权重和标签选择器相同

02-PxCook

PxCook（像素大厨）是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

开发面板（自动智能识别）

设计面板（手动测量尺寸和颜色）

使用方法：创建项目 → 输入项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿

03-盒子模型

作用：布局网页，摆放盒子和内容。

盒子模型-组成

内容区域 – width & height

内边距 – padding（出现在内容与盒子边缘之间）

边框线 – border

外边距 – margin（出现在盒子外面）

边框线

四个方向

属性名：border（bd）

属性值：边框线粗细线条样式颜色（不区分顺序）

单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

属性值：边框线粗细线条样式颜色（不区分顺序）

内边距

作用：设置内容与盒子边缘之间的距离。

属性名：padding / padding-方位名词

提示：添加 padding 会撑大盒子。

padding 多值写法

技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

尺寸计算

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会撑大盒子

解决：

手动做减法，减掉 border / padding 的尺寸

內减模式：box-sizing: border-box

外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同

版心居中

左右 margin 值为 auto（盒子要有宽度）

清除默认样式

清除标签默认的样式，比如：默认的内外边距。

元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

外边距问题

合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

外边距塌陷

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动

解决方法：

取消子级margin，父级设置padding

父级设置 overflow: hidden

父级设置 border-top

行内元素 – 内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

提示：属性值是圆角半径

多值写法

技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%

胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半

盒子阴影（拓展）

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影

注意：

X 轴偏移量和 Y 轴偏移量必须书写

默认是外阴影，内阴影需要添加 inset

04-综合案例-产品卡片

CSS 书写顺序：

盒子模型属性

文字样式

圆角、阴影等修饰属性

HTML标签

CSS样式

05-综合案例二 – 新闻列表

整体布局

标题区域

内容区域

day06-Flex布局

目标：熟练使用 Flex 完成结构化布局

01-标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

02-浮动

基本使用

作用：让块元素水平排列。

属性名：float

属性值

left：左对齐

right：右对齐

特点：

浮动后的盒子顶对齐

浮动后的盒子具备行内块特点

浮动后的盒子脱标，不占用标准流的位置

产品区域布局

HTML标签

CSS样式

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

场景搭建

额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

单伪元素法

准备 after 伪元素

父级使用 clearfix 类

双伪元素法

准备 after 和 before 伪元素

父级使用 clearfix 类

overfow法

03-Flex布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

Flex组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器

弹性盒子

主轴：默认在水平方向

侧轴 / 交叉轴：默认在垂直方向

主轴对齐方式

属性名：justify-content

侧轴对齐方式

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值

wrap：换行

nowrap：不换行（默认）

行内对齐方式

属性名：align-content

注意：该属性对单行弹性盒子模型无效。

04-综合案例 – 抖音解决方案

整体布局

列表布局

内容样式

day07-学成在线

01-项目目录

网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。

首页引入CSS文件

02-版心居中

03-布局思路

布局思路：先整体再局部，从外到内，从上到下，从左到右

CSS 实现思路

画盒子，调整盒子范围 → 宽高背景色
调整盒子位置 → flex 布局、内外边距
控制图片、文字内容样式

04-header区域-整体布局

HTML结构

CSS样式

05-header区域-logo

logo 功能：

单击跳转到首页

搜索引擎优化：提升网站百度搜索排名

实现方法：

标签结构：h1 > a > 网站名称（搜索关键字）

CSS 样式

06-header区域-导航

实现方法：

标签结构：ul > li * 3 > a

优势：避免堆砌 a 标签，网站搜索排名降级

HTML结构

CSS样式

07-header区域-搜索布局

HTML结构

CSS样式

08-header区域-搜索内容

HTML结构

CSS样式

09-header区域-用户区域

HTML结构

CSS样式

10-banner区域-布局

HTML结构

CSS样式

11-banner区域-侧导航

HTML结构

CSS样式

12-banner区域-课程表布局

HTML布局

CSS样式

13-banner区域-课程表内容

HTML结构

CSS样式

14-banner区域-全部课程

HTML结构

CSS样式

15-精品推荐-区域布局

HTML结构

CSS样式

16-精品推荐-内容样式

HTML结构

CSS样式

17-推荐课程-标题区域

HTML结构

CSS样式

18-推荐课程-内容布局

HTML结构

CSS样式

19-推荐课程-内容样式

HTML结构

CSS样式

20-前端开发工程师区域

HTML结构

CSS样式

21-版权-布局

HTML结构

CSS样式

22-版权-内容

HTML结构

CSS样式

day08-CSS高级

目标：掌握定位的作用及特点；掌握 CSS 高级技巧

01-定位

作用：灵活的改变盒子在网页中的位置

实现：

1.定位模式：position

2.边偏移：设置盒子的位置

left

right

bottom

相对定位

position: relative

特点：

不脱标，占用自己原来位置

显示模式特点保持不变

设置边偏移则相对自己原来位置移动

绝对定位

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

脱标，不占位

显示模式具备行内块特点

设置边偏移则相对最近的已经定位的祖先元素改变位置

如果祖先元素都未定位，则相对浏览器可视区改变位置

定位居中

实现步骤：

绝对定位

水平、垂直边偏移为 50%

子级向左、上移动自身尺寸的一半

左、上的外边距为 –尺寸的一半

transform: translate(-50%, -50%)

固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

脱标，不占位

显示模式具备行内块特点

设置边偏移相对浏览器窗口改变位置

堆叠层级z-index

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：整数数字（默认值为0，取值越大，层级越高）

02-高级技巧

CSS精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同

设置盒子背景图为精灵图

添加 background-position 属性，改变背景图位置

案例-京东服务

HTML结构

CSS样式

字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点

灵活性：灵活地修改样式，例如：尺寸、颜色等

轻量级：体积小、渲染快、降低服务器请求次数

兼容性：几乎兼容所有主流浏览器

使用方便：先下载再使用

下载字体

iconfont 图标库：https://www.iconfont.cn/

使用字体

引入字体样式表（iconfont.css）

标签使用字体图标类名

iconfont：字体图标基本样式（字体名，字体大小等等）

icon-xxx：图标对应的类名

上传矢量图

作用：项目特有的图标上传到 iconfont 图标库，生成字体

上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核

03-CSS修饰属性

垂直对齐方式

属性名：vertical-align

过渡

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性花费时间 (s)

提示：

过渡的属性可以是具体的 CSS 属性

也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）

transition 设置给元素本身

透明度opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0 – 1

0：完全透明（元素不可见）

1：不透明

0-1之间小数：半透明

光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

04-综合案例-轮播图

图片效果

HTML结构

CSS样式

箭头

HTML结构

CSS样式

圆点

HTML结构

CSS样式

day09-小兔鲜儿

01-搭建项目目录

xtx-pc

images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
iconfont 文件夹：字体图标素材
css 文件夹：存放 CSS 文件（link 标签引入）

base.css：基础公共样式
common.css：各个网页相同模块的重复样式，例如：头部、底部
index.css：首页 CSS 样式

index.html：首页 HTML 文件

引入样式表

02-网页头部SEO三大标签

SEO：搜索引擎优化，提升网站百度搜索排名

提升SEO的常见方法：

竞价排名

将网页制作成html后缀

标签语义化（在合适的地方使用合适的标签）

……

网页头部 SEO 标签：

title：网页标题标签

description：网页描述

keywords：网页关键词

03-Favicon图标

Favicon 图标：网页图标，出现在浏览器标题栏，增加网站辨识度。

图标：favicon.ico，一般存放到网站的根目录里面

04-版心

common.css

05-快捷导航-布局

HTML结构

CSS样式

06-快捷导航-内容

HTML结构

CSS样式

07-头部-布局

HTML结构

CSS样式

08-头部-logo

HTML结构

CSS样式

09-头部-导航

HTML结构

CSS样式

10-头部-搜索

HTML结构

CSS样式

11-头部-购物车

HTML结构

CSS样式

12-底部-布局

HTML结构

CSS样式

13-底部-服务区域

HTML结构

CSS结构

14-底部-帮助中心-左侧

HTML结构

CSS样式

15-底部-帮助中心-右侧

HTML结构

CSS样式

16-底部-版权

HTML结构

CSS样式

day10-小兔鲜儿

01-banner-轮播图

index.css

HTML结构

CSS样式

02-banner-侧导航

HTML结构

CSS样式

03-banner-圆点指示器

HTML结构

CSS样式

04-新鲜好物-标题

考虑公共样式