轻松几步仿站技巧

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

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

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

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

现在第二步开始了:

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

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

<link rel="stylesheet" type="text/css" href="http://identyme.com/media/js_custom/_common/jquery.plugins/fancybox/jquery.fancybox.css?v=2.0.4" media="all" />

在这里,我们打开这个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下面的图片路径,这里举例一下:

<script type="text/javascript" src="http://identyme.com/media/js_custom/_common/jquery.plugins/fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>

改为:

<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.0.4"></script>

 

<link rel="stylesheet" type="text/css" href="http://identyme.com/media/js_custom/_common/jquery.plugins/fancybox/jquery.fancybox.css?v=2.0.4" media="all" />

改为:

<link rel="stylesheet" type="text/css" href="style/jquery.fancybox.css?v=2.0.4" media="all" />

记得之前有个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基础学习中路径一篇,看懂路径就没什么大问题了!

 

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:3   其中:访客  0   博主  0

  1. avatar 大猫 4

    哇塞,高级了

    • avatar yumanutong 5

      @大猫 额,没有啊

  2. avatar 哼哼猪 0

    这个很强大,嘿嘿,扒皮必备

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情