如何copy别人的diy首页--教程（1）

经常看到网上有人想copy别人的首页门户，在此我给大家介绍下如何去模仿别人的diy首页。如果你没有一点前端基础的话，就需要自己一点一点默认的diy了。不过我们还是比较习惯接受自己通过搭建起自己的htm结构，在搭建好的架子上开始diy，这样可控性更好一些。首先你我来们来做一些必要的diy首页时的一些准备工作，这些工作都是必须的，这样才不至于在以后的调试中避免不必要的错误。

首先不能缺少的几个部分如下：

1、引入头部文件代码

如果你的头部和默认的头部是不一样的，你只要把自己做好的头部放到common目录下，之后把下面的header文件改成你自己命名的文件名就可以了。注意，请尽量不要遗漏一些必要的代码。Header中的代码大部分都很关键，如果没有非常必要，尽量少的去删减，以免造成不必要的麻烦。

1. <!--{subtemplate common/header}-->

复制代码

2、diy的样式代码

我经常碰到很多的diy首页中，有人遗漏这段代码，他基本上前期对你的diy页面有很少影响，不过如果你diy的时候选择样式的话，点击就会无效。前台diy的时候div的样式是写在这个id的div里面的，如果没有你是无法对你的div指派一些样式的值。

1.   <style id="diy_style"
   
2. type="text/css"></style>

复制代码

3、引入自己diy的css代码

1.   <link href="$_G['setting']['csspath']template/default/portal/index/style/style.css"
   
2. rel="stylesheet" type="text/css" />

复制代码

4、尾部文件的导入
这个文件也存在大量的系统处理程序，请尽量少的删减它的代码。如果你的尾部和默认的不同，那你可以自己重新copy一份文件就可以了然后去掉必要的html代码。

1. <!--{subtemplate common/footer}-->

复制代码

以上就是要做的的基本步骤。下面我们开始打开我们要copy的首页进行仿制吧。

在仿制别人的首页的时候。你可以选择自己按照别人的页面自己写自己的样式代码，然后一步一步的diy。不过我在这里为大家介绍一种比较懒的方法。

1、首先你应该熟悉html+css的基本概念。最好有一些相关的实践经验。这样才不至于动起手来非常蹩脚。

我希望大家，熟悉并会运用火狐浏览器的firebug插件。这是一款备受前端人员推崇的工具。你用firebug打开任何一个页面。他都会自动加载这个文件的详细信息给你清晰地列出来。并可以对下载到本地的静态html和css任意修改，并立即显示修改后的效果。

我在copy别人页面的时候通常都是，打开别人的页面，将它的内容全部删除，只留下它的框架，然后copy他仅有的框架代码，和css样式，调整好它的引用路径就可以了。

现在我用图，为大家说明一下，我相信你懂得。如果你不懂，就需要去修炼一下前端的外功了。

这里我用firebug定义页面的一个元素后，找到他的标签，firebug会很明确的告诉你他在页面的位置，如果你点中编辑按钮，他就会进入到这段代码的源html,我们diy的时候通常都是需要他的框，背景图。并不需要他的内容，因为那正是我们需要填充自己数据的地方。我们进入编辑模式后，将内容的html都删除。这样页面就显得非常干净了。只留下了基本的框架。

2、copy完他的前端框架后，我们就来copy他的css,运用firebug你可以很方便的查看到他的css文件，一般一个页面，引用的css文件通常不会超过两个主要的文件。你只要将这两个文件的代码copy到

1. <link href="$_G['setting']['csspath']template/default/portal/index/style/style.css"
   
2. rel="stylesheet" type="text/css" />

复制代码

所连接的文件中就可以了。

这里你可以右键单击复制查看他的地址。也可以之际点击拷贝就可以了。当然这样做回产生大量的css垃圾代码。不过，是让我们偷懒呢。这个就需要你选择性的copy了，有选择性的copy 主要的css就可以了。（当然这些css并不一定完全好事，比如比价难纠结的就是图片背景。你需要一个个自己另存为，并将它的路径指定到你放置的文件夹中。然后指定好调用的路径。）

做完这些工作以后我们基本上就可以开始放置我们需要diy的框架了。

将形如

1. <!--[diy=diy1]--><div
   
2. id="diy1" class="area"></div><!--[/diy]-->

复制代码

的代码代替，框架中的内容填充到静态htm中。

这里需要注意的是：diy后的数值在当前页面时唯一的。并且格式一定要对。不能有重复，负责调用的数据就会重复。

下面你就可以开始diy填充数据了。

这里需要说明的一项就是，因为你的diy框架已经用静态的htm搭建好了，就不需要在进行特定的分栏处理了。在diy的模式下，去掉diy的标题，框架的diy样式和数据的diy样式边框要清0，内外边距也要清0。

这样一个前台diy首页框架就已经基本完成了。

文章导航：
如何copy别人的diy首页--教程（1） https://discuz.dismall.com/thread-2064690-1-1.html
如何copy别人的diy首页--教程（2） https://discuz.dismall.com/thread-2064965-1-1.html

喜欢，

这个一定要顶

请教一下楼主，用firebug的时候，如果遇到首页有幻灯图片在不停地切换，怎样让firebug的“查看元素”不自动跳到幻灯片的元素上？

我就是遇到难题了，Firebug总是自动查看幻灯片元素，干扰我要查看的元素

回复 silvia22 的帖子

你吧js停用就可以了。火狐菜单栏-》工具-》选项，启用js关闭。

elevensky 发表于 2011-2-28 10:27
回复 silvia22 的帖子

你吧js停用就可以了。火狐菜单栏-》工具-》选项，启用js关闭。

太谢谢LZ了：）

支持！~

支持一个

虽然没怎么看懂 但是还是顶楼主了哈