轻松几步仿站技巧

仿站是一种很普遍存在的行为，也是一种技术活，呵呵，不过小型的仿站还是比较简单的，下面我来说说如何简单的仿一个小站吧！

首先，我们打开一个要仿的小站，然后右键-另存为-选择一个地方保存-保存后会下载几个文件，一般都是一个htm或者html文件和一个文件夹，或者别的结构，然后我们就好好的来利用了！

首先把下载下来的文件归类下，下载下来的文件夹里面一般有js，css和图片文件，那么我们就在本地测试环境下建立三个文件夹【如果没有搭建也没关系，因为这里做的只是一个静态页面，放一个文件夹下面即可】，分别命名为“js”，“image”和“style”，这三个文件夹分别存放JS文件，图片文件和样式表

OK，这是上面准备的，这里距离说明下，比如我们要仿下面这个站“http://identyme.com/yumanutong”，我们分三个步骤，一个是另存为方式保存源文件[上面说过了]，第二个是在样式表里面寻找引用的图片下载，第三个是修改源代码

现在第二步开始了：

打开这个网站右击查看代码，我们会发现有几个CSS的地方，然后我们之前另存为的时候其实已经保存过这些CSS的了，而且也保存了一些图片，但是好像少了很多图片？没关系，我们在样式表里面看就知道了！

首先查看源代码，知道有一些CSS文件，比如：

在这里，我们打开这个CSS链接，会看到样式文件，然后ctrl+F搜索"url"，会找到类似如下的样式表：
.fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
我们这个时候可以看出，这里的png图片是和当前CSS样式表同一个路径的，那么这个图片的绝对路径就是：
http://identyme.com/media/js_custom/_common/jquery.plugins/fancybox/jquery.fancybox.css?v=2.0.4
和
fancybox_sprite.png
的结合，也就是：
http://identyme.com/media/js_custom/_common/jquery.plugins/fancybox/fancybox_sprite.png
那么好，我们下载这个图片文件，然后放到image文件夹下备用
我们一个个CSS文件打开的时候，发现一个CSS文件，也就是“https://s3.amazonaws.com/identyme-themes/dotme-glass/css/screen.css”这个文件，文件里面的代码如下：
@import url("reset.css"); @import url("ie.css");
也就是引用了两个CSS，我们可以看出这个路径也是和当前路径一样的，也就是有两个CSS文件，绝对地址分别是：
https://s3.amazonaws.com/identyme-themes/dotme-glass/css/reset.css
和
https://s3.amazonaws.com/identyme-themes/dotme-glass/css/ie.css
我们会发现另存为的源码之中并没有这两个CSS文件，那么，我们就去新建这两个文件了，然后源码复制进去后保存名字一样的CSS样式表，一样放在style文件夹备用
在这些下载补充图片和样式的途中，会看到一些路径，比如下面这个路径：
background: #00425d url(../img/bg-body.png) repeat-x;
这里的“../”也就是返回上级目录，这个样式表路径是：
https://s3.amazonaws.com/identyme-themes/dotme-glass/css/glass.css
也就是图片路径是
https://s3.amazonaws.com/identyme-themes/dotme-glass/img/bg-body.png
记住这里的../就是上一级目录的意思

下载好所有文件之后，我们把它归类放入js，style和image的文件夹内，然后我们开始修改文件了

首先去样式表里面，把所有样式表里面对应的图片路径改为image下的文件，这里注意，我们的style和image两个文件夹是同一个目录，那么，样式表在style里面，图片引用肯定要写为“../image/xx.png”这样的形式了，至于那两个CSS样式是同一个路径的，而且也放同一个路径，就不用改了，反正把相对路径改正确了

样式表修改后，我们在回到刚才网站，查看源代码，复制整个源代码下来，黏贴替换刚才另存为时候保存下来的htm文件，然后把里面的js路径改为相对的js文件下面的路径，css改为相对应的style里面的CSS路径，图片也改为相对应的image下面的图片路径，这里举例一下：

改为：

改为：

记得之前有个CSS样式表里面有这样一句话：
#friendship_btn #friendship_short_signup a{background:url(//s3.amazonaws.com/identyme-cdn/images/vcard/vcard-btns-sprite.png) no-repeat scroll 0 0 transparent; width:16px; height:16px;}

这里“//s3.amazonaws.com/identyme-cdn/images/vcard/vcard-btns-sprite.png”是绝对地址“http://s3.amazonaws.com/identyme-cdn/images/vcard/vcard-btns-sprite.png”的缩写，你可以下载图片后放image下，也就是这里改为：
#friendship_btn #friendship_short_signup a{background:url(../image/vcard-btns-sprite.png) no-repeat scroll 0 0 transparent; width:16px; height:16px;}

OK！到这里，该下载的元素，图片，js文件都到齐了，路径也纠正了，接下来就是自己二次修改一下了！

当然，这里注意下路径的认识，如果不清楚，可以看前面的html基础学习中路径一篇，看懂路径就没什么大问题了！