1.简介
1.1 网页的结构
前端的三种语言：HTML(结构)，CSS(表现)，JavaScript(行为)
<html lang="en"> 告诉浏览器你写的是英文网站，到时候会弹出是否翻译，中文则为<html lang="zh">
1.2 HTML中的"实体"
- " " 空格
- ">"是大于
- "<"是小于
1.3 meta 标签
meta主要用于设置网页的元数据，元数据是并不是给用户看的，其组成有两个：name 指定数据名称，content 指定数据内容
注意：meta并不是键，name才是，例如 charset是键，UTF-8是值。
charset: 网页采用的字符集
keywords: 搜索引擎用的关键词，用逗号隔开
description: 搜索引擎蓝字下面的那个
auther: 作者
title: 标题，会作为搜索引擎的结果标题表示
http-equiv 协议，其中http-equiv=“refresh” 几秒后跳转网页到url
<meta charset="UTF-8">
<meta name="keywords" content="HTML5,前端，CSS">
<meta name="description" content="LaLaLaLaLaLaLaLa">
<meta http-equiv="refresh" content="3;url=http://www.swu.edu.cn">1.4 语义化标签
标题标签
- h1~h6一共有6级标题，重要性递减
- p标签，表示一个段落，也是一个块元素
- hgroup标签：将h标题分组
- em是语音语调的加重，是一个行内元素
- strong表示强调
- blockqueue 表示一个长引用
- q 表示一个短引用
- br 换行
- pre 按原文显示（用了多少空格和回车，放到页面上就是一样的）
- 还有很多，实现效果有是删除线，或者斜体，或者下划线，下划点的，开发用到的不多，现用现搜就好了。
结构化语义标签(用的不多)
- header: 网页头部
- main: 网页的主体部分(只有一个)
- footer: 网页底部
- nav: 网页的导航
- aside: 侧注释，与主体相关的其他内容
- article 独立的文章
- section: 其他的独立区块
1.5 列表
- 无序列表 ul
- 有序列表 ol
- 定义列表 dl
-
- dt 定义的内容
-
- dd 对定义进行解释说明
- 内容用 li
<dl>
<dt>列表问题</dt>
<dd>列表形式</dd>
<dd>列表模式</dd>
...
</dl>list-style-position: inside;小li的圆点在里面
list-style-position: outside;在外面
1.6 超链接
超链接让页面跳转到另一个位置或者其他页面,用a定义超链接
注意：ID是唯一属性，不能一样，字母开头，区分大小写，靠前的元素优先生效
a的属性：
- href:目标跳转路径
-
- 值可以是外部网站地址，也可以是内部页面地址
-
- #是回到顶部
-
- #ID,跳转到页面指定位置,也就是锚链接
-
- 在开发中可以用javascript:;这样什么也不发生
- 还可以拨号，发邮件，发短信
- target属性，可选值
-
- _self 默认值，在当前页面打开
-
- _blank 在新的页面打开
关于锚链接
<!-- 这是页面上的一个锚点，可以设置一个id -->
<h2 id="section1">第1节</h2>
<!-- 这是指向页面上第1节的锚链接 -->
<a href="#section1">跳转到第1节</a>
<!-- 这是指向其他页面上第1节的锚链接 -->
<a href="second.html#section1">跳转到second.html页面的第1节</a>1.7 图
img标签用于引入图片
属性：
- src 属性指定的外部路劲
- alt 对于图片的描述，描述默认情况下是不会显示的，会在图片显示不出来的时候显示，搜索引擎会通过alt来搜索图片
1.8 内联框架iframe
内联框架，用于向当前页面中引入其他页面
- src 指定要引入的网页路径
- frameborder 只有0/1 就是显示与不显示边框
用途：
- 嵌入视频：如 YouTube、Vimeo 等视频平台提供的嵌入代码；
- 加载广告：广告常常通过 iframe 嵌入，以确保广告内容与主页面隔离；
- 嵌入外部内容：将一个完全独立的页面嵌入到当前页面中，比如加载第三方应用、表单等；
- 内嵌文档：将 PDF、HTML、网站等文件展示在网页中；
- 跨域内容嵌入：通过 iframe 可以显示来自不同域名的内容，但需要考虑一些安全限制。
内联框架是把一个网页做为窗口引入现在的网页，注意的是内联框架的内容不会被搜索框架所索引
<iframe src="https://im.qq.com/index/" frameborder="0" width=800 height=400></iframe> //这样的话就是把qq的网页引入了运行结果：就是把 qq这个网页内嵌了。
<a href="https://www.bilibili.com" target="bilibili">点我看视频</a><br>
<iframe name="bilibili" frameborder="0" width="1000" height="500"></iframe>运行结果：首先iframe不显示，点击a链接后显示。
这个还挺牛的，在搜索框输入点击搜索，B站的搜索框就可以同时进入搜索。
<form action="https://www.bilibili.com/search" target="container">
<input type="text" name="keyword">
<input type="submit" value="搜索">
</form>
<iframe name="container" frameborder="0" width="900" height="600"></iframe>
运行结果：
1.9 音视频
audio 向网页引入音频文件，音视频文件引入的时候默认情况下是不允许用户操作的
属性:
- controls 只有键没有值 是否允许用户控制播放
- autoplay 音频是否自动播放(兼容性差，例如火狐不自动播放),
自动播放的前提是先设置静音
<audio src="./source/audio.mp3" controls autoplay></audio>除了通过src实现之外，还可以通过source实现,这样可以实现对于不同浏览器提供最佳匹配文件,IE8不支持，所以要输出提示，原理是：进入audio标签，如果匹配到source,那么浏览器会自动忽略内部其他代码，实现选择，IE8不认识source所以会自动忽略所有source标签，于是只找到提示信息，自动不全p标签，输出提示
<audio controls>
对不起你的浏览器不支持播放音频，请升级浏览器
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="">
</audio>视频标签是video，同理
1.10 相对路径
./ 同级
/ 下一级
../ 上一级
1.11 表格
rowspan：指定要跨的行数。colspan：指定要跨的列数。
<table border="1">
<!-- 在table中使用tr表示一行,有几个tr就表示几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格,有几个td就是有几个单元格 -->
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<!-- 他会只占自己大小不合并单元格，除非指定 -->
</tr>
</table>empty-cells -隐藏没有内容的单元格-生效前提：单元格不能合并。
caption-side -设置表格标题位置 -默认是在上面
1.12 长表格
可以将一个表格分为三部分
- 表头 thead
- 主体 tbody
- 底部 tfoot
- th 表格头部单元格
1.13 表格的样式
- 将元素设置为单元格（整体垂直居中）
display: table-cell;
vertical-align: middle;1.14 表单
<form action="./target.html">
<!-- 添加表单项 -->
<!-- 文本框
注意
数据要提交的服务器中必须要指定一个name
-->
文本框<input type="text" name="username">
密码框<input type="password" name="pw">
<br>
单选按钮
<!--必须有一个相同的name属性，否则不知道哪两个选项是一组的 -->
<input type="radio" name="hrll" value="a">
<input type="radio" name="hrll" value="b" checked>
<br>多选
<input type="checkbox" name="tt" value="1" checked>
<input type="checkbox" name="tt" value="2" checked>
<input type="checkbox" name="tt" value="3">
<br>
下拉列表
<select name="aa">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<!-- 提交按钮 -->
<input type="submit" value="注册">
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 普通按钮 -->
//普通按钮的type值为button，若不写type值，默认是submit会引起表单的提交。
<button type="button" onclick="alert('按钮被点击了')">点击我</button>
</form>1.15 表单的属性
- action -表单提交的地址
<!-- 关闭自动填充 -->
<form action="./target.html" autocomplete="on">
<input type="text" name="username" value="hello">
<br><br>
<input type="color">
<!-- 自动获取焦点 -->
<input type="email" autofocus>
//提交按钮
<input type="submit">
<!-- 将表单设置为只读 数据提交 -->
<input type="text" value="fasd" readonly>
<!-- 将表单设置为禁用 数据不提交 -->
<input type="text" value="fasd" disabled>
<br>
<input type="reset">
<br>
<input type="button" value="按钮">
</form>隐藏域（Hidden Field） 是一种在网页表单中使用的 HTML 元素，它的作用是存储用户或程序需要传递的信息，但这些信息不会显示在网页上供用户查看或修改。隐藏域通常用于提交一些不需要用户直接输入的值，比如会话信息、状态信息、标识符等。
在 HTML 表单中，隐藏域使用 <input> 标签，并且设置 type="hidden" 属性。比如：
<form action="/submit" method="post">
<input type="hidden" name="user_id" value="12345">
<input type="submit" value="提交">
</form>
在这个例子中，<input type="hidden"> 元素存储了一个名为 user_id 的值（12345），当用户提交表单时，这个值会作为表单的一部分被发送到服务器，但它不会显示在网页上。
常见用途：
- 传递额外信息：传递一些用户不需要手动输入的信息（如当前用户的 ID、会话标识符等）。
- 防止表单重复提交：可以用隐藏域存储一个唯一的 token，防止用户提交重复的表单。
- 传递状态数据：比如分页时，当前页数等。
- 存储一些私密信息：比如登录用户的状态、访问权限等信息。
安全性：
虽然隐藏域不会在页面上显示，但它的值可以通过浏览器的开发者工具（如 Chrome 的“开发者工具”）查看到。因此，隐藏域的内容并不适合存储敏感信息（如密码），如果需要存储敏感数据，应使用加密技术，或者使用服务器端的会话管理。
1.16 文本域
<textarea name="msg" rows="22" cols="30">我是文本域</textarea>
1.17 label标签
label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与label关联方式如下：
- 让
label标签的for属性的值等于表单控件的id。 - 把表单控件套在
label标签的里面。
//第一种
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
</form>
//第二种
<form>
<label>用户名：
<input type="text" name="username">
</label>
</form>
1.18 fieldset与legend的使用
<fieldset> 和 <legend> 标签用于在 HTML 表单中创建分组，帮助将相关的表单控件组织在一起。<fieldset> 用来定义表单控件的分组，而 <legend> 用来为这个分组添加标题。这样可以使表单结构更加清晰，用户界面更具可读性。
<fieldset>标签用来将表单控件分组。在这个例子中，比如两个分组，一个是“个人信息”，另一个是“地址信息”。<legend>标签是分组的标题。在每个fieldset内部，我们使用<legend>来为分组提供一个描述性的标题，帮助用户理解表单控件的用途。
效果：
- "个人信息" 和 "地址信息" 会分别作为两个分组的标题，呈现在表单上。
- 这些分组会在视觉上有所区分（通常会有边框和标题），使表单更加结构化，方便用户填写。
2. CSS基础
2.1 CSS简介
网页的三个部分
- 结构HTML
- 表现CSS
- 行为JS
CSS的定义方式
- 将样式编写到style标签里，过css选择器为多个标签设置样式，并且只修改一次更方便对样式进行复用
问题：只对一个网页起作用，里面的样式不能跨网页复用
- 将css样式写到一个css文件里
通过link链接外部css文件，写到外面可以触发浏览器的缓存机制，从而加快网页的加载速度
2.2 CSS基本语法
- 注释是
/*...*/，会被浏览器自动忽略
2.3 CSS 选择器基础
- 元素选择器
-
- 作用，根据标签名确定指定元素
-
- 语法：标签名{}
- ID选择器
- class
- 统配选择器：
-
- *{}
2.4 CSS的复合选择器
- 交集选择器，同时选择有几个类的元素，两个选择器直接写在一起
注意：交集选择器中如果有元素选择器，必须以元素选择器开头
- 并集选择器，同时选择多个选择器对应的元素，用
,分割开
2.5 关系选择器
- 子元素选择器：
-
- 作用：指定父元素的子元素
-
- 语法 父元素>子元素
- 兄弟选择器：相邻兄弟-选择具有相同父亲的兄弟元素（p+span{...}）——选中p标签后的span兄弟标签
- 下边所有的兄弟兄弟选择器
-
- 选择具有某个元素之后所有的相同父亲的兄弟元素
-
- 语法:~
2.6 属性选择器
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]以属性值开头的元素
[属性名$=属性值]以属性值结尾的元素
[属性名*=属性值]以属性值含有某值的元素
p[title=abc]{ //把title=abc的段落变成橙色
color:orange;
}
p[title^=abc]{ //把以title=abc开头的段落变成橙色
background-color: red;
}2.7 伪类选择器
伪类：不存在的元素，特殊的类
伪类用来描述一个元素的特殊形态，比如第一个子元素，被点击的元素，鼠标移入的元素
伪类一般情况下是使用:开头
:first-child 第一个元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
如果直接写n，相当于是0-INF
如果直接写2n，相当于是所有偶数元素
如果直接写2n+1，相当于是所有奇数元素(有3)
括号里也可以是odd（奇数）/even（偶数）
- 加type的child
-
- :first-of-type
-
- :last-of-type
-
- :nth-of-type
- not是否定伪类
-
- 将符合条件的元素从选择器去除
p:first-child会选中.parent中的第一个p元素（如果它是第一个子元素）。p:first-of-type会选中.parent中的第一个p元素（即使它不是第一个子元素，只要它是第一个<p>元素）。
2.8 a元素的伪类选择器
a:link{...}:正常的链接
a:visited{...}:访问过的链接，出于用户隐私考虑，visited只能改颜色
a:active{...}:鼠标点击
a:hover{...}: 鼠标移入
注意的是伪类一定要按照以上顺序写:link,visited,active,hover(LoVe A Ha)
2.9 伪元素选择器
伪元素表示页面中并不真实存在的一些元素(特殊的位置)，使用::开头
- ::first-letter
- ::first-line
- ::selection 选中的内容
- ::before,注意:必须结合content结合使用
- ::after,注意:必须结合content结合使用
:checked-被选中的
:enable-可用的
:disabled-不可用在CSS中，:target 伪类用于选中当前URL的目标元素，即页面中与URL中的片段标识符（即 #id）相匹配的元素。简单来说，当页面的URL中包含一个哈希（#）符号和一个ID时，:target 伪类会选中该ID对应的元素。
- 链接（如
<a href="#section1">跳转到部分 1</a>）使用了哈希链接，当点击链接时，页面会跳转到指定的部分（即#section1）。 - 使用了
:target伪类，当页面的URL包含#section1时，页面中的相应部分会显示相应样式。
用途：
- 导航效果：点击页面中的导航链接时，目标区域突出显示。
- 单页面应用：实现类似“tab”切换的效果，通过
:target切换显示不同的内容区域。 - 折叠/展开面板：点击一个链接展开某个隐藏的面板，通过使用
:target来控制显示和隐藏的内容。
注意：
:target只会影响页面当前URL中包含的片段标识符（即#后面的部分）。:target并不是持久性的，它会在URL发生变化时实时更新，因此通常需要配合JS或CSS动画来实现更加流畅的效果。
语言伪类：:lang()，根据指定的语言选择元素（本质是看lang属性的值）。
<style>
div:lang(en){
color:red;
}
</style>
<body>
<div lang="en">我的颜色是红色
</div>
</body>2.10 样式的冲突与优先级问题
行内样式 > 内部样式 = 外部样式
!important>行内样式>id选择器>类选择器>元素选择器>*>继承的样式- 内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（后来者居上）。
- 同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（后来者居上）。
发生样式冲突的时候，显示的效果是由显示的优先级决定的
- 比较优先级的时候要把所有的求和计算，最后优先级高的优先显示，分组选择器单独计算
- 选择器累加不会超过下一级的，也就是不进位，如果优先级计算后相同优先使用考下的样式
- 在属性结束后加上 !important; 会获取最高优先级，慎用！！
| 选择器的权重 | 优先级 |
| 内联样式 | 1,0,0,0 |
| ID选择器 | 0,1,0,0 |
| 类和伪类选择器 | 0,0,1,0 |
| 元素选择器 | 0,0,0,1 |
| 通配选择器 | 0,0,0,0 |
| 继承的样式 | 没有优先级 |
2.11 css字体属性
font-family：控制字体类型
div{
font-family:"STCaiyun","Microsoft YaHei",sans-serif
}font-style：控制字体是否为斜体。
div{
font-style:italic;
}3. 文档流与盒子模型
3.1 文档流
- 文档流是网页的基础
我们创建的元素默认是在文档流中进行排列
3.2 文本属性
- 文本间距
字母间距:letter-spacing
单词间距:word-spacing (通过空格识别单词)
- 文本修饰 text-decoration,常用为none,可实现下划线，删除线等样式
- 文本缩进 text-index
- 行高 line-height-控制一行文字的高度
3.3 文本垂直对齐
1.单行
- 水平
<div class='box' style="text-align: center;">hello world</div>- 垂直
<div class="box2" style="width:150px;height:100px;line-height: 100px;">文本垂直水平居中</div>2.多行
- verticle-align:middle
通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要注意，vertical生效的前提是元素的display：table-cell或者元素是行内元素。所以要对块元素加上display：table-cell。
- display:flex
实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
- display:table-cell。
给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中
- translateY(-50%)
给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。
3.4 盒子模型基础
- 每一个盒子都有以下几个部分
-
- 内容区(content)
-
- 内边距(padding)
-
- 边框(border)-对于
-
- 外边距(margin)
对于border,可以单独设置各个方向的边框，比如 border-right-color
一个元素在他的父元素中
子元素的margin-left+border-left+padding-left+width+padding-right+border-right=父元素宽度(必须满足)
等式不成立的时候，我们称他为过度约束，这个时候我们会自动调整
3.5 盒子模型垂直方向布局
盒子的高度默认的父元素高度被子元素撑开
子元素在内容区中排列
- 如果子元素的大小超过父元素则子元素会从父元素中溢出
- 使用overflow属性来设置父元素如何处理溢出的子元素
可选值：
- visible：(默认值)子元素从父元素中溢出，在父元素的外部显示
- hidden:溢出的元素将会被裁减而不显示
- scroll:生成两个滚动条，通过两个滚动条实现浏览
- auto：根据需要生成两个滚动条
3.6 外边距折叠问题
相邻的垂直方向的外边距会发生折叠现象
兄弟元素--兄弟元素之间相邻垂直外边距会取较大值,如果两个都是负数取绝对值较大的
父子元素--父子元素之间的外边距子元素会传递给父元素,父子外边距折叠会对页面造成影响
3.7 行内元素的盒子模型
display 用来设置元素显示的类型，其可选值有
inline 设置为行内元素
blockn 行内转换块元素
inline-block 既可以设置宽度又不会独占一行,类似于替换元素
table 表格
none 隐藏，啥都没了
visibility: hidden; 隐藏了，但是占据位置
3.8 清除默认样式(重置样式表)
reset.css去除了所有的css样式
normalize.css是将css样式进行了统一但不去除,更推荐- *{margin:0;padding:0}
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/normalize.css">3.9 盒子尺寸的计算方式
默认情况下盒子的可见框大小是由内容区，内边距，边框共同确定的
box-size 可以设置盒子的计算方式，设置width，height的作用域，可选值：
content-box 默认值，使用宽度高度设置内容区的大小
border-box 宽和高用来设定整个盒子可见区的大小
3.10 盒子的轮廓和圆角
outline 用来设置元素的轮廓线，用法和boarder一样，但是轮廓不影响可见框的大小
boxs-shadow用来设置元素的阴影效果，不影响页面布局
- 两个参数是阴影的右偏移量 影印的下偏移量
- 第三个是影印的模糊半径
- 第四个是影印的颜色
3.11 行内块的幽灵空白问题
行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
比如说图片和文字都和底部对齐但是图片并不完全贴合底部，会有一段空白距离。
解决方案:
1.给行内块元素，比如img设置 vertical-align:bottom
2.设置图片为 display:block
4. 浮动布局
4.1 float属性
使用float属性设置元素的浮动
可选值：
- none 默认值元素不浮动
- left 向左浮动
- right 向右浮动
元素设置浮动以后会完全从文档流脱离
元素下面还在文档流中的元素会向上
- 浮动可以让元素横向排列
- 浮动元素不会从父元素中移出
- 浮动元素向左右移动不会超过前面的元素
- 如果浮动元素上面是没有浮动的块元素则浮动无法上移
- 浮动的主要作用是让元素水平排列，通过浮动可以制作水平方向上的布局
4.2 浮动的特点
浮动不会盖住文字，文字会自动环绕在浮动元素周围
元素从文档流脱离之后会发生变换，是不占空间的。相当于是悬浮在空中，而且默认宽高都是被内容撑开的，并且可以设置宽高
4.3 高度塌陷问题
BFC块级格式化环境
BFC是CSS中的一个隐藏的属性，可以为一个元素开启BFC，开启BFC元素会变成一个独立的布局区域
元素开启BFC之后的特点：
开启BFC的元素不会被浮动元素所覆盖
开启BFC元素子元素和父元素的外边距不会重叠
开启BFC可以包含浮动的子元素
可以通过特殊方式开启BFC：
设置元素浮动(不推荐)
将元素设置为行内块元素(不推荐)
overflow 设置非visible（一般设置auto或者hidden）
高度塌陷问题：
在浮动布局中，父元素的高度默认被子元素撑开的子元素浮动以后会完全脱离文档流，子元素从文档流脱离将无法撑起父元素的高度，导致父元素高度丢失
父元素丢失以后，其下的元素会自动上移，导致页面布局混乱所以高度塌陷是浮动布局较常见的一个问题我们必须处理.
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。
4.4 BFC最优解决方案-解决高度塌陷
直接引入clearfix类
.clearfix::before,
.clearfix::after{
content: "";
display: block;
clear: both;
}<div class="box1 clearfix">
<div class="box2"></div>
</div>原理比较简单，首先设置一个前后属性，里面填充一个空内容，但是如果是内联的话就不会显示，我们必须设置为非内联，为了解决外边距重叠问题，设置为table,最后为了解决BFC所以设置clear:both
4.4 浮动练习
总而言之，就是子元素使用浮动，则其他兄弟元素也要使用浮动，但是容纳他们的父元素要清除浮动。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动布局练习</title>
<style>
/* 首先清楚默认样式 */
*{
margin: 0;
padding: 0;
}
/* 之后左浮动只需要加上class，不需要再选中选择器 */
.leftfix{
float:left
}
/* 右浮动同理 */
.rightfix{
float:right
}
/* 清除浮动同理 */
.clearfix::after{
content: '';
display: block;
clear: both;
}
.container{
width: 960px;
/* 可以临时设置高度和背景颜色，便于观察 */
/* height: 200px;
background-color: gray; */
/* 让版心居中 */
margin: 0 auto;
/* 让文字水平居中，放container里，之后的还能继承 */
text-align: center;
}
.logo{
width: 200px;
}
.banner1{
width: 540px;
margin: 0 10px;
}
.banner2{
width: 200px;
}
.logo,.banner1,.banner2{
height: 80px;
background-color: pink;
/* 垂直居中 */
line-height: 80px;
}
.menu{
height: 30px;
background-color: skyblue;
margin-top: 10px;
line-height: 30px;
}
.content{
margin-top: 10px;
}
.item1,.item2{
width: 368px;
height: 198px;
line-height: 198px;
border: 1px solid black;
margin-right: 10px;
}
.bottom{
margin-top: 10px;
}
.item3,.item4,.item5,.item6{
width: 178px;
height: 198px;
line-height: 198px;
border: 1px solid black;
margin-right: 10px;
}
.item7,.item8,.item9{
width: 198px;
height: 128px;
line-height: 128px;
border: 1px solid black;
}
.item8{
margin: 10px 0;
}
.footer{
height: 60px;
line-height: 60px;
background-color: moccasin;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="page-header clearfix">
<div class="logo leftfix">logo</div>
<div class="banner1 leftfix">banner1</div>
<div class="banner2 leftfix">banner2</div>
</div>
<!-- 菜单 -->
<div class="menu">菜单</div>
<!-- 内容区 -->
<div class="content clearfix">
<!-- 左侧 -->
<div class="left leftfix">
<!-- 上 -->
<div class="top clearfix">
<div class="item1 leftfix">栏目一</div>
<div class="item2 leftfix">栏目二</div>
</div>
<!-- 下 -->
<div class="bottom clearfix">
<div class="item3 leftfix">栏目三</div>
<div class="item4 leftfix">栏目四</div>
<div class="item5 leftfix">栏目五</div>
<div class="item6 leftfix">栏目六</div>
</div>
</div>
<!-- 右侧 -->
<div class="right rightfix">
<div class="item7">栏目七</div>
<div class="item8">栏目八</div>
<div class="item9">栏目九</div>
</div>
</div>
<!-- 页脚 -->
<div class="footer">页脚</div>
</div>
</body>
</html>
5.定位
5.1 定位的简介
相对定位：当元素的position时
relate则开启了元素的相对定位
相对定位的特点
元素开启相对定位以后如果不设置偏移量不会发生任何变化
偏移量(off-set)top bottum left right
通常情况下我们四选二即可实现定位（top left）
5.2 绝对定位
- 当元素的position设置为absolute的时候开启了绝对定位
- 开启绝对定位之后不设置偏移量位置不会发生变化
- 开启绝对定位之后会从文档流脱离
- 绝对定位会改变元素的性质-> 行内变块，块的大小被内容撑开
- 绝对定位元素是相对于包含块进行定位的
5.3 固定定位
将元素的posituin设置为fixed
- 固定定位可以认为是一种特别的绝对定位
- 文档流脱离
- 位置不动
- 唯一不同的是他们的参考系一定是视口
5.4 粘滞定位
- 当元素的position属性设置为sticky则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素达到某个位置时将其固定
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>粘性定位</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
background-color: gainsboro;
}
.item {
background-color: gray;
}
.first {
background-color: green;
font-size: 40px;
/* 加上粘性定位 */
position: sticky;
/* 告诉它胶水胶在哪 */
/* 包含粘性定位的父容器也走了，胶水就失效了 */
top: 0px;
}
</style>
</head>
<body>
<div class="content">
<!-- 每一项 -->
<div class="item">
<div class="first">文章1</div>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
<h2>文章1</h2>
</div>
<div class="item">
<div class="first">文章2</div>
<h2>文章2</h2>
<h2>文章2</h2>
<h2>文章2</h2>
<h2>文章2</h2>
<h2>文章2</h2>
<h2>文章2</h2>
<h2>文章2</h2>
<h2>文章2</h2>
<h2>文章2</h2>
<h2>文章2</h2>
<h2>文章2</h2>
</div>
<div class="item">
<div class="first">文章3</div>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
<h2>文章3</h2>
</div>
</div>
</body>
</html>运行结果：文章1标题在自身的父元素还在视窗口时会固定在top:0px，当父元素随着滚动条离开视窗口，取消固定，此时文章2开始被固定
5.6 元素的垂直层级
对于开启了定位的元素，可以使用z-index指定元素的层级
- z-index需要一个整数作为参数,越大越优先显示
- 祖先元素的层级再高也不会盖住后代元素
5.7 版心
红色的区域，固定宽度显示网页内容
常用类名
6.H5
6.1 新增状态标签
meter标签，还有progress标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新增状态标签</title>
<style>
progress {
width: 50px;
}
</style>
</head>
<body>
<span>meter标签</span>
<!-- 最大值、最小值、当前值、警告最低值、警告最高值、最优值 -->
<meter max="100" min="0" value="97" low="20" high="80" optimum="90"></meter>
<span>progress标签：</span>
<progress max="100" value="97"></progress>
</body>
</html>
6.2 新增列表标签
details-用于展示问题和答案，或对专有名词进行解释
summary-被写在details里面，用于指定问题或专有名词。
<details>
<summary>未来世界中心（Epcot Center）</summary>
<p>Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性活动。</p>
</details>
6.3 新增文本标签
ruby-包裹需要注音的文字
rt-写注音，rt标签写在ruby的里面
<ruby> 汉 <rt>Hàn</rt> 字 <rt>Zì</rt> </ruby>
6.4 新增全局属性
6.5 H5兼容性
<!-- 让IE浏览器处于一个最优的渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对一些国产的“双核”浏览器的设置，让浏览器优先使用webkit内核去渲染网页 -->
<meta name="render" content="webkit">
7.CSS3
7.1长度单位
7.1.1 关于视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!– 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- width=device-width：视口宽度 = 设备宽度（逻辑分辨率的宽度）
- initial-scale=1.0：缩放1倍（不缩放）
7.1.2 适配方案
- 宽度适配：宽度自适应
-
- 百分比布局
- Flex 布局
- 等比适配：宽高等比缩放
-
- rem
- vw
rem-根元素字体大小的倍数，只与根元素字体大小有关,
- 1rem = 1HTML字号大小
7.1.3 rem布局
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
【意思主要是在自己写代码的时候就不用自己写媒体查询了。】
<body>
......
<script src="./js/flexible.js"></script>
</body>
JavaScript代码（flexible.js）
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = 12 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 24;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
// reset rem unit on page resize
window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function(e) {
if (e.persisted) {
setRemUnit();
}
});
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);
}
})(window, document);vw-视口宽度的百分之多少，比如说50vw就是视口宽度的50%
vh-视口高度的百分值多少。10vh 就是10%
混用问题
注：是否可以 vw 和 vh 混用呢？
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
7.2 background-clip
作用：设置背景图的向外裁剪的区域
border-box:默认值，从border区域开始向外裁剪背景
padding-box：从padding区域开始向外裁剪背景
content-box:从content区域开始向外裁剪背景
text:背景图只呈现在文字上
p {
border: 0.8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
background: linear-gradient(60deg, red, yellow, red, yellow, red);
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.border-box {
background-clip: border-box;
}
.padding-box {
background-clip: padding-box;
}
.content-box {
background-clip: content-box;
}
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0, 0, 0, 0.2);
}
7.3 background-size
作用：设置背景图的尺寸
语法：1.长度值 2.百分比 3.auto:默认值，背景图片的真实大小 4.contain 背景图片等比缩放 5.cover:背景图片等比缩放，直到完全覆盖容器
7.4 多背景图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多背景图</title>
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
background: url('../images/1.png') no-repeat left top,
url('../images/2.png') no-repeat right top,
url('../images/3.png') no-repeat left bottom,
url('../images/4.png') no-repeat right bottom;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7.5渐变-background-image
代码如下，用得不多，了解一下
.box1 {
background-image: linear-gradient(red,yellow,green);
}7.6 web字体
可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。
@font-face {
font-family: "情书字体"; //自定义名字
src: url('./font1/方正手迹.ttf'); //引入字体文件
}8.动画与过渡
8.1过渡
transition-property 指定要执行要被过渡的属性,多个属性之间’,‘隔开，所有属性都要过渡写all
transition-property: width;transition-duration 指定过渡效果的持续时间，时间可以分别指定
transition-duration: 1stransition-timing-function 过渡的时序函数，即过渡的执行方式，可选值：
- ease 默认值 开始慢先加速后减速
- linear 匀速直线
- ...
8.2 动画-很有用，可以实现好多效果
动画是可以自动触发的效果
设置动画效果必须先设置一个关键帧，关键帧设置了一个动画执行的每一个步骤
动画的属性设置全部是animation开头的:
- animation-name: 要对当前元素生效的关键帧的名字
- animation-duration: 动画的持续时
- animation-timing-function :动画显示形式
- animation-delay :动画的延时
- animation-iteration-count: 动画迭代次数可以指定次数"“无限执行infinite”
- animation-direction: 动画执行的方向
- normal 默认值 from到to运行每次都是这样
- reverse 反向
- alternate 当运行重复执行动画的时候偶数次反向执行
- animation-fill-mode: 动画执行结束的位置
- 正常情况下动画执行完毕之后并不会回到from的位置而是回到非动画的css样式
- none 默认值 动画执行完毕之后回到原来的位置
- forwards 动画执行完毕弧就地停下
- backwords 在动画开始的等待期间元素就处于from关键帧状态否则不提前进入关键帧
- both：结合了forwards和backwords
- animation-play-state: 动画的执行状态
- running 默认值 运行
- paused 动画暂停
以上全部使用animation一个实现，所以直接用且无顺序只要保证延时在后面写
/* 动画的调用 */
.box1 .box2{
transition: all 2s;
transition-timing-function: ease-out;
animation: test 2s;
animation-iteration-count: 4;
animation-direction: alternate;
}
/* 动画的实现 */
@keyframes test {
/* 指定动画的开始位置 from也可以写作0%*/
from{
margin-left: 0px;
}
33.5%{
margin-left: 10px;
}
/* 指定动画的结束位置 to也可以写作100%*/
to{
margin-left: 7000px;
}
}8.3 变形
变形就是指通过CSS来改变元素的形状或者位置
平移
transform不用在行内元素，使用时需要添加display
transform:translate3d(x, y, z);
- translateX() 沿着X轴平移
- translateY() 沿着Y轴平移
- translateZ() 沿着Z轴平移
比如
/* 水平+垂直位移 */
transform: translate(50px,50px);旋转：通过旋转可以是元素围绕xyz旋转指定角度
- transform: rotateX();
- backface-visibility: hidden; 是否显示元素的背面
缩放
- scaleX()
- 特殊的Z轴平移
Z轴平移就是在调整元素在Z轴的位置，正常情况下是调整元素和人眼之间的距离，距离越大元素离人越近
Z轴的平移属于立体效果(近大远小)默认情况下我们的网页时不支持透视的如果需要看到效果，必须设置网页的视距，设置方法为在html下写下(一般800-1200均可)
perspective: 800px;
变换原点
transform-origin:可以是百分比，数字，左右
8.4 多列布局
column-count：指定列的数量。例如，column-count: 3;表示将内容分为三列。column-width：指定列的最小宽度。浏览器会根据这个宽度自动调整列数，以适应容器的宽度。column-gap：指定列与列之间的间距。可以使用像素（px）、百分比（%）等单位。
多列布局就很适合报纸展示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局示例</title>
<style>
.container {
column-count: 3;
column-gap: 20px;
padding: 20px;
background-color: #f0f0f0;
max-width: 800px;
margin: 0 auto;
}
.container p {
margin: 0;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>问与答</h1>
<p>问题一：新的语法让 Vue 失去简单性，导致"意大利面条式代码"的出现，降低项目维护性。</p>
<p>尤雨溪： 正好相反，新的 API 就是为了提高项目长期维护性的。如果我们查看任何 javascript
项目，都会从入口文件开始阅读，该文件的本质是你的应用启动时被隐式调用的"main"函数。如果只有一个函数入口，会导致意大利面条代码，那所有的 js
项目都是意大利面条代码。显然不是的，因为开发人员通过代码模块化或者较小的函数来组织代码。另外，我同意新的 API
理论上会降低代码质量的最低门槛。但是我们可以使用以往防止代码变成意大利面条的手段缓解这种情况。另一方面，新的 API 可以提升代码质量的最高上限，相比 option api，你可以重构为质量更高的代码。而且，基于
Option api 你还得解决类似 mixins 的问题。很多人认为"Vue 失去简单性"，实际上只是失去组件内代码类型检查能力（就是你不知道一个变量时 data、method、还是 computed）。但是用新的
API，实现一个类型检测器也是非常容易实现以前的特性的。也就是说，你不应该被 option api 限制思维，而更多关注逻辑内聚问题。
</p>
<p>问题二：使用新 API 导致逻辑分散到不同地方，违背"关注点分离"</p>
<p>尤雨溪： 这个问题和项目文件组织方式问题类似。我们很多人都同意按文件类型组织（布局放 HTML，样式 CSS，逻辑
JS）并不是正确的方式，因为强制把相关代码分割到三个文件，只是给人一种“关注点分离”的错觉。这里的关键是“关注点”不是由文件类型定义。相反，我们大多数选择以功能或者职责来组织文件，这正是人们喜欢 Vue
单文件组件的原因。SFC 就是按功能组织代码的方法，但讽刺的是当首次引入 SFC 时，许多人也是拒绝的，认为它违反了关注点分离。
</p>
</div>
</body>
</html>
9 弹性容器与移动端(flex)
9.1 弹性盒/伸缩盒子
box-sizing 怪异盒模型
content-box 是默认值，此时宽高度设置的是盒子内容区的大小
border-box 此时设置的是盒子总大小
所谓伸缩盒子，就是flex
- 是css的另一种布局手段，主要用来代替浮动完成页面的布局
- 如果你不需要兼容老浏览器就用flex要是需要兼容PC就用float
- 伸缩盒可以使元素更有弹性，让元素可以跟随页面的大小而改变
- 弹性容器
-
- 要使用弹性盒子必须先将元素设置为弹性容器
-
- 通过display设置弹性容器
display:flex 设置为块级元素的弹性盒子
display:inline-flex 设置为行内块元素的弹性盒子
- 通过display设置弹性容器
- 弹性元素
-
- 弹性容器的子元素是弹性元素(弹性项目)
-
- 只有弹性容器的直接子元素蚕食元素，后代元素不是
-
- 一个元素既可以是弹性容器也可以弹性元素
弹性容器的属性
- flex-direction 用于指定弹性元素的排列方式，可选值有
-
- row (默认值),弹性元素在容器中水平排列，这个row是按书写顺序排列，中国是左到右他就是左到右
-
- row-reversw 反向水平排列
-
- column 弹性元素纵向排列 (自上向下)
- 主轴
-
- 弹性元素的排列方向称为主轴,例如row的时候主轴值自左向右…
- 侧轴
-
- 与主轴垂直方向的称为侧轴 一般不说具体的方向只说水平还是垂直
弹性元素的属性
- flex-grow 指定元素伸展的系数
-
- 当父元素有多余的空间的时候子元素如何伸展
-
- 父元素的剩余空间按比例分配
- flex-shrink 指定元素的收缩系数
-
- 当父元素中的空间不足以容纳所有的子元素时如何对子元素进行收缩
-
- 默认值是1 等比例收缩
-
- 0是不收缩
-
- 值越大收缩越多
9.2 弹性容器的使用
flex-wrap设置弹性元素是否在弹性容器中自动换行
- nowrap 元素不自动换行
- wrap 元素自动换行
- wrap-reverse 元素沿着辅轴反方向换行
flex-flow wrap和direction 的简写属性
justify-content 如何分配主轴上的空白空间 主轴上的元素如何排列，可选值
- flex-start 沿着主轴起边排列 主轴较大值处空白
- flex-end 元素沿着主轴终边排列
- center 元素居中排列 空白分布到两边
- space-around 空白分布到每一个元素的两侧 但是起始两个的左右是小一半
- space-evenly 空白分布到元素单侧 所有的空隙全相等 (唯独这一个兼容性的不好)
- space-between 空白分布元素之间，起始终止的左右没有
align 开头的是设置辅轴上的样式
alihn-items 是设置元素在辅轴上如何对齐
- 他设置的是元素间的关系
- stretch (默认值)将元素之间长度设置为相同值 这个行指的是与本行元素高度均相同，其他行不管
- flex-start 元素不会拉伸沿着辅轴起边对齐
- flex-end 辅轴终边对齐
- center 居中对齐
- baseline 基线对齐
align-content 辅轴上的空白空间对齐方式，同justify-content
align-self 用来覆盖覆盖元素的align-items，相当于单独修改
9.3 弹性元素的样式
弹性元素的增长系数flex-grow是分配是在宽度的基础上加上按比例分配的空白的空间
弹性元素的缩减系数flex-shrink
- 缩减系数的计算方式比较复杂
- 缩减多少是根据缩减系数和元素的大小来计算的
计算元素flex-basis在主轴上的基础长度的时候就忽略了width，
- 默认值是auto即参考元素自身的width
- 如果传递了一个具体的数字即以该值为准
可以理解为弹簧的三种状态
- flex-basic就是弹簧自然状态
- flex-grow 弹簧拉伸
- flex-shrink 弹簧压缩
他们有一个通用属性 flex: grow shrink basic
- flex有一个默认值 initial 相当于 flex:0 1 auto
- flex有一个 auto 相当于 flex:1 1 auto
- flex有一个 none 相当于 flex:0 0 auto 相当于弹性元素没有弹性
- 关于flex:1 -是 CSS 中 Flexbox 布局的一个简写属性，用来设置一个元素在 flex 容器中的伸缩行为，等价于
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;flex-grow: 1;：定义了该元素的放大比例。如果其他元素有额外的空间，flex-grow控制该元素占用多大的空间。1表示这个元素将根据其他元素的比例来伸展，所有具有相同flex-grow值的元素将平分可用空间。flex-shrink: 1;：定义了该元素的缩小比例。当空间不足时，元素会缩小。1表示元素会在空间不足时进行缩小。flex-basis: 0;：定义了该元素的初始占用空间。0表示元素初始占用 0 空间，元素的最终大小完全取决于flex-grow和flex-shrink的值。
flex: 1;意味着该元素将根据可用空间的比例来伸展或缩小，使得它尽可能填满容器中的空间。- 如果容器中有多个元素设置了
flex: 1;，这些元素会平分容器的可用空间。
order 决定弹性元素的排列顺序
9.4 媒体查询
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_媒体查询_媒体类型</title>
<style>
/* 只有在打印机或打印预览才应用的样式 */
@media print {
h1 {
background: transparent;
}
}
/* 只有在屏幕上才应用的样式 */
@media screen {
h1 {
font-family: "翩翩体-简";
}
}
/* 一直都应用的样式 */
@media all {
h1 {
color: red;
}
}
/* 检测到视口的宽度为800px时，应用如下样式 */
@media (width:800px) {
h1 {
background-color: green;
}
}
/* 检测到视口的宽度小于等于700px时，应用如下样式 */
@media (max-width:700px) {
h1 {
background-color: orange;
}
}
/* 检测到视口的宽度大于等于900px时，应用如下样式 */
@media (min-width:900px) {
h1 {
background-color: deepskyblue;
}
}
</style>
</head>
<body>
<h1>媒体查询案例</h1>
</body>
</html>
书写顺序
- min-width（从小到大）
- max-width（从大到小）
如果不按顺序去写，按css的特性来说，后面的css就会重叠前面的css样式，致使前面的无法生效。
10.less
10.1 当前选择器
10.2 导入
作用：导入 less 公共样式文件
语法：导入: @import “文件路径”;
提示：如果是 less 文件可以省略后缀
@import './base.less';
@import './common';
注：这里是在less文件中导入别的less文件哦，并不是在html文件中导入！html文件是不可以导入less文件的，可以把less文件转成css文件才能进行导入！，但是vue文件的话可以这样导入
因为是整理之前的笔记，所以部分我觉得不会忘记的就没有添加到上面。
10.3 定义变量并且使用
/* 定义变量 */
@rootSize:37.5rem;
/* 头部 */
header{
display: flex;
justify-content: space-between;
height: @rootSize //在css样式里面使用
}
11 bootstrap
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: Bootstrap中文网
Bootstrap中文网 简介-Bootstrap中文网
使用步骤
下载
Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件
使用
引入 Bootstrap CSS 文件
注：记得是：/Bootstrap/css/bootstrap.min.css!!!不要一下子tab就选了/Bootstrap/css/bootstrap-grid.min.css.
详情类中文网里面都有，用的时候直接查就行，这里就不介绍了，直接引用对应的类就好了，bootstrap真的很全，各种样式还有动画，只需要引用对应的类就好了
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">调用类名： container 响应式布局版心类
<div class="container">测试</div>栅格系统
作用：响应式布局
栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数
字体图标
下载
导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip
使用
- 复制 fonts 文件夹到项目目录
- 网页引入 bootstrap-icons.css 文件
- 调用 CSS 类名（图标对应的类名）
- 前面加上“ bi- ”。
<i class="bi-android2"></i>实战
<title>实战</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 层叠性：咱们的css 要 层叠 框架的，所以要先列框架的css -->
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
<link rel="stylesheet" href="./css/index.css">
<!-- 为实现动态效果而引入的JS 轮播图都可以实现 -->
<script src="./Bootstrap/js/bootstrap.min.js"></script>
扫一扫
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
