（一）web前端案例：轮播图与顶部导航的合并

目标: 将Bootstrap实例中轮播图与WordPress模板中顶部导航进行合并

---

1. 获取网页源代码

原网页url:

• WordPress顶部导航
• Bootstrap轮播图

2. 保存需要合并的网页源代码到本地

3. 在本地新建文件夹，保存网页引用的js\css文件并更改文件路径到本地

• 或在源代码中内部链接前添加http:
• 网页引用的字体，图标库也需要保存到本地

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!--保存到本地，更改路径-->
<link rel="stylesheet" href="./bt.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

4. 如网页在本地打开没有报错, 删除源代码中不需要的代码部分

• 源代码中不需要的样式信息，css，js文件等都要删除

5. 分别在本地打开网页，如没有报错，新建一个html文件，将两份源代码按照head和body进行合并

6. 在本地打开合并后文件，如报错，检查样式信息或代码是否冲突并进行更改

• 先将两份代码进行对比，不要盲目批量删除

7. 如没有报错，对保存到本地的css文件进行修改，保留需要的部分

• 如果css文件发生冲突, 对比样式id是否有重复
• 如果没有冲突，参照css选择器制定优先级或使用LESS为css添加一个类名称

8. 自定义本地样式表id

---

遇到问题:

1. 网页部分颜色在代码中无法更改
2. 代码过多无从下手，毫无根据地批量删除、修改
3. 网页js文件无法使用
4. css样式发生冲突
5. 图标无法使用
6. 导入的bootstrap源代码无法使用
7. 将两个网页不需要的部分都进行删除后合并还是一直报错

如何解决:

1. 很多颜色配置在源代码无法找到，而是保存在css文件中，需要在“rel=stylesheet”属性下css文件中更改
2. ctrl+shift+i 对网页进行检查，根据选定的内容进行删除，盲目删除会导致需要的部分丢失
3. ctrl单击js链接保存到本地，将路径设置到本地js即可
4. css样式冲突大多是因为样式id相同，对比后将id进行更改
5. 网页引用的图标库需要将其下载到本地，例如: fontawsome
6. 导入的bootstrap源代码没有设定bootstrap、jquery路径，添加在< head >中就可以调用
7. css文件发生冲突，更改id或参照css优先级进行更改