HTML
1、HTML
超文本标记语言
2、作用
写网页结构内容
3、文件后缀
.html 或者 .htm
4、HTML不区分大小写，建议小写
5、html由浏览器解析执行，由上往下，由左往右
6、标签 标记 元素
HTML由标签组成
标签是一对尖括号包含的关键词
双标记 封闭类型标记
h1-h6,div,span,p,b,i,u,s,del,sup,sub,em,strong,a,ul,ol,li,dl,dt,dd,form,button,textarea,table,tr,td,th,caption,tbody,thead,tfoot,header,nav,footer,aside,section,article,video,audio,script,body.head.html...
单标记 非封闭类型标记 空标记
br,hr,img,input,link,meta,source...
7、块级元素和行内元素的区别
1）块级元素独占一行，行内元素在同一行显示
2）块级元素默认宽度为100%，行内元素默认宽度由内容撑开
3）块级元素可以设置宽高，行内元素设置宽高不生效
4）块级元素可以设置margin和padding的四周，行内元素只能设置margin和padding的左右
5）布局时，块级元素可以包含块级元素和行内元素，行内元素一般不要包含块级元素
6）块级元素默认display:bolck; ，行内元素默认display:inline;
7）常见块级元素
h1，h6,div,p,ul,ol,li,dl,dt,dd,hr,table,tr,td,th,form,header,nav,footer,aside,section,article....
8）常见行内元素
img,a,span,b,i,u,s,del,sup,sub,em,strong,video,input,button,textarea,select...
8、DOCTYPE
文档类型声明
作用：告诉浏览器按当前标准解析代码
9、图片
<img src="必须属性 路径" alt="图片不显示给予提示" title="鼠标悬停给予提示"/>
路径：
1）绝对路径
2）相对路径
①平级 直接写
②下一级 /
③上一级 …/
10、超链接
<a href="必须属性 路径 # javascript:;" target="打开的窗口 _self _blank" name="锚点"></a>
11、列表
1）无序列表
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
2）有序列表
<ol>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ol>
3）自定义列表
<dl>
<dt>主题</dt>
<dd>描述</dd>
<dd>描述</dd>
<dd>描述</dd>
</dl>
12、表格
作用：给用户展示数据
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th colspan="水平合并" rowspan="垂直合并"></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
13、表单
1）提交数据
2）标签
<form action="提交的地址" name="表单的名称" method="提交的方式get|post" enctype="multipart/form-data"></form>
get和post的区别：
①get提交数据不安全，会在地址栏中显示，post安全
②get只能提交少量的数据，post理论上没有限制
3）表单元素
<input type="text">
<input type="password">
<input type="radio" name="">
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="button">
<button>提交 type = submit</button>
<button type="reset">重置</button>
<button type="button">没有功能的按钮</button>
<input type="file"> form的编码格式改为二进制
<input type="hidden">
<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>
4）表单元素常用的属性
value 当前值
name 表单元素的名称
checked 默认选中，配合单选按钮和多选按钮使用
selected 默认显示，配合option使用
readonly 只读
disabled 禁用
5）HTML5新增type类型
<input type="email">
<input type="url">
<input type="search">
<input type="tel">
<input type="color">
<input type="number">
<input type="range">
<input type="date">
<input type="month">
<input type="week">
6）HTML5新增表单元素的属性
placeholder 默认提示
autofocus 自动获取焦点
min和max 最小值和最大值，配合number和range使用
minlength和maxlength 最小长度和最大长度
required 必填项
multiple 可以输入多个，用逗号隔开，配合邮箱和网址使用
14、HTML5新增语义化布局标签
<header>头部</header>
<nav>导航条</nav>
<aside>侧边栏</aside>
<article>文章、帖子、博客等</article>
<section>章节、独立的一块</section>
<footer>页脚</footer>
15、你对语义化的理解
看到标签知道他表示的意思
正确的标签干正确的事情
优点：
①有利于SEO
②有利于屏幕阅读者去读取
③有利于团队开发和维护
16、视频和音频
1）视频
<video src="路径" autoplay loop muted controls poster="视频播放前显示一张图片">您的浏览器不支持视频</video>
2）音频
<audio src="路径" autoplay loop muted controls>您的浏览器不支持音频</audio>
3）资源
可以给浏览器提供多种视频或者音频格式的选择
<video>
<source src="1.mp4"/>
<source src="1.ogg"/>
<source src="1.webM"/>
您的浏览器不支持视频
</video>
17、实体字符
空格
< <
> >
18、HTML5新增标签
<!-- 多用于元素和元素的组合 -->
<figure>
<img src="../Mike/images/film.jpg" alt="">
<figcaption>电影</figcaption>
</figure>
<!-- 细节 -->
<details>
<summary>少年</summary>
<p>省略的内容</p>
</details>
呵呵 哈哈啊啊
<!-- 突出显示 -->
呵呵 <mark>哈哈</mark>啊啊
你的浏览器不支持刻度
<!-- 刻度 -->
<meter min="0" max="100" value="86" low="20" high="80">你的浏览器不支持刻度</meter>
你的浏览器不支持进度条
<!-- 进度条 -->
<progress max="100" value="66">你的浏览器不支持进度条</progress>
您的浏览器不支持画布
<!-- 画布 -->
<canvas>您的浏览器不支持画布</canvas>
css
1、css
层叠样式表
2、作用
1）实现了内容与表现的分离
2）提高了代码的可重用性和可维护性
3、文件后缀
.css
4、css的特点
1）继承性
font-* , text-* ,line-height ,color
2）层叠性
3）优先级
优先级高的样式生效
优先级相同后写的样式生效
5、引入css的方式
1）内联方式
行内样式 —— 只对当前元素生效
利用HTML的style属性
<div style="color: red;"></div>
2）内部样式 —— 只对当前页面生效
<head>
<style>
选择器{
属性:属性值;
属性:属性值;
}
</style>
</head>
3）外部样式 —— 实现了内容与表现的分离，提高了代码的可重用性和可维护性
<head>
<link rel="stylesheet" href="">
</head>
4）导入式
<head>
<style>
@import url();
</style>
</head>
@import和link的区别：
1）@import先加载HTML文件，再加载css文件，link是同时加载HTML和css文件
2）@import只能引入css文件，link还可以引入其他内容
3）@import有兼容性，link没有兼容性
4）JavaScript操作DOM时，只能操作link引入的css
5）@import会增加页面的http请求
6、选择器
作用：选中写样式的元素
1）基础选择器
全局选择器 通用选择器
*{
}
选中页面所有元素
元素选择器
div{}
img{}
a{}
选中页面所有指定的元素
类选择器
.className{}
类名可以重复 一个class可以起多个名字，用空格隔开
ID选择器
#IDName{
}
ID名字具唯一性
选择器优先级：行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重： 1000 100 10 1
合并选择器
选择器1,选择器2,...{}
2）关系选择器
1.后代选择器 空格
选择器1 选择器2{ }
选中所有后代
2.子代选择器 >
选择器1>选择器2{ }
选中所有直接子代
3.相邻兄弟选择器 +
选择器1+选择器2{ }
平级 挨着 后面的一个兄弟
4.通用兄弟选择器 ~
选择器1~选择器2{ }
平级 后面所有的兄弟
3）伪类选择器
冒号链接
:link 点击之前
:visited 点击之后
:hover 鼠标悬停
:active 鼠标按下
<!-- css3新增伪类选择器 -->
:first-child 第一个子元素是...
:last-child 最后一个子元素是...
:nth-child(number|even|odd|倍数) 第几个子元素是...
:only-child 唯一一个子元素是...
:empty 空的子元素是...
:not(选择器) 否定
<!-- 表单 -->
:focus 获取焦点时的样式
:checked 被选中时的样式
4）伪对象选择器 伪元素选择器
::before{
content:"";
}
::after{
content:"";
}
5）属性选择器
[属性]
[属性=属性值]
元素[属性=属性值]
元素[属性^=值] 以什么开头
元素[属性$=值] 以什么结尾
元素[属性*=值] 包含
7、字体的属性 —— 继承性
1）设置字体颜色
color: ;
颜色的取值：
①关键字
②十六进制
③rgb()
④rgba()
2）字体的大小
font-size:16px;
浏览器支持的最小字体为12px
3）字体是否加粗
font-weight:normal|bold|100-900;
400 = normal
700 = bold
4）字体是否倾斜
font-style:normal|italic;
5）字体
font-family: , , ;
8、文本的属性 —— 继承性
1）设置元素内容水平对齐方式
text-align:left|right|center;
2）文本装饰
text-decoration:underline|none|overline|line-through;
3）英文大小写转换
text-transform:uppercase|lowercase|capitalize;
4）首行缩进
text-indent: px|em;
px 像素
em 相对单位
9、列表的属性
1）设置项目符号
list-style-type:none;
2）设置项目符号为图片
list-style-image:url();
3）设置项目符号的位置
list-style-position:outside|inside;
4）简写
list-style:none;
10、表格的属性
1）元素的宽高
width:;
height:;
2）表格的边框
border:1px solid red;
3）内容与边框之间的距离
padding: ;
4）边框折叠
border-collapse: collapse;
5）背景颜色
background-color: ;
6）背景图片
background-image:url();
7）单元格内容水平对齐方式
text-align:left|right|center;
8）单元格内容垂直对齐方式
vertical-align:top|bottom|middle;
11、背景的属性
1）背景颜色
background-color:transparent;
2）背景图片
background-image:url();
3）背景图片是否平铺
background-repeat:repeat|no-repeat|repeat-x|repeat-y;
4）背景图片的大小
background-size:x y;
取值 px % cover contain
5）背景图片定位
background-position:x y;
默认显示0 0
取值 px % left right top bottom center
6）背景图片固定
background-attachment:scroll|fixed;
7）简写
background:颜色 图片 平铺 大小 定位 固定;
12、雪碧图 css精灵 css sprite
1）定义
雪碧图是一项图片整合技术
把许多小图整合到一张大图上面
2）原理
background-image:url();
//引入图片
background-position:x y;
//移动位置
3）优点
①减少页面的http请求
②减少了图片的字节数
③减少图片命名困扰
4）缺点
①整合图片比较麻烦
②移动的时候比较麻烦
13、盒模型
1）标准盒模型 w3c盒模型
①组成部分
content+padding+border+margin
②实际宽度
width+padding+border+margin
③content 内容区域
width:;
height:;
min-width:;
max-width:;
min-height:;
max-height:;
块级元素默认宽度100%，行内元素默认宽度由内容撑开
块级元素和行内元素的高度默认都由内容撑开
块级元素可以设置宽高，行内元素设置宽高不生效
④padding 内边距 不能设置负值和auto
设置内容与边框的距离
padding:value; 四周
padding:value value; 上下 左右
padding:value value value; 上 左右 下
padding:value value value value; 上 右 下 左
padding-top:;
padding-bottom:;
padding-left:;
padding-right:;
注意：padding会撑大容器
⑤border 边框
border-style:solid|dotted|dashed|double|none; 必须属性，边框的样式，默认3px 黑色
border-color:; 边框的颜色
border-width:; 边框的宽度
简写：border:1px solid red; 四周的边框
border-top:1px solid red;
border-top-style:;
border-top-color:;
border-top-width:;
border-bottom:1px solid red;
border-bottom-style:;
border-bottom-color:;
border-bottom-width:;
border-left:1px solid red;
border-left-style:;
border-left-color:;
border-left-width:;
border-right:1px solid red;
border-right-style:;
border-right-color:;
border-right-width:;
⑥margin 外边距 可以取正负、auto
设置元素之间的距离
margin:value; 四周
margin:value value; 上下 左右
margin:value value value; 上 左右 下
margin:value value value value; 上 右 下 左
margin-top:;
margin-bottom:;
margin-left:;
margin-right:;
a、块级元素水平居中
div{
width: ;
margin:0 auto;
}
b、垂直方向上外边距合并问题
当垂直方向上外边距相撞时，取较大值
浮动元素不合并
c、margin-top问题
第一个块级子元素设置margin-top时，父元素会跟着一下走下来
解决：
1.父元素加 overflow:hidden;
2.父元素或者子元素浮动
3.父元素加border:1px solid transparent;
4.父元素加padding-top:1px;
2）怪异盒模型 IE盒模型
①组成部分
content+padding+border+margin
②实际宽度
width+margin
width包含了padding和border
③盒模型相互转换
box-sizing:content-box; 默认值 标准盒模型
box-sizing:border-box; 怪异盒模型
3）弹性盒模型 伸缩盒模型 flexBox
在弹性盒模型中float和clear不生效
①写在父元素上的属性
a、开启弹性盒
display:flex;
子元素默认水平排列、
b、设置弹性盒的方向
flex-direction:row|column|row-revers|column-reverse;
row：默认值 子元素默认水平排列
column：子元素垂直排列
row-revers：子元素水平倒序排列
column-reverse：子元素垂直倒序排列
c、设置子元素在主轴的对齐方式
默认主轴为x轴，侧轴为y轴
当子元素垂直排列时，y轴为主轴，侧轴为x轴
justify-content:flex-star|flex-end|center|space-between|space-around;
flex-star：默认值 弹性盒的开始
flex-end：弹性盒的结束
center：居中
space-between：在子元素之间平均分配父元素剩余的空间(子元素间距)
space-around：在子元素之间分配父元素剩余的空间，两侧是中间的一半
d、设置子元素在侧轴的对齐方式
align-items:flex-star|flex-end|center;
②写在子元素上的属性
flex-grow:number;
设置子元素怎么分配父元素剩下的空间
14、浮动 float
1）原理
元素浮动以后排除到普通文档流之外
浮动以后元素在页面中不占据位置
浮动后碰到父元素的边框或者浮动元素的边框就会停止
浮动不会重叠
浮动只有左右浮动
浮动后所有元素转换为块级元素
2）语法
float:left|right|none;
3）清除浮动的方法
元素浮动后在页面中不占据位置，如果父元素不设置高度，父元素的高度就会坍塌，对后面的元素产生影响
①浮动元素的父元素加overflow:hidden|auto; (自动找高)
②浮动元素的父元素加高（高度已知）
③受影响的元素加clear:left|right|both;(高度没有找到)
④空div法 (父元素高度找到，但页面会增加许多div元素)
浮动元素后面加一个空div
空div{clear:both;}
⑤伪对象法
浮动元素的父元素::after{
content:"";
display:block;
clear:both;
}
15、元素定位
position:;
属性值：
1）静态定位
static 默认值 没有定位
2）相对定位
position:relative;
相对于自己原位置定位
定位后原位置保留
配合left、right、top、bottom移动
应用场景：
①自己小范围移动
②配合绝对定位使用
3）绝对定位
position:absolute;
相对于已经定位的父元素定位
如果父元素没有定位，逐级往上找，最后相对于body定位
定位后原位置不保留
配合left、right、top、bottom移动
应用场景：
形成独立的一层
4）固定定位
position:fixed;
相对于浏览器窗口定位
定位后原位置不保留
配合left、right、top、bottom移动
应用场景：
固定在页面某个位置
5）堆叠顺序
z-index:number;
取值越大，层级越往上
可以取负值
同时定位后，后面的元素在上面
必须配合定位使用（relative、fixed、absolute）
16、display属性
display: ;
block 块级元素
inline 行内元素
inline-block 行内块，既在同一行显示，又可以设置宽高
**行内块会识别代码之间的空白**
常见行内块：img、input、button等
none 隐藏，隐藏后不占据位置
flex 弹性盒模型
table 表格
table-cell 单元格、
17、不占据页面位置的属性
display:none;
float:left|right;
position:absolute;
position:fixed;
元素默认宽度由内容撑开
18、display:none;
和visibility:hidden;
和opacity:0;
和overflow:hidden;的区别
display:none; 隐藏元素自己，隐藏后不占据位置
visibility:hidden; 隐藏元素自己，隐藏后原位置保留
opacity:0; 设置元素透明度为0，隐藏后原位置保留
overflow:hidden; 溢出部分隐藏
19、居中问题
1）元素内容水平居中
text-align:center;
2）一行文字垂直居中
行高等于高
line-height:;
3）块级元素水平居中
margin:0 auto;
4）多行内容垂直居中
自己 margin: px 0;
父元素 padding: px 0;
5）子元素在父元素中水平垂直居中
①宽度已知
<div class="box">
<div class="box1"></div>
</div>
a、绝对定位
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 150px;
top: 150px;
}
</style>
b、绝对定位
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
c、margin
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
margin: 150px; //子元素设置margin
}
</style>
b、padding
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
padding: 150px; //父元素padding
box-sizing: border-box;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
e、弹性盒
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
display: flex; //父元素开启弹性盒
justify-content: center;
align-items: center;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
f、表格法
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
/* 转换为单元格 */
display: table-cell;
/* 单元格内容垂直居中 */
vertical-align: middle;
/* 单元格内容水平居中 */
text-align: center;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
display: inline-block;
}
</style>
g、表格法
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
/* 转换为单元格 */
display: table-cell;
/* 单元格内容垂直居中 */
vertical-align: middle;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
margin: 0 auto; //子元素设置水平居中
}
</style>
h、绝对定位配合位移
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box1{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); //位移
}
</style>
②子元素宽高未知
<div class="box">
<div class="box1">哈哈哈哈哈哈哈哈</div>
</div>
①弹性盒法
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
display: flex; //开启弹性盒
justify-content: center;
align-items: center;
}
.box1{
background-color: pink;
}
</style>
②绝对定位配合位移
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box1{
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
20、三栏布局
左右两侧固定宽度，中间跟着浏览器缩放
1）弹性盒法
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
.box{
display: flex;
}
.left{
width: 200px;
height: 200px;
background-color: pink;
}
.right{
width: 200px;
height: 200px;
background-color: palegoldenrod;
}
.center{
height: 200px;
background-color: skyblue;
flex-grow: 1; //弹性盒子元素属性
}
</style>
2）绝对定位法
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
.box{
position: relative;
}
.left{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
.right{
width: 200px;
height: 200px;
background-color: palegoldenrod;
position: absolute;
top: 0;
right: 0;
}
.center{
height: 200px;
background-color: skyblue;
margin-left: 200px;
margin-right: 200px;
}
</style>
3）浮动
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
<style>
.box{
}
.left{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: right;
}
.center{
height: 200px;
background-color: skyblue;
}
</style>
4）圣杯布局和双飞翼布局
中间部分最先加载
21、C3新特性
1）选择器
伪对象选择器 属性选择器 伪类选择器
2）弹性盒模型
display:flex;
3）圆角
border-radius: ;
border-radius: 50%; //变圆
4）盒阴影
box-shadow: 水平方向偏移位置 垂直方向偏移位置 模糊度 阴影尺寸 颜色 位置（outset|inset）;
5）字阴影
text-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色;
6）背景渐变
①线性渐变
background: linear-gradient(渐变的方向,颜色1,颜色2,...);
②射线渐变
background: radial-gradient(渐变的中心点,渐变的形状,颜色1,颜色2,...);
7）转换 变型
transform:translate() rotate() scale() skew();
①位移 单位px
transform:translate(x,y);
transform: translateX();
transform: translateY();
②旋转 单位deg
正：顺时针
负：逆时针
transform: rotate(30deg);
transform-origin: right bottom; //设置旋转中心为右下，默认为中心
③缩放
取值 0-1 缩小， >1 放大 ,默认值1
取一个值==等比例放大/缩小
transform: scale(x,y);
transform: scaleX();
transform: scaleY();
④倾斜 单位deg
transform: skew(x,y);
transform: skewX();
transform: skewY();
8）过渡
transition:过渡的属性 持续时间 速度变化类型 延迟时间;
①过渡的属性——必须
transition-property: all;
可以过渡的属性：
取值为颜色
取值为数值
变形（转换）transform
背景渐变 xxxxx-gradient
阴影 shadow
②过渡的持续时间——必须
transition-duration: s|ms;
③过渡的速度变化类型——可选
transition-timing-function: ;
ease 默认值 先加速后减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
linear 匀速
④延迟时间——可选
transition-delay: s|ms;
9）动画
①定义动画
@keyframes name{
0%{
}
百分比{
}
100%{
}
}
②调用动画
animation: name duration timing-function delay iteration-count direction fill-mode;
animation-name: ; ——必须 动画名称
animation-duration: ; ——必须 持续时间
animation-timing-function: ; 速度变化类型
animation-delay: ; 延迟时间
animation-iteration-count: infinite|number; 播放次数
animation-direction: alternate; 播放方向
animation-fill-mode:forwards; 动画停在最后一帧
animation-play-state:running| paused; 动画播放状态
10）媒体查询
响应式布局
内部引入：
/* 移动端 */
@media screen and (max-width: 768){
}
/* iPad端 */
@media screen and (min-width: 768) and (max-width: 992px){
}
/* pc端 */
@media screen and (min-width:992px) {
}
外部引入：
<!-- 移动端 -->
<link rel="stylesheet" href="" media="only screen and (max-width:768px)">
<!-- iPad端 -->
<link rel="stylesheet" href="" media="only screen and (min-width:768px) and (max-width:992px)">
<!-- pc端 -->
<link rel="stylesheet" href="" media="only screen and (min-width:992px)">
11）多列
报纸类型布局：
column-count: ; 列的数量
column-gap: ; 列之间的距离
column-rule: 1px solid red; 列之间的边框
12）厂商前缀
解决c3新特性兼容性问题
浏览器 厂商前缀 内核
谷歌 -webkit- blink
苹果 -webkit- webkit
火狐 -moz- gecko
欧朋 -o- blink
IE -ms- trident
13）css hack
解决IE6 7 8
①条件hack
<!--[if 条件]>
<![end if]-->
②属性前缀和后缀
前缀 + - * # _
后缀 \0 \9 \9\0 !important
14）iconfont 字体图标
准备：
前往阿里巴巴矢量图标库（iconfont.cn）
选取需要的图标
添加到购物车
下载代码
解压到css文件夹下
使用：
①引入
<link rel="stylesheet" href="css/iconfont.css">
②元素使用
打开相应的iconfont.html 复制代码
<span class="iconfont"></span>
553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
