HTML5+CSS3基础

最新推荐文章于 2023-07-27 20:47:22 发布

blink555

最新推荐文章于 2023-07-27 20:47:22 发布

阅读量4.6k

点赞数 16

分类专栏：前端基础文章标签： html css3

本文链接：https://blog.csdn.net/weixin_44325613/article/details/108838291

版权

前端基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

HTML
CSS

HTML

网页

什么是网页

网站是网页集合

网页是网站的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读

网页是构成网站的基本元素，它通常由图片、连接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.html或.html后缀结尾的文件，因此也称为HTML文件

网页是由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的
什么是HTML

HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。

HTML不是一种编程语言，而是一种标记语言(markup language)

标记语言是一套标记标签(markup tag)

所谓超文本，有2层含义:

1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)

2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接(超链接文本)

常用浏览器

IE/Edg
火狐(Firefox)
谷歌(Chrome)
Safari

Opera

浏览器内核

浏览器内核(渲染引擎):负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera	Blink	chrome/opera浏览器。Blink其实是Webkit的分支

目前国内一般浏览器一般都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等

Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织

为什么需要Web标准

浏览器不同，他们显示页面或排版就有些许差异

通过Web标准，不同浏览器展示统一内容

Web标准的构成

主要包括结构(Structure)、**表现(Presentation)和行为(Behavior)**三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式，颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript

Web标准提出的最佳体验方案:结构、样式、行为分离

简单理解:结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

HTML语法规范

基本语法概述

HTML标签是由尖括号包围的关键字，例如
HTML标签通常是成对出现，例如和，我们称为双标签。标签对中第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签，例如
，我们称为单标签

标签关系

双标签关系可以分为两类:包含关系和并列关系

包含关系
```
<head>
	<title></title>
</head>
```
并列关系
```
<head> </head>
<body> </body>
```

HTML基本结构标签

第一个HTML网页

每个网页都会有一个基本的结构标签(也称为骨架标签)，页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档.

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        量变则质变
    </body>
</html>

每个网页都会有一个基本的标签结构（骨架标签），页面内容也是在这些基本标签上书写。

标签名	定义	说明
	HTML标签	页面中最大的标签，我们称为根标签
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	让页面拥有一个属于自己的网页标题
	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面

HTML文档的后缀必须是.html或.htm,浏览器的作用是读取HTML文档，并以网页的形式显示出他们。

开发工具

DreamWeaver
WebStorm
HBuild
Visual Studio Code

VSCode使用

生成页面骨架结构

输入!，按下Tab键

DOCTYPE和lang以及charset字符集的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>/title>
</head>
<body>

</body>
</html>

!DOCTYPE
**文档类型声明**，作用就是告诉浏览器使用哪种HTML版本来显示网页
```
<!DOCTYPE html>
```
这句代码意思是:当前页面采取的是HTML5版本来显示网页

注意:
1. 声明位于文档中的最前面的位置，处于标签之前。
  </!doctype>
2. 不是一个标签，它就是 **文档类型声明标签**
lang语言种类

用来定义当前文档显示的语言
1. en定义语言为英文
2. zh-CN定义语言为中文
  
  简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页。
字符集

字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码
```
<meta charset="UTF-8"/>
```
charset常用的值有:GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码，基本包含所有国家需要用到的字符.

注意: 上面语法必是不许要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"UTF-8"，不要写成"utf8"或"UTF8"

HTML常用标签

标题标签

概括

为了使网页更具有语义化，通常会使用到标题标签，HTML提供了6个等级。即
–
```
<h1>我是一级标题</h1>
```
单词head的缩写，意为头部，标题

**标签语义:**作为标题使用，并且依据重要性递减

特点：
1. 加了标题的文字会变得加粗，字号也会依次变大
2. 一个标题独占一行

实例

    <h1>标题标签一共六级</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

段落标签与换行标签

段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，
标签用于定义段落，它可以将这个网页分为若干段落。
```
<p>我是一个段落标签</p>
```
单词paragraph的缩写，意为段落。

**标签语义:**可以把HTML文档分割成若干段落。

特点：
1. 文本在一个段落中会根据浏览器的窗口的大小自动换行
2. 段落与段落之间保有空隙
换行标签

在HTML中，一个段落中的文字会从左到右依次排列，知道浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行，就需要使用换行标签
```
<br/>
```
单词break的缩写

**标签语义:**强制换行

特点：
1. 是个单标签。
2. 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

文本格式化标签

**标签语义：**突出重要性，比普通文字重要

语义	标签	说明
加粗	或者	推荐
倾斜	或者	推荐
删除线	或者	推荐
下划线	或者	推荐

div和span标签

div和span是没有语义的，他们就是一个盒子，用来装内容的


<div> BLACK</div>

<span>pink</span>


div是division的缩写，表示分割、分区。span一位跨度、跨距

**特点：**

1. div标签用来布局，但是一行只能放一个div.
2. span用来布局，一行可以多个span






#### 图像标签和路径

1. **图像标签**

在HTML标签中，<img>标签用于定义HTML页面中的图形。

```

单词image的缩写，意为图像

src是标签的必须属性，用于指定图像文件的路径和文件名

图像标签的其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	图像不能显示文字时的替换文本
title	文本	提示文本。鼠标放在图像上，显式的文字
height	像素	设置图像宽度
width	像素	设置图像高度
border	像素	设置图像的边框粗细

说明：

当只设置图像高度/宽度，它的宽度/高度会等比例缩放
图像标签可以拥有多个属性
属性之间不分先后顺序，标签名，属性与属性之间均空格分开
属性采取键值对的形式,属性=“属性值”

路径

目录文件夹和根目录

目录文件夹：就是普通文件夹，存放了做页面所需的相关素材，如html文件，图片等

根目录:打开目录文件夹的第一层就是根目录

路径

页面中的图片非常多，会新建一个文件夹来保存图形文件，这时再查找图片就要采用"路径"的方式制定文件位置

相对路径

以引用文件所在位置为参考基础；而建立出的目录路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如
下一级路径	/	图像文件位于HTML文件下一级，如
上一级目录	…/	图像文件位于HTML文件上一级，如

相对路径是从代码所在的这个文件出发，去寻找目标文件。

绝对路径

绝对路径:是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。

例如: “D:\WEB\img\logo.gif”

或者完整的网络地址"http://www.baidu/image/logo.gif"

超链接

在HTML标签中,标签用于定义超链接，作用是从一个页面连接到另一个页面。

链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图形</a>

单词anchor的所以，意为：锚

两个属性作用

属性	作用
href	用于指定链接目标的url地址，（必须属性）当标签应用href属性时，就具有了超链接的功能
target	用于指定链接页面的打开方式，_self为默认值，_blank为在新窗口中打开

链接的分类
1. 外部链接: 例如百度
2. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。例如
3. 空链接:如果没有确定链接目标时，
4. 下载链接; href里面地址是一个文件或文件压缩包，会下载这个文件
5. 网页元素链接:在网页中的各种网页元素，如文本、图形、表格、音频、视频等都可作为超链接
锚点链接

点击链接，可以快速定位到页面中的某个位置
- 在链接文本的href属性中设置属性值为#名字的形式,如
- 找到目标位置标签,里面添加一个id属性=刚才的名字，如

注释与特殊字符

注释
结束
```
  ctrl+/
```
特殊字符

在HTML页面中，一些特殊符号不能直接使用，用下面字符代替

特殊字符描述
& nbsp;
< & lt;
> & gt;
<p>

©

¥

&

®

5°

特殊字符	描述
	& nbsp;
<	& lt;
>	& gt;

表格标签

主要作用

表格主要用于显示、展示数据。
基本语法
```
<table>
	<tr>
    	<td>单元格内文字</td>
        ···
    </tr>
    ···
</table>
```
1. table用于定义表格的标签
2. tr标签用于定义表格中的行，必须嵌套在table中
3. td用于定义表格中的单元格，必须嵌套在tr中
表头表格标签

一般表头位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

th标签标示HTML表格的表头部分
```
<table>
    <tr>
    	<th>姓名</th>
        ···
    </tr>
    ···
</table>
```

表格属性

属性名	属性值	描述
align	left/center/right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元格是否拥有边框，默认为"",没有边框
cellpadding	像素值	规定单元格边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格与单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

表格结构标签
1. ：用于定义表格的头部,内部必须有标签
2. :用于定义表格的主体，主要用于放数据本体
3. 以上标签都是放在table标签中
合并单元格

特殊情况下，可以把多个单元格合并为一个单元格
1. 合并单元格方式
  - 跨行合并: rowspan=“合并单元格的个数”
  - 跨列合并: colspan=“合并单元格的个数”
2. 目标单元格:(写合并代码)
  
  跨行:最上侧单元格为目标单元格，写合并代码
  
  跨列:最左侧单元格为目标单元格，写合并代码
3. 合并单元格三部曲
  - 先确定是跨行还是跨列
  - 找到目标单元格，写上合并方式=合并单元格数量
  - 删除多余单元格

列表标签

列表就是用布局的

分为三大类:无序列表、有序列表和自定义列表

无序列表
```
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
```
1. 无序列表的各个列表项之间没有顺序级别之分，是并列的
2. ul中只能嵌套li，直接在ul中输入其他标签或文字，无意义
3. li相当于一个容器，可以容纳所有元素
4. 无序列表会带有自己的样式属性，后期通过CSS设置
有序列表
```
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>
```
1. ol中只能嵌套li
2. li相当于一个容器，可容纳所有元素
3. 有序列表带有自己的样式属性，后期CSS设置
自定义列表
```
<dl>
	<dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
<dl>
```
1. dl里面只能包含dt和dd
2. dt和dd个数没有限制，通常一个dt对应多个dd

表单

表单的组成

一个完整的表单通常由表单域、表单控件和提示信息3个部分构成

form会把它范围内的表单元素信息提交给服务器
```
<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>
```
input表单元素

```

input为单标签

type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值及其描述

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
checkbox	定义复选框
file	定义输入和"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

除了type属性，input标签还有很多其他属性

| 属性 | 属性值 | 描述 |
| --------- | ------------ | ------------------------------- |
| name | 由用户自定义 | 定义input元素的名称 |
| value | 有用户自定义 | 规定Input元素的值 |
| checked | checked | 规定此input元素首次加载应当选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
1. name和value是每个表单元素都有的属性值，主要给后台人员使用，当为button/submit/reset时，为按钮上的文字

name表单元素的名字，要求单选按钮和复选框要有相同的name值

checked属性主要针对单选按钮和复选框

input-text

用户名:<input type="text" name="username" />
 ```

input-radio(单选按钮)

<input type="radio" name="sex" checked="checked"/>男
 <input type="radio" name="sex"/>女

label标签

label标签为input元素定义标注

label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到或选择到对应的表单元素上，增加用户体验

<input type="radio" name="sex" id="sex"/> 
 <label for="sex">男</label>
 ```
   
 > **label标签的for属性应当与相关元素的id属性相同**

input-checkbox(复选框)

<input type="checkbox" name="hobby" checked="checked"/>吃饭
 
 <input type="checkbox" name="hobby" />睡觉
 
 <input type="checkbox" name="hobby" />看电视
 
 ```

select下拉表单元素

<select name="location">
    <option value="" selected="selected">选项1</option>
    <option value="">选项2</option>
    <option value="">选项3</option>
</select>

select中至少包含一对option
option中定义selected="selected"时，当前项即为默认选中项

textarea文本域元素

<textarea rows="3" cols="20">
	文本内容
</textarea>

CSS

CSS简介

css是**层叠样式表(Cascading Style Sheets)**的简称.

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

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以"键值对"形式化出现
属性是对指定的对象设置的样式属性
属性与属性值之间用":"分开
多个“键值对”之间用;进行区分

h1 {
	color:red;
	font-zise: 24px;
}

CSS语法规范

所有样式都包含在style标签内，style一般写到/head上方

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

选择器，属性名，属性值关键字全部使用小写字母
属性值前面，冒号后面，保留一个空格
选择器和大括号中间保留空格

CSS基础选择器

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

选择器分类

选择器分为基础选择器和复合选择器

基础选择器是由单个选择器组成的
基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器

元素选择器

标签选择器(元素选择器)是指用HTML标签名作为选择器，按标签名称分类，选中作统一的CSS样式

语法：

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

类选择器

语法:

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

结构需要用class属性

<div class="red">红色</div>

案例:

<style>
	.red {
		color:red
	}
<style>

<div class="red"></div>

类的名字长名称或词组可以使用中横线来为选择器命名

.style-red{

}

不要使用纯数字、中文等命名

类选择器-多类名

可以给一个标签指定多个类名，从而进行多样式

多类名使用方式

<div class="red font20">Just do it</div>

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

id选择器

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

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

语法：

#id名 {
	属性1： 属性值1；
}

id属性是一个标签独有的

例子

<style>
	#nav {
		color: red;
	}
</style>

<div id="nav">Just do it</div>

通配符选择器

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

语法

* {
	属性1： 属性值1;
}

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

总结

基础选择器	作用	用法
标签选择器(元素选择器)	可以选出所有相同的标签	p {color: red}
类选择器	可以选出1个或多个标签	.nav {color :green}
id选择器	一次只能选择1个标签	#nav {color:red;}
通配符选择器	选择所有标签	* {color: pink}

CSS字体属性

CSS Font（字体）属性用于定义字体系列、大小、粗细和文字样式(倾斜)

字体(font-family)

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

p {
	font-family: '微软雅黑';
}

div {
	font-family: Arial, "Microsoft YaHei";
}

字体之间必须英文状态逗号隔开
如果有空格隔开的多个单词组成的字体，加引号 “Microsoft YaHei”
当一个字体失效，陆续使用后续设置的字体，如系统都不自带，使用系统默认自带字体，保证在浏览器中正确显示

字体大小(font-size)

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

p {
	font-size: 20px;
}

px（像素）大小
谷歌浏览器默认文字大小16px
不同浏览器默认显示的字号大小不一致
可以给body指定整个页面文字的大小

字体粗细(font-weight)

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

p {
	font-weight: bold;
}

属性值	描述
normal	默认值(不加粗)
bold	定义粗体(加粗)
100-900	400等同于normal，700等同于bold，注意这个数字后面不跟单位

加粗标签(h strong)不加粗，使用normal

文字样式(font-style)

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

p {
	font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal
italic	斜体显示

可使em/i等斜体标签改为不斜体字体

Font复合属性(font)

字体属性可以把对字体属性的设置综合来写

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

使用font属性是，按以上顺序，不能更换顺序，各个属性间用空格隔开
不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用

字体属性总结

属性	表示	注意点
font-size	字号	单位px
font-family	字体
font-weight	字体粗细	700 bold 400 normal
font-style	字体样式	italic normal
font	字体连写	font-style font-weight font-size/line-height font-family

CSS文本属性

文本颜色(color)

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

div {
	color: red;
}

表示	属性值
预定义的颜色值	red,green blue pink…
十六进制	#FF0000 ,#FF6600,#29D789
RGB代码	rgb(255,0,0)或 rgb(100%,0%,0%)

对齐文本(text-align)

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

div {
	text-align: center;
}

属性值	解释
left	左对齐(默认)
right	右对齐
center	居中对齐

使图片水平居中对齐

<p> <img src=""/><p>

<style>
	p {
		text-align: center
	}
</style>

设置图片的父元素，text-align: center

装饰文本(text-decoration)

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

div {
	text-decoration: underline
}

属性值	描述
none	默认，没有装饰线
underline	下划线。超链接a自带下划线
overline	上划线
line-through	删除线

文本缩进(text-indent)

text-indent属性用来指定文本的第一行的缩进，通常将段落的首行缩进

div {
	text-indent: 10px;
}

div {
	text-indent: 2em;
}

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

行间距(line-height)

line-height属性用于设置行间的距离(行高).可以控制文字与行之间的距离.

p {
	line-heigt: 26px;
}

行间距包含: 上间距、文本高度、下间距

上文设置行间距26px,文字默认大小16px，因此，文字大小占16px,上间距5px,下间距5px

文本属性总结

属性	表示	注意点
color	文本颜色	通常使用十六进制
text-align	文本对齐	可以设定文字水平的对其方式
text-indent	文本缩进	段落首行缩进2个字 text-indent: 2em;
text-decoration	文本修饰	添加下划线 underline，取消下划线none
line-height	行高	控制行与行之间的距离

CSS引入方式

三种引入方式

行内样式表（行内）
内部样式表（嵌入式）
外部样式表(链接式)

内部样式表

单独放到一个

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

行内样式表

在元素内部的style属性中设定CSS样式

<div style="color:red; font-size: 12px;">Just do it</div>

外部样式表

新建一个.css样式文件，

在HTML找那个引入样式

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

CSS的复合选择器

复合选择器是建立在基本选择器之上，对基本选择器进行组合形参

常用复合选择器包括**: 后代选择器、子选择器、并集选择器、伪类选择器**等

后代选择器

后代选择器，需选择父元素里面的所有后代元素

元素1 元素2 {样式声明}

上述语法表示选择元素1里面的所有元素2（后代元素）

例

ul li{样式声明} //选择ul里面所有li标签元素

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

子元素选择器

子元素选择器只选择子元素

语法：

元素1>元素2{样式声明}

例

div>p{样式声明}

元素1和元素2大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2

并集选择器

并集选择器可以选择多组标签，同时为它们定义相同的样式

语法:

元素1,元素2{样式声明}

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

例如

ul,div {样式声明}

元素1和元素2中间逗号隔开
并集选择器通常用于集体声明

伪类选择器

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

伪类选择器用**冒号:**表示，如:hover、:first-child

伪类选择有很多，如链接伪类，结构伪类等

链接伪类选择器

:link  //未点击过
:visited //访问过
:hover //鼠标经过
:active //鼠标按下，但未松开

最好按以上顺序书写

例子

        /* 未访问的链接 */
        a:link {
            color: black;
            text-decoration: none;
        }

        /* 点击过(访问过的)链接 */

        a:visited {
            color: purple;
        }

        /* 鼠标经过时 */
        a:hover {
            color: skyblue;
            text-decoration: underline;
        }

        /* 鼠标点击，但未弹起 */
        a:active {
            color: greenyellow;
        }

:focus伪类选择器

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

标点就是光标，一般情况input类表单才能获取

input: focus {
	basckground-color:yellow;
}

复合选择器总结

选择器	作用	隔开符号及用法
后代选择器	用来选择后代元素	空格 .nav a
子代选择器	选择最近一级元素	大于 .nav>p
并集选择器	选择某些相同的元素	逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	:link-:visited-:hover-:active
:focus选择器	选择获得光标的表单	input:focus

CSS元素的显示模式

元素显示模式就是元素以什么方式进行显示，比如div自己独占一行，一行可以放多个span

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

块元素

常见的块元素有：h1-h6,p,div ul,ol li等

块元素特点

独占一行
高度、宽度、外边距、内边距都可以控制
宽度默认是容器(父级宽度)的100%
是一个容器及盒子，可以放行内或块级元素

文字类的元素内不可使用块级元素，如h1-h6,p
p标签主要用于存放文字，因此P内不能放块级元素，尤其div
同理h1-h6也不能放其他块级元素

行内元素(内联元素)

常见行内元素 a、strong,b ,em,i,del,s,ins u,span等

特点：

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

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

行内块元素

在行内元素中有几个特殊的标签–image input td，他们同时具有块元素和行内元素的特点即行内块元素

特点

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

显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度	本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度和高度	本身内容的宽度

显示模式转换

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

单行文字垂直居中

css没有提供文字垂直居中

解决方案: 让文字的行高等于盒子的高度，就可以让文字在盒子内垂直居中

原理

行高：文字本身高度+上空隙+下空隙(间距)

垂直居中：行高的上空隙和下空隙把文字挤到中间了。

行高小于文盒子高度，文字偏上
行高大于盒子高度，文字偏下

CSS背景

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

背景颜色（background-color）

background-color属性定义了元素的背景颜色.

background-color: 颜色值;

一般情况下，元素背景颜色默认值transparent(透明)

background-color: transparent;

背景图片(background-image)

background-image属性定义了元素的背景图像。实际开发常见于logo或装饰性小图片或者超大的背景图片，背景图片的优点是非常便于控制位置(精灵图也是一种运用场景)

background-image: none|url(url)

参数值	作用
none	无背景图（默认）
url	使用绝对或相对地址指定背景图像

背景图片后面，不要忘记加URL，同时里面的路径不要加引号

背景平铺(background-repeat)

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

background-repeat: repeat|no-repeat|repeat-x|repeat-y

参数值	作用
repeat	背景图像在纵向和横向上平铺(默认)
no-repeat	不平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

背景图片位置(background-position)

background-position: x y;

参数代表意思: x坐标和y坐标。可以使用方位名词或精准单位

参数值	说明
length	百分比\|由浮点数字和单位标识符组成的长度值 px
position	top\|center\|bottom\|left\|center\|right

参数是方位名词
- 如果指定的两个值都是方位名词，则两个值先后顺序无关，left top和top left效果一样
- 如果只指定了一个方位名词，另一个省略，则第二个默认居中对齐如 left
参数是精确单位
- 如果参数是精确单位，第一个是x坐标，第二个是y坐标
- 如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中
参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值时y坐标。

背景图像固定(background-attachment)

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

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

background-attachment: scroll | fixed

参数值	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

背景图像复合写法(background)

简写属性时，没有特定的书写顺序，一般规定为:

background:背景颜色背景图片背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat fixed top;

背景色半透明

CSS提供了背景颜色半透明效果

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


backgruond-color:rgba(0,0,0,.3);

最后一个参数是alpha透明度，取值范围0-1之间 1不透明
习惯0.3的0省略，写为 background: rgba(0,0,0,.3);
背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3新增属性，IE9+浏览器支持
实际开发中，不太关注兼容性写法

背景总结

属性	作用	值
background-color	背景颜色	预定义颜色/十六进制/RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repeat\|no-repeat\|repeat-x\|repeat-y
background-position	背景位置	length/positon 分别是x y坐标
background-attachment	背景附着	scroll\|fixed
background	简写属性	background-color\| background-image\|background-repeat\|background-attachment\|background-position
背景色半透明	半透明效果	background: rgba(0,0,0,.3);后面一个参数是透明度

CSS三大特性及权重

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

层叠性

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

层叠性原则:

样式冲突，遵循的原则是就近原则
样式不冲突不会层叠

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


<div> BLACKPINK</div>

继承性

CSS中的继承:子标签会继承父标签的某些样式(font/text等跟文字相关的)，如文本颜色、字号等。

<style>
    div {
        color:pink;
        font-size: 14px;
    }
</style>


<div>
    <p>
        blinks
    </p>
</div>

行高的继承

子元素可以继承父元素的行高

<style>

    body {
        //行高12*1.5=12px
        font:12px/1.5 Microsoft YaHei //行高1.5
    }
    
    
    div {
        //子元素继承父类行高1.5即行高为 14px*1.5=21px
        font-size:14px  
    }
</style>




<body>
	<div>
        BLACKPINK
    </div>
    <p>
        BLINKS
    </p>
</body>

行高可以跟单位也可以不跟单位
1.5即当前元素文字大小的1.5倍

优先级

选择器权重如下表

选择器	选择器权重
继承或 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important 重要的	无穷大

div {
	color: green ！important;
}

从左到右依次数值

优先级注意点:

权重是由4组数字组成，但不会有进位
等级判断从左向右，如果某一位数值相同，则判断下一位数值

继承的权重为0 ，p 为1, 故为pink，（不管父类优先级有多高）

//父亲权重是0100
#father{
	color:red;
}

//p继承权重是0000
//单独p 权重是0001
p{
	color:pink
}

<div>
    <p>
        BLACKPINK
    </p>
</div>

CSS权重叠加

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

权重虽然会叠加，但是不会有进位问题

    <style>
	//复合选择器会有权重叠加的问题	
    //权重  0,0,0,1+0,0,0,1=0002
       
        ul li {
            color: green;
        }
        
        
        //li权重 0,0,0,1
        li {
            color: red;
        }
        
        
        //.nav li权重: 0,0,1,0+0,0,0,1=0,0,1,1
        .nav li{
            color: pink;
        }
        
        //权重= 0,1,0,0+ 0,0,0,1=0,1,0,1
        #blank li{
            color:black;
        }
	
	</style>
    
    
    <ul class=".nav" id="blink">
        <li>BLACK</li>
        <li>PINK</li>
        <li>LOVE</li>
    </ul>

权重练习题

div ul li—>0,0,0,3
.nav ul li—>0,0,1,2
a:hover–>0,0,1,1
.nav a–>0,0,1,1

CSS盒子模型

页面学习三大核心:盒子模型、浮动和定位

盒子模型组成(Box Model)

所谓盒子模型：就是把HTML页面布局中的布局元素看作一个矩形盒子。

它包括:边框、外边距、内边距和实际内容

边框(border)

边框可以设置元素的边框。边框由三部分组成 :边框宽度、边框样式、边框颜色

语法：

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

属性	作用
border-width	定义边框粗细，单位px
border-style	定义边框样式，none 、solid (实线)，dotted (点线)，dashed(虚线)
border-color	边框颜色

边框简写

边框简写:

border: 1px solid red; 没有顺序

边框分开写

border-top: 1px solid red //只设置上边框

表格的细线边框(border-collapse)

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

语法:

border-collapse: collapse;

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

        table,
        td,
        th {
            border: 1px solid pink;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            text-align: center;
        }

边框会影响盒子实际大小

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

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

内边距（paddding）

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

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding属性简写

值的个数	表达意思
padding: 5px	1个值，上下左右都有5像素内边距
padding: 5px 10px;	2个值，上下5px,左右10px
padding: 5px 20px 10px;	3个值，上内边距5px 左右20px 下 10px
padding: 5px 10px 20px 30px	4个值，上右下左

当给盒子指定padding值后，发生2件事情:

内容和边框有了距离，添加了内边距
padding影响了盒子实际大小
也就是说，盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子

解决方案：

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

padding影响盒子的好处

padding内边距可以撑开盒子，因此可以巧妙利用

因为每个导航栏里面的数字不一样多，因此不用给每个盒子宽度了，直接给padding最合适，因为padding会撑开盒子，只用保证盒子与字左右间距相同，而不管盒子实际大小。

新浪导航栏

  <!-- 
        不管盒子宽度，padding会撑开盒子，
    字数不同，padding相同，保证
    不管字数多少，字与盒子padding相同 -->

    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #efeefd;
            background-color: #fcfcfc;
            line-height: 41px;
        }

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

        .nav :hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>

</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>

</html>

padding不会影响盒子的情况

如果盒子本身没有指定width/height，则此时padding不会撑开盒子大小。只保证内边距

        h1 {
            background-color: tomato;
            height: 40px;
            padding: 30px;
            /* 此时左右的padding不会影响盒子大小，因为没有设置width 左右的padding无效 */
            /* 但是上下的padding会影响盒子大小 */
        }

        h2 {
            background-color: skyblue;
            height: 40px;
            width: 100%;
            padding: 30px;
            /* 此时设置了width和height,会影响盒子上下左右的padding */
        }
        
        
        div {
            width: 300px;
            height: 100px;
            background-color: palegreen;
        }

        div p {
            /* 此时虽然父元素div指定了width，但是不会影响盒子大小，还是不会撑开父元素盒子大小，只保证内边距
            继承父元素宽度300px */
            padding: 30px;
            background-color: peru;
        }
        
        
        
     <div>

        <p></p>
    </div>

外边距(margin)

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

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

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

外边距应用–块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件

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

.header {
	width:960px;
	margin: 0 auto;
}

常见三种写法:

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

注意:以上方法是让块级元素水平居中，

行内元素或行内块元素水平居中

行内元素或行内块元素水平居中给其父元素添加text-align：center即可

外边距合并

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

主要有两种情况:

相邻块元素垂直外边距合并
嵌套块元素垂直外边距的塌陷

浮动的盒子不会有外边距合并问题

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

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

解决方案:

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

    <style>
        .test1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-bottom: 20px;
        }

        .test2 {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 40px;
        }
    </style>
</head>

<body>

    <div class="test1"></div>
    <div class="test2"></div>


</body>

此案例，连个盒子之间的间距只有取最大值,即40px

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

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

<style>
        /* 当使用margin定义块元素的垂直外边距时，
        可能出现外边距的合并 */

        .father {
            width: 500px;
            height: 400px;
            background-color: rebeccapurple;

            margin-top: 30px;
            /* 解决方案1 */
            /* 可以为父元素定义上边框 */
            /* border-top: 1px solid transparent; */

            /* 解决方案2 */
            /* 为父元素定义上内边距 */
            /* padding-top: 1px; */

            /* 方案3 */
            /* 为父元素添加overflow: hidden; */
            overflow: hidden;
        }

        /* 
        两个嵌套的（父子关系）块元素，父元素有上外边距，
        子元素也有上外边距，此时父元素会塌陷较大的外边距值
        即，此时只有 父元素 上外边距 塌陷40px */
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;

            margin-top: 40px;


        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

此案例，导致父元素上外边距有40px，而子元素与父元素之间没有上外间距

解决方案

为父元素定义上外边框(影响盒子实际大小)
为父元素定义内边距（影响盒子实际大小）
为父元素添加overflow:hidden
还有其他方法，比如浮动、固定、绝对定位盒子等不会有塌陷问题

清除内外边距

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

* {
	padding:0;
	margin:0
}

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

小米模块综合案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米产品模块</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5ff;
        }

        .box {
            width: 298px;
            height: 415px;
            /* 让块级盒子水平居中 */
            margin: 40px auto;
            background-color: #fff;
        }

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

        .review {
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有width属性(实际上继承了父元素的宽度)，所以不会撑开盒子只有内边距 */
            padding: 0 28px;
            margin-top: 30px;
        }

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

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

        .info h4 {

            font-weight: 400;
            display: inline-block;

        }

        .info span {
            color: #ff6700;
        }

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

        a {
            text-decoration: none;
            color: #333;
        }
    </style>
</head>

<body>
    <div class="box">

        <img src="img/image.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>

去除ul小圆点

li {
	list-style: none;
}

快报案例

    <style>
        * {
            padding: 0;
            margin: 0;
        }

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

        .box h3 {
            height: 32px;
            border: 1px dotted #ccc;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;

        }

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

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }

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

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

        li {
            /* 去掉li前面的小圆点 */
            list-style: none;

        }
    </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>

圆角边框(border-radius)

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

border-radius:length;

length：画一个圆，length即为这个圆的半径

参数可以为数值或百分比的形式
如果是正方形，想要设置一个圆，把border-radius修改为高度或者宽度的一半即可，或者直接写50%(宽度和高度的一半)
如果一个矩形，变为圆角矩形，border-radius设置为矩形高度的一半即可。
分开写：border-top-left-radius、border-top-right-radius、border-bottom-left、border-bottom-right

值含义
border-radius:10px 四个角
border-radius:10px 20px 左上角及对角、右上角及对角
border-radius:10 px 20px 30px 40px 左上角、右上角、右下角、左下角

值	含义
border-radius:10px	四个角
border-radius:10px 20px	左上角及对角、右上角及对角
border-radius:10 px 20px 30px 40px	左上角、右上角、右下角、左下角

盒子阴影(box-shadow)

box-shadow属性为盒子添加阴影

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必须，水平阴影的位置。允许负值
v-shadow	必须，垂直阴影的位置。允许负值
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色，一般使用透明度rgb(0,0,0,.3)
inset	可选，将外部阴影(outset)该改为内部阴影

默认的是外阴影(outset)，但是不可以写这个单词，否则造成阴影无效
盒子阴影不占用空间，不影响其他盒子排列

文字阴影(text-shadow)

语法

text-shadow:h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊的距离
color	可选。阴影的颜色

CSS浮动

传统页面布局的三种方式

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

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

普通流(标准流)
浮动
定位

标准流(普通流、文档流)

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

块级元素会独占一行，从上向下顺序排列
- 常用元素: div、hr 、p、h1-h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
- 常用元素:span、a、i、em等
以上都是标准流布局，标准流就是最基本的布局方式

浮动（float）

提问

如何让多个块级盒子div水平排成一列

**答：**比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。
如何实现两个盒子的分别左或右对齐？

为什么需要浮动

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

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

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

什么是浮动

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

语法：

选择器 {
	float:属性值;
}

属性值	描述
none	元素不浮动(默认值)
left	元素向左浮动
right	元素向右浮动

浮动特性

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

浮动元素会脱离标准流
浮动元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性(一行显示、可设定宽度和高度、宽度默认跟随内容调整)

浮动特性-（脱标）

脱离标准普通流的控制(浮)，移动到指定位置(动)，（俗称脱标）
浮动的盒子不再保留原先的位置
浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行。

浮动特性-（具有行内块特性）

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

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

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

为了约束浮动元素的位子，一般网页布局采取策略是:

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。复合网页布局第一准则。

网页布局第二准则;先设置盒子的大小，只有设置盒子的位置

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

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

        .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></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>

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

</html>

清除浮动

为何清除浮动

我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的。但是，所有的父盒子都必须有高度吗？

**答：**很多情况下，父级盒子不方便给高度，而是给一个宽度，然后由子元素撑开盒子的高度。

但是子盒子浮动，不占有位置，最后父级盒子高度为0时，就影响下面标准流的盒子(因为父盒子不占位置，因此其他盒子往上跑)

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

清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，就不会影响下面的标准流了

清除浮动(clear)

语法：

选择器 {clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素(清除左侧浮动的影响)
right	不允许右侧有浮动元素(清除右侧浮动的影响)
both	同时清除左右两侧的影响

清除浮动的策略时:闭合浮动

清除浮动的方法

额外标签法
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

清除浮动-额外表标签法

额外标签法也称为隔墙法

额外标签法会在最后一个浮动的子元素后面添加一个额外标签，并添加清除浮动样式

优点:通俗易懂，书写方便
缺点:添加许多无意义的标签，结构化差

注意：要求这个新的空标签必须是块级元素

       
        .box {
            width: 900px;
            margin: 0 auto;
            border: 1px solid blue;
            background-color: pink;
        }

        .one {
            width: 200px;
            height: 200px;
            background-color: burlywood;
            float: left;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            float: left;
        }
       
       /* 使用额外标签清除浮动 */
        /* clear:清除left/right或两侧的影响 */
        /* 父级元素自定添加高度 */
        .clear {
            clear: both;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="clear"></div>
    </div>


    <div class="footer">

    </div>

</body>

总结

清除浮动的本质是？

清除浮动的本质是清除浮动元素脱离标准流造成的影响
清除浮动策略是？

闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
额外标签法？

就是在最后一个浮动的子元素后面添加一个额外标签，并添加清除浮动样式

清除浮动-父级添加overflow

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

缺点:无法显示溢出的部分

        .box {
            width: 900px;
            margin: 0 auto;
            border: 1px solid blue;
            background-color: pink;
            overflow: hidden;
        }

        .one {
            width: 200px;
            height: 200px;
            background-color: burlywood;
            float: left;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            float: left;
        }

        .footer {
            height: 300px;
            background-color: coral;

        }
    </style>
</head>

<body>

    <div class="box">
        <div class="one"></div>
        <div class="two"></div>

    </div>

    <div class="footer">

    </div>

</body>

清除浮动-:after伪元素法

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

        .clearfix:after {
            content: "";
            /* 默认行内元素，修改为块级元素 */
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
 		.clearfix {
            /* IE6/7专有 */
            *zoom: 1;
        }

使用

<body>

    <div class="box clearfix">
        <div class="one"></div>
        <div class="two"></div>

    </div>

    <div class="footer">

    </div>

清除浮动-双伪元素清除浮动

也是给父元素添加

		.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

使用

<body>

    <div class="box clearfix">
        <div class="one"></div>
        <div class="two"></div>

    </div>


    <div class="footer">

    </div>

</body>

清除浮动总结

为什么需要清除浮动？

父级没高度
子盒子浮动了
影响下面布局，就应该清除浮动了

清除浮动的方式
额外标签法
父级overflow:hidden;
父级after伪元素
父级双伪元素

CSS定位

为什么需要定位

某个元素可以自由的在一个盒子内移动位置并压住其他盒子
当我们滚动窗口的时候，盒子是固定屏幕的某个位置的

以上效果，标准流和浮动都无法快速实现，此时需要定位实现

所以:

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

定位组成

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

定位=定位模式+边偏移

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

定位模式(position)

定位模式决定元素的定位方式，通过CSS的position属性来设置，

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移就是定位的盒子移动到的最终位置。有top、bottom、left、right4个属性。

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量
left	left:80px	左侧偏移量
right	right：80px	右侧偏移量

静态定位(static)

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

语法:

选择器 {position: static;}

静态定位按照标准流特性摆放位置，它没有边偏移

相对定位(relative)

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

语法:

选择器 {position:relative;}

相对定位特点

它是相对于自己原来的位置移动的(移动位置的时候参照的是自己原来的位置)
原来在标准流的位置继续占有，后面的盒子仍然以标准流方式对待
相对定位并没有脱标，适合给绝对定位当爹(因为占有原来位置，不会影响下面的元素)

案例

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 900px;
            height: 900px;
            background-color: pink;
            margin: 50px auto;
        }

        .father div {
            width: 200px;
            height: 200px;

        }

        .one {
            background-color: aqua;
            /* 相对定位 */
            position: relative;
            right: 150px;
            /* top: 100px; */
        }

        .two {
            background-color: orange;
        }
    </style>
</head>

<body>

    <div class="father">

        <div class="one"></div>
        <div class="two"></div>
    </div>

</body>

绝对定位(absolute)

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

语法：

选择器 {
	position:absolute;
}

绝对定位特点

如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位(document文档)
如果祖先元素有定位(相对、绝对、固定)，则以最近一级的祖先元素为参考点移动位置
绝对定位不再占有原来位置(脱标)

子绝父相由来

子级是绝对定位，父级是相对定位

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子(脱标并覆盖)
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有原来位置，因此父亲只能是相对定位

**总结：**因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

固定定位(fixed)

固定定位是元素固定于浏览器可视区的位置。

主要使用场景:可以在浏览器页面滚动时，元素的位置不会改变

语法

选择器 {position: fixed;}

固定定位特点

以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动
固定定位不再占有原来的位置(脱标)

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

小算法：

让固定定位的盒子left:50%.走到浏览器可视区(版心)的一半位置。
让固定定位的margin-left:版心宽度的一半。(到达版心右侧)

 <style>
        /* 算法:先让盒子左边移动浏览器的50%，即到达版心位置
            再走版心宽度的一半即可(可利用margin-left) */

        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }

        .fixed {
            position: fixed;
            top: 200px;
            left: 50%;
            margin-left: 400px;
            width: 80px;
            height: 90px;
            background-color: palegreen;

        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="w"></div>
</body>

粘性定位(sticky）

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

语法

选择器 {position: sticky; top:10px;}

粘性定位特点

以浏览器的可视窗口为参照点移动元素
粘性定位占有原先的位置
必须添加top、left、right、bottom其中的一个才有效

跟页面滚动搭配使用，兼容性差，IE不支持。

定位总结

定位模式	是否脱标	移动位置
static静态定位	否	不能使用边偏移
relative相对定位	否	相对于自身位置移动
absolute绝对定位	是	带有定位的父级
fixed固定定位	是	浏览器可视区
sticky粘性定位	否	浏览器可视区

定位叠放次序(z-index)

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

语法

选择器 {z-index:1;}

数值可以使正整数、负整数、0，默认是auto，数值越大，盒子越靠上
如果属性值形同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

定位拓展

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中

水平居中
1. left:50%:让盒子的左侧移动到父级元素的水平中心位置
2. margin-left:（-盒子宽度的一般):让盒子向左移动自身宽度的一半
垂直居中
1. top:50%
2. margin-top 😦-盒子高度的一半)

 <style>
        /* 绝对定位margin:auto；使其水平居中无效 */
        /* 绝对定位后
            水平居中:左边left距离50%，然后margin-left:-(宽度)
            垂直居中:top：50%,然后margin-top:-(高度) */
        .test {
            /* 水平居中 */
            position: absolute;
            left: 50%;
            margin-left: -150px;

            /* 垂直居中 */
            top: 50%;
            margin-top: -100px;

            width: 300px;
            height: 200px;
            background-color: pink;
            /* margin: auto; */
        }

        .father {
            position: relative;
            width: 500px;
            height: 400px;
            background-color: palegreen;
            margin: 0 auto;
        }

        .son {
            position: absolute;
            /* 水平居中 */
            left: 50%;
            margin-left: -150px;
            /* 垂直居中 */
            top: 50%;
            margin-top: -100px;
            width: 300px;
            height: 200px;
            background-color: paleturquoise;
        }
    </style>
</head>

<body>
    <div class="test"></div>

    <div class="father">
        <div class="son"></div>
    </div>
</body>

定位的特殊性

绝对定位和固定定位也和浮动类似。

行内元素添加绝对定位或固定定位，可以直接设置宽度和高度
块级元素添加绝对定位或固定定位，不过不给宽度/宽度，默认大小是内容的大小

因为浮动和绝对定位、固定定位都脱标

绝对/固定定位会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的问文字(图片)

但是绝对/固定定位会压住下面标准流的所有内容

浮动文字环绕

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕，文字会围绕浮动元素

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位、固定定位元素都不会触发外边距合并的问题,因为它们都脱标

案例

淘宝轮播图

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 100px auto;
        }

        .tb-promo img {
            width: 520px;
            height: 280px;
        }

        .prev {

            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;

        }

        /* 并集选择器可以集体声明相同的样式 */
        .prev,
        .next {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            /* 加了绝对定位的盒子(行内)可以直接设置宽度和高度 */
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            /* text-align: center; */
            line-height: 30px;
            text-decoration: none;
            color: #fff;
        }

        .next {
            /* 如果一个盒子既有left属性，也有right属性，则默认执行left属性 */
            /* 同理 top bottom，则会先执行top */
            right: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .promo-nav {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 7px;
        }

        .promo-nav ul li {
            height: 8px;
            width: 8px;
            border-radius: 50%;
            background-color: #fff;
            list-style: none;
            float: left;
            margin: 3px;
        }

        .promo-nav .selected {
            background-color: #ff5000;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="img/lunbo.webp.jpg" alt="">
        <!-- 左侧按钮 -->
        <a href="#" class="prev">&lt;</a>
        <!-- 右侧按钮 -->
        <a href="#" class="next">&gt;</a>

        <!-- 小圆点 -->
        <div class="promo-nav">
            <ul>
                <li class="selected"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

    </div>
</body>

网页布局总结

一个完整的网页是，标准流、浮动、定位一起完成布局的，

标准流

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

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

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

元素的显示与隐藏

类似网站广告，当点击就关闭不见，刷新页面就会重新出现

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

display 显示/隐藏
visibility 显示/隐藏
overflow 溢出显示/隐藏

display属性

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

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

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

visibility可见性

visibility属性用于指定一个元素应可见还是隐藏。

visibility：visible；元素可视
visibility： hidden；元素隐藏

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

如果隐藏元素想要原来的位置，用visibility:hidden；

如果隐藏元素不想要原来的位置，用display:none；

overflow溢出

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度或宽度)会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条(默认)
hidden	不显示超过对象尺寸的内容，超出部分隐藏
scroll	不管内容是否超出，总是显示滚动条
auto	超出自动显示滚动条

总结

display显示/隐藏元素，不保留位置
visibility 显示/隐藏元素，保留原来的位置
overflow 溢出显示/隐藏, 只是对溢出部分的处理

综合案例(土豆网鼠标经过显示遮罩)

练习元素的显示与隐藏
练习元素的定位

核心原理

原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来

遮罩盒子不占有位置，就需要使用绝对定位和display配合使用

    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5) url(img/arr.png) no-repeat center;
        }

        /* 鼠标经过 土豆这个盒子，就让里面遮罩层显示出来 真正显示的是mask */
        .tudou:hover .mask {
            /* 显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="img/tudou.jpg" alt="">
    </div>
</body>

CSS高级技巧

精灵图

为什么需要精灵图

为了有效减少服务器接收和发送请求的次数，提高页面的加载，出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)

**核心原理:**将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就可以了

精灵图的使用

使用精灵图的核心：

精灵图技术主要针对背景图片，就是把多个小背景图片整合到一张大图片中
这个大图片也称为sprites，精灵图或雪碧图
移动背景图片的位置，此时可以用background-position
移动的距离就是这个目标图片的x和y坐标
一般情况，往上(y坐标)或往左(x坐标)移动，其数值都是负数
使用精灵图，精确测量，每个小图片的大小和位置

精灵图的总结

精灵图主要针对小的背景图片使用
主要借助背景位置实现–background-position
一般情况精灵图都是复制(x轴坐标右边走是正值，左边走是负值，y轴坐标下走是正值，上走是负值)

案例

    <style>
        .box1 {
            width: 58px;
            height: 58px;
            margin: 100px auto;
            background-image: url(img/sprites.png);
            background-position: -183px 0;
        }

        .box2 {
            width: 23px;
            height: 23px;
            margin: 30px auto;
            background: url(img/sprites.png) no-repeat -157px -107px;
        }

        .box3 {
            width: 18px;
            height: 25px;
            margin: 30px auto;
            background-image: url(img/sprites.png);
            background-position: -1px -144px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>
</body>

字体图标

字体图标的产生

字体图标使用场景:主要用于显示网页中通常、常用的一些小图标

精灵图缺点:

图片文件大
图片本身放大或缩小会失真
一旦图片制作完，更换复杂

解决以上问题，就是字体图标iconfont

字体图标展示的是图标，本质属于字体

使用

字体图标的下载
字体图标的引入
字体图标的追加(添加新的小图标)

推荐网站

icomoon字体库
inconfont字体库

字体文件格式

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件

Ture Type（.ttf）格式.ttf格式是Windows和Mac最常见字体.
Web Open Font Format（.woff）
Embedded Open Type(.eot)，IE专用字体
SVG(.svg)格式，.svg是基于SVG字体渲染的一种格式

CSS三角

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

宽高为0，只设置边框

div {
	width: 0;
	height: 0;
	line-height: 0;
	font-size: 0;
	borderer:50px solid transparent;
	border-left-color:pink
}

        .box1 {
            width: 0px;
            height: 0x;
            margin: 10px auto;

            border-left: 20px solid pink;
            border-top: 20px solid orange;
            border-right: 20px solid aqua;
            border-bottom: 20px solid palegreen;
        }
        
         .box2 {
            width: 0;
            height: 0;
            margin: 20px auto;
            border: 50px solid transparent;
            /* border-top-color: turquoise; */
            border-bottom-color: orange;

        }

CSS用户界面样式

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

更改用户的鼠标样式
表单轮廓
放置表单拖拽

鼠标样式(cursor)

li {
	cursor: pointer;
}

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

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线(outline)

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

input {outline: none;}

防止拖拽文本域(resize)

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

textarea {resize: none;}

vertical-align属性应用

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

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

语法:

vertical-align: baseline(默认)|top|middle|bottom

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端与行内最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

应用(图片、表单和文字对齐)

默认文字与图片是基线对齐

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

解决图片底部默认空白缝问题(vertical-align)

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

解决方法

给图片添加 veritcal-align:middle|top|bottom等
把图片转换为块级元素display:block;

    <style>
        div {
            border: 1px solid red;
            margin-bottom: 20px;
        }

        .box1 img {
            vertical-align: bottom;
            /* display: block; */
        }
    </style>
</head>

<body>


    <div class="box1">
        <img src="img/pub.jpg" alt="">pink
    </div>
</body>

溢出的文字省略号显示

单行文本溢出省略号显示

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

1.强制一行内显示文本
white-space: nowrap;(默认normal自动换行)
2.超出的部分隐藏
overflow:hidden;
3.文字用省略号代替超出的部分
text-overflow:ellipsis;

多行文本溢出显示省略号

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

overflow:hidden;
text-overflow:ellipsis;
//弹性伸缩盒子模型显示
display: -webkit-box;
//限制在一个块元素的文本的行数
-webkit-line-clamp:2;
//设置或检索伸缩盒子对象的子元素的排列方式
-webkit-box-orient:vertical;

常见布局技巧

margin赋值的运用
文字围绕浮动元素
行内块的巧妙运用
CSS三角强化

margin赋值运用

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

        ul li {
            position: relative;
            float: left;
            width: 150px;
            height: 200px;
            list-style: none;
            border: 1px solid red;
            margin-left: -1px;
        }

        ul li:hover {
            /* 此情况是li盒子没有定位 */
            /* 改为相对定位，会压住其他标准流，解决了左侧盒子压住边框的问题 */
            position: relative;
            border-color: skyblue;
        }

        ul li:hover {
            /* 提高级别 */
            z-index: 1;
            border-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

文字围绕浮动元素

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 700px;
            height: 195px;
            border: 1px solid #ccc;
            margin: 0 auto;
            padding: 5px;
        }

        .pic {
            float: left;
            margin-right: 30px;
        }

        p {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="img/news.webp.jpg" alt="">
        </div>
        <p>
            【集锦】 热身赛-巴西0-1秘鲁 内尔马替补两人血染赛场
            热身赛-巴西0-1秘鲁 内尔马替补两人血染赛场
            热身赛-巴西0-1秘鲁 内尔马替补两人血染赛场
            热身赛-巴西0-1秘鲁 内尔马替补两人血染赛场
            热身赛-巴西0-1秘鲁 内尔马替补两人血染赛场
        </p>

    </div>
 </body>

行内块元素巧妙运用(分页效果)

页码在中间显示:

把这些链接盒子转换为行内块，之后给父级添加text-align:center就会水平居中
利用行内块元素中间有缝隙，之后给父级添加text-align:center就会水平居中

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {

            text-align: center;
        }

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .more {
            border: none;
            background-color: #fff;
        }

        .box input {
            width: 50px;
            height: 36px;
            outline: none;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }

        .box button {
            width: 85px;
            height: 40px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#" class="more">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        <input type="text">页
        <button>确定</button>
    </div>
</body>

CSS三角强化

直角三角形

只保留上边和右边边框，且左边边框较大，会撑开，并且是上边框颜色透明

   <style>
        .box1 {
            width: 0;
            height: 0;
            border-top: 100px solid skyblue;
            border-right: 50px solid orange;

        }

        .box2 {
            width: 0;
            height: 0;
            margin-top: 20px;
            border-top: 100px solid transparent;
            border-right: 50px solid orange;

        }

        .box3 {
            width: 0;
            height: 0;
            margin-top: 20px;
            border-top: 100px solid skyblue;
            border-right: 50px solid transparent;

        }

        /* 京东写法 */
        .box2 {
            border-color: transparent orange transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }
    </style>

</head>

<body>
    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>
</body>

京东价格框案例

使用三角形+定位+文字浮动

    <style>
        .price {
            position: relative;
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .box {
            position: absolute;
            left: 78px;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-width: 24px 12px 0 0;
            border-style: solid;
        }

        .after {
            float: left;

            width: 90px;
            height: 24px;
            background-color: red;
            text-align: center;
        }

        .before {
            float: right;
            width: 70px;
            height: 24px;
            background-color: #fff;
            text-align: center;
            color: #ccc;
            text-decoration: line-through;
        }

        .box1 {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 20px auto;
            line-height: 24px;
            text-align: center;
        }

        .miaosha {
            position: relative;
            float: left;
            width: 89px;
            height: 24px;
            background-color: red;
            text-align: center;
            color: #fff;
        }

        .sanjiao {
            position: absolute;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 24px 10px 0 0;
            border-color: transparent #fff transparent transparent;
        }

        .box1 .origin {
            text-decoration: line-through;
            font-size: 12px;

        }
    </style>
</head>

<body>
    <div class="price">
        <div class="box"></div>
        <span class="after">￥99</span>
        <span class="before">￥199</span>
    </div>

    <div class="box1">
        <span class="miaosha">
            <div class="sanjiao"></div>
            ￥99
        </span>
        <span class="origin">￥199</span>
    </div>
</body>

CSS初始化(CSS reset)

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

CSS初始化是指重设浏览器样式

    <style>
        * {
            margin: 0;
            padding: 0
        }

        em,
        i {
            font-style: normal
        }

        li {
            list-style: none
        }

        img {
            border: 0;
            /* 取消图片底侧有空白缝隙 */
            vertical-align: middle
        }

        button {
            cursor: pointer
        }

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

        a:hover {
            color: #c81623
        }

        button,
        input {
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
        }

        body {
            /* 抗锯齿，让文字显示的更加清晰 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            color: #666
        }

        .hide,
        .none {
            display: none
        }

        /* 清除浮动 */
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: "";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }
    </style>

Unicode编码字体

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

如:

黑体 \9ED1\4F53

宋体\5B8B\4F53

微软雅黑\5FAE\8F6F\96C5\9ED1

HTML5和CSS提高

HTML5新特性

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

这些新特性都有兼容性问题，基本IE9以上才支持

HTML5新增的语义化标签

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

<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

新增语义化标签

header:头部标签
nav：导航栏标签
article：内容标签
section：定义文档某个区域
aside：侧边栏标签
footer:尾部标签

注意

这种语义化标签主要针对搜索引擎的
在IE9中，需要把这些元素转换为块级元素

<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>

    <div class="w">
        <aside>侧边栏</aside>
        <article>
            内容标签
            <section>某个区域</section>
        </article>
    </div>

    <footer>fotter区域</footer>

</body>

多媒体标签(audio/video)

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

音频:audio
视频video

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

视频video

video支持三种视频格式 MP4、WebM、Ogg

尽量使用mp4格式

语法

<video src="文件地址" controls="controls"></video>

多种格式预设

<video controls="controls" width="300">
	<source src="move.ogg" type="video/ogg">
    <source src="move.mp4" type="video/mp4">
    你的浏览器不支持video标签播放视频
</video>

video常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
hegiht	pixels(像素)	设置播放器高度
loop	loop	循环播放
preload	auto(预先加载视频)none(不应加载视频)	规定是否预加载视频(如果有了autoplay 就忽略该属性)
src	url	视频url地址
poster	imgUrl	加载等待的画面图片
muted	muted	静音播放

    <style>
        video {

            width: 100%;
        }
    </style>
</head>

<body>
    <video src="media/mi.mp4" loop="loop" muted="muted" controls="controls" poster="img/jisoo.jpg"></video>
</body>

音频audio

当前audio元素支持三种音频格式: mp3/Wav/ogg

最好用mp3，因为所有浏览器都支持MP3格式

语法

<audio src="文件地址" controls="controls"></audio>

<audio controls="controls">
	<source src="happy.mp3" type="audio/mpeg">
    <source src="happy.ogg" type="audio/ogg">
    您的浏览器不支持audio标签
</audio>

audio常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，音频就绪后马上播放
controls	controls	向用户显示控件
loop	loop	循环播放
src	url	音频URL

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

<body>
    <audio src="media/bgm.mp3" autoplay="autoplay" controls="controls" loop="loop">
    </audio>
</body>

总结

谷歌浏览器把音频和视频自动播放禁止了
可以给视频标签添加muted属性来静音播放视频，音频不可以(可以通过javaScript来控制)
视频一般设置自动播放，不使用controls控件(因为不同浏览器的controls显示不同)

新增input类型

属性值	说明
type=“emial”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

    <!-- 我们验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>邮箱:<input type="email" /></li>
            <li>网址:<input type="url" /></li>
            <li>日期:<input type="date" /></li>
            <li>时间:<input type="time" /></li>
            <li>数量:<input type="number" /></li>
            <li>手机号码:<input type="tel" /></li>
            <li>搜索:<input type="search" /></li>
            <li>颜色:<input type="color" /></li>

            <!-- 当我们点击提交按钮就可以验证表单了 -->
            <li>颜色:<input type="submit" value="提交" /></li>


        </ul>
    </form>

新增表单属性

属性	值	说明
required	required	内容不能为空
placeholder	提示文本
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到表单
autocomplete	off/on	浏览器基于之前键入过的值，默认打开autocomplete=“on”，关闭autocomplete=“off”，需要放在表单内，同时加上name属性，同时提交成功
multiple	multiple	可以多选文件提交

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

input::placeholder {

color:pink;

}

    <style>
        input::placeholder {
            color: pink;
        }
    </style>
</head>

<body>
    <form action="">
        <input type="text" required="required" placeholder="请输入" autofocus="autofocus" autocomplete="off"><br>
        <input type="file" multiple="multiple">
        <br>
        <input type="submit" value="提交">
    </form>
</body>

CSS3新特性

有兼容性问题，ie9+才支持

CSS3新增选择器

属性选择器
结构伪类选择器
伪元素选择器

属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不借助与类或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

    <style>
        /* 类选择器、伪类选择器、属性选择器权重 10 */
        /* 必须是Input 但是同时具有value这个属性 选择这个元素 */
        input[value] {
            border: 1px solid red;
        }

        /* 值选择type=password的文件 */

        input[type="password"] {
            color: pink;
            border: 1px solid red;
            cursor: pointer;
        }

        /* 选择首先是 div 然后具有class属性 然后是icon开头 */
        div[class^="icon"] {
            color: orange;
        }

        div[class$="data"] {
            color: pink;
        }
    </style>
</head>

<body>

    <!-- 1. 利用属性选择器就可以不借助类或id选择器 -->
    <input type="text" value="请输入用户名">
    <input type="text"> <br>

    <!-- 2. 属性选择器还可以选择属性=值的某些元素 -->
    <input type="text" />
    <input type="password">

    <!-- 3.属性选择器选择属性值开头的某些元素 -->

    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>

    <!-- 4.属性选择器可以选择属性值以某某结尾 -->
    <div class="icon1-data">BLACKPINK</div>
    <div class="icon2-data">IN</div>
    <div class="icon3">YOUR</div>
    <div class="icon4">AREA</div>


</body>

结构伪类选择器

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

选择器	简介
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个

注意：类选择器、属性选择器、伪类选择器，权重为10

nth-child(n)

nth-child(n)选择某个父元素的一个或多个特定的子元素

n可以是数字、关键字和公式
n如果是数字，就是选择第n个子元素
n可以是关键字:even偶数、odd奇数
n可以是公式:常见的公式如下(如果n是公式，则从0开始计算，但是第0个或超出的元素忽略)

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15
n+5	从第5个开始到最后
-n+5	前5个

<style>
        /* ul里的第一个孩子，且元素必须是li */
        ul li:first-child {
            background-color: yellow;
        }

        /* ul里的最后一个孩子，且元素必须是li */
        ul li:last-child {
            background-color: tomato;
        }

        /* 选择第5个孩子 */
        ul li:nth-child(5) {
            background-color: skyblue;
        }

        table {
            border: 1px solid black;
            border-collapse: collapse;
        }

        table td {
            width: 100px;
            height: 20px;
            border: 1px solid black;
            border-collapse: collapse;
        }

        /* 隔行变色 */

        /* 偶数 */

        table tr:nth-child(even) {
            background-color: pink;
        }


        /* 奇数 */
        table tr:nth-child(odd) {
            background-color: orange;
        }


        /* <!-- 公式 --> */
        /* nth-child(n) 从0开始 每次加1 往后计算 这里面必须是n 不能是其他字母
        相当于选择了所有的孩子*/
        /* ol li:nth-child(n) {
            background-color: palegreen;
        } */

        /* 选择所有偶数孩子 */
        ol li:nth-child(2n) {
            background-color: palegreen;
        }

        /* 选择奇数孩子 */
        ol li:nth-child(2n+1) {
            background-color: tomato;
        }

        /* 选择5的倍数孩子 */
        ol li:nth-child(5n) {
            background-color: yellow;
        }

        /* 从第3个开始 */
        ol li:nth-child(3+n) {
            background-color: yellow;
        }

        /* 选择前三个 */
        ol li:nth-child(-n+3) {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>


    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>


    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>

</body>

nth-child(n)与nth-of-type区别

选择器	简介
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个孩子

    <style>
        /* 与：first-child last-child类似 */
        ul li:first-of-type {
            background-color: pink;
        }

        ul li:last-of-type {
            background-color: greenyellow;
        }

        /* 与:nth-child()类似 */

        ul li:nth-of-type(even) {
            background-color: red;
        }



        /* nth-child会把所有的盒子都排列序号 */
        /* 执行的时候先看:nth-child(1),之后看前面 div，如果
            第一个孩子是div，则选中，如果第一个孩子不是div则不选
         */

        section div:nth-child(1) {
            background-color: pink;
        }

        /* nth-of-type 会把指定元素的盒子排序号
            执行的时候，先看div，然后看是第一个孩子
        */

        section div:nth-of-type(1) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>

    <!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>光头强</div>
    </section>
</body>

小结

结果伪类选择器一般用于选择父级里面的第几个孩子
nth-child对于父元素里面素有孩子排序选择，找到第n个孩子，看看是否与E匹配
nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后根据n找到第一个孩子
类选择器、属性选择器、伪类选择器权重为10

伪元素选择器

为元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构(不会出现在dom里面)

选择器	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

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

伪元素字体图标

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            content: "\e6b9";
            position: absolute;
            right: 0;

            font-family: "iconfont" !important;
            font-size: 25px;
            padding-top: 5px;
            padding-bottom: 5px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

        }
    </style>
</head>

<body>
    <div></div>

伪元素放土豆效果

/*当鼠标经过 土豆这个盒子，就让里面before遮罩层显示*/

div {
            position: relative;
            width: 448px;
            height: 252px;
            margin: 100px auto;

        }

        div::before {
            /* 遮罩层 */
            content: "";
            position: absolute;
            display: none;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .6) url(img/arr.png);
        }

        div:hover::before {
            display: block;
        }

伪元素清除浮动

.clearfix::after {
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix:before,clearfix:after {
	content:"";
	display:table; //转换为块级元素 并且一行显示
}
.clearfix:after {
	clear:both;
}

CSS3盒子模型

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

box-sizing:content-box 盒子大小为width+padding+border(以前默认)
box-sizing:border-box 盒子大小为width

如果盒子模型改为box-sizing:border-box，那padding和border就不会撑大盒子(前提padding和border不会超过width宽度)

 <style>
	div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            padding: 15px;
            background-color: pink;
            /* box大小=width+padding+border */
            box-sizing: content-box;
        }

        p {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            padding: 15px;
            background-color: pink;
            /* box大小就为实际width大小 */
            box-sizing: border-box;
        }
        }
</style>
</head>

<body>
    <div>BLACKPINK</div>
    <p>BLACKPINK</p>
</body>

CSS3其他特性

图片变模糊（滤镜filter）

 <style>
        body {
            text-align: center;
        }

        img {
            /* 添加滤镜 */
            /* 模糊效果 */
            filter: blur(3px);
            /* 灰度 */
            /* filter: grayscale(100%); */

            margin: 100px 0;
        }

        img:hover {
            filter: blur(0);
        }
    </style>
</head>

<body>
    <img src="img/lunbo.webp.jpg" alt="">
</body>

计算函数(calc函数)

calc()函数可以在声明CSS属性值时执行一些计算

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

 <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        .son {
            /* width: calc(150px + 50px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

过渡(transition)

transition可以在不使用Flash动画和JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画:是从一个状态渐渐的过渡到另一个状态

经常和:hover一起搭配使用

语法

tansition: 要过渡的属性 花费时间 运动曲线 何时开始;

属性：要想变化的CSS属性，宽度、高度、背景颜色、内外边距都可以。如果想要所有变化过渡，写一个all就可以
**花费时间：**单位是秒(必须写单位)如1s (.5s代表0.5s)
**运动曲线：**默认是ease(逐渐慢下来)、linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out（先加速后减速）
何时开始：单位是秒(必须写单位)，设置延迟触发时间，默认是0s

给谁做过渡，给谁加过渡属性

进度条案例

    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }

        .bar:hover .bar_in {
            width: 100%;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            border-radius: 7px;
            background-color: red;

            /* 谁做过渡给谁加 */
            transition: width 2s ease;
        }
    </style>
</head>

<body>

    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

小米logo


    <style>
        a {
            position: relative;
            display: block;
            background-color: rgb(255, 103, 0);
            width: 55px;
            height: 55px;
            margin: 100px auto;
        }

        .box {
            position: absolute;
            left: -55px;
            width: 110px;
            height: 55px;
    
            transition: left .5s;

            /* 方案1 使用overflow:hidden */
            overflow: hidden;
        }

        .box img {
            float: left;
            width: 55px;
            height: 100%;


        }


        /* 鼠标经过a时 position定位至 home显示 */

        a:hover .box {
            left: 0;
        }



        /* 方案2 （未使用overflow: hidden;） */

        /* 首先将home部分隐藏 */
        /* .home {
            visibility: hidden;
        } */




        /*  鼠标经过a时 logo部分显示 */
        /* a:hover .home {
            visibility: visible;
        } */

        /*  鼠标经过a时 logo部分隐藏 */

        /* a:hover .logo {
            visibility: hidden;
        } */
    </style>
</head>

<body>
    <a href="#">
        <div class="box">
            <img class="home" src="img/mi-home.png" alt="">
            <img class="logo" src="img/mi-logo.png" alt="">
        </div>
    </a>
</body>

blink555

关注

16
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3基础

HTML网页什么是网页网站是网页集合网页是网站的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读网页是构成网站的基本元素，它通常由图片、连接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.html或.html后缀结尾的文件，因此也称为HTML文件网页是由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的什么是HTMLHTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言
复制链接

扫一扫