易企cms建站仿站教程

易企cms仿站教程第二节（下） 获取目标网站的css所用图片素材

　　今天穿插一节教程，昨天的教程中我们讲了如何获取目标网站的css，这个还有一个问题就是，css中的素材图片（比如一些背景图片等）我们用另存为是下载不下来的，这里我们需要手动去下载。这里我们准备好Dreamweaver这个软件，css或者模板文件都要用这个工具打开，以防出现编码错误。

　　昨天下载的images文件夹里有metinfo.css 和metinfo_ui.css这俩css文件，我们都打开看一下，检查里面是否有背景图片，

         background: url(../images/dt-10.gif) 类似这样的就是有图片需要我们下载，background: url()这个写法就是css里面加载背景图片的语法，大家牢记一下。

下面我们先从metinfo_ui.css 这个css文件开始，记得css文件要复制一份出来：

1. 打开css文件。

2. 找到 background: url（）标签，看他里面的图片路径，我们看到的是../images/dt-10.gif。

3. 我们打开目标网站的首页https://www.metinfo.cn/demo/met100/288/

4. 右键查看源文件，找到 <link rel="stylesheet" type="text/css" href="public/ui/met/css/metinfo_ui.css" id="metuimodule" data-module ="10001" />

5. 这里的 href="public/ui/met/css/metinfo_ui.css"就是这个css的导入路径。

6. 我们刚得到的图片路径是../images/dt-10.gif ， ../就是返回上一级目录的意思，这也是一个需要记住的知识点。所以我们的完整图片路径应该是public/ui/met/images/dt-10.gif 。他这里用的是相对路径，我们要改成绝对路径那就是https://www.metinfo.cn/demo/met100/288/public/ui/met/images/dt-10.gif 。

7. 这个讲在讲一个知识点。相对路径是绝对路径的区别。

   www.baidu.com/baidu.html这是绝对路径。/baidu.html 这就是相对路径。

8. 我们返回metinfo_ui.css 按Ctrl+f 查找url(../images/替换成<a href="https://www.metinfo.cn/demo/met100/288/public/ui/met/images/点击替换全部。

9. 按Ctrl+f 查找)替换成">图片</a>然后点保存。

10. 把刚修改好的metinfo_ui.css重命名成metinfo_ui.html

    这就是为什么我们要复制一份出来，修改了的这份在改回去很麻烦，所以一会我们就直接丢弃了，以后使用复制出来的那一份。

11. 直接双击打开metinfo_ui.html 图片俩字锚文本链接就是我们需要下载的图片。如果图片多是话可以使用迅雷一键下载，这里图片不是很多所以我们就挨个点开右键另存为到我们的images文件夹里就好了和css文件保持同一级目录。

    
    如果大家右键找不到图片另存为这个选项，那就是你鼠标没点到图片上面再左上角的位置多点几下找找位置就出来了。

12. 这里有一个技巧，你点开一个图片超链接后，浏览下面的图片超链接如果是蓝色的你就点开存图片如果变成褐红色拿就表示这个图片和你上次保存的图片是一个图片，所以就直接跳过不用再存了。

13. 好了大家就慢慢存吧 一定要存到images文件夹里。metinfo.css这个css保存图片的方法一样。但是这个css的图片路径不一样的，需要大家举一反三自己摸索，如果实在搞不懂就QQ咨询小编。

14. 我们打开复制出来的css名字要改成原来的，我们找到url(../images/dt-10.gif)，因为我们图片和css文件放到了同一级目录所以这里我们要改一下路径，dt-10.gif图片文件名前面的路径都去掉，Ctrl+f 查找../images/替换那里什么都不用填，然后点替换全部。metinfo.css类似自己摸索吧。今天的教程就到这里了。