如何copy别人的diy首页--教程（1）
经常看到网上有人想copy别人的首页门户，在此我给大家介绍下如何去模仿别人的diy首页。如果你没有一点前端基础的话，就需要自己一点一点默认的diy了。不过我们还是比较习惯接受自己通过搭建起自己的htm结构，在搭建好的架子上开始diy，这样可控性更好一些。首先你我来们来做一些必要的diy首页时的一些准备工作，这些工作都是必须的，这样才不至于在以后的调试中避免不必要的错误。首先不能缺少的几个部分如下：
1、引入头部文件代码如果你的头部和默认的头部是不一样的，你只要把自己做好的头部放到common目录下，之后把下面的header文件改成你自己命名的文件名就可以了。注意，请尽量不要遗漏一些必要的代码。Header中的代码大部分都很关键，如果没有非常必要，尽量少的去删减，以免造成不必要的麻烦。<!--{subtemplate common/header}-->2、diy的样式代码我经常碰到很多的diy首页中，有人遗漏这段代码，他基本上前期对你的diy页面有很少影响，不过如果你diy的时候选择样式的话，点击就会无效。前台diy的时候div的样式是写在这个id的div里面的，如果没有你是无法对你的div指派一些样式的值。<style id="diy_style"
type="text/css"></style>3、引入自己diy的css代码<link href="$_G['setting']['csspath']template/default/portal/index/style/style.css"
rel="stylesheet" type="text/css" />4、尾部文件的导入
这个文件也存在大量的系统处理程序，请尽量少的删减它的代码。如果你的尾部和默认的不同，那你可以自己重新copy一份文件就可以了然后去掉必要的html代码。<!--{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到<link href="$_G['setting']['csspath']template/default/portal/index/style/style.css"
rel="stylesheet" type="text/css" />所连接的文件中就可以了。
这里你可以右键单击复制查看他的地址。也可以之际点击拷贝就可以了。当然这样做回产生大量的css垃圾代码。不过，是让我们偷懒呢。这个就需要你选择性的copy了，有选择性的copy 主要的css就可以了。（当然这些css并不一定完全好事，比如比价难纠结的就是图片背景。你需要一个个自己另存为，并将它的路径指定到你放置的文件夹中。然后指定好调用的路径。）
做完这些工作以后我们基本上就可以开始放置我们需要diy的框架了。
将形如<!----><div
id="diy1" class="area"></div><!---->的代码代替，框架中的内容填充到静态htm中。这里需要注意的是：diy后的数值在当前页面时唯一的。并且格式一定要对。不能有重复，负责调用的数据就会重复。
下面你就可以开始diy填充数据了。
这里需要说明的一项就是，因为你的diy框架已经用静态的htm搭建好了，就不需要在进行特定的分栏处理了。在diy的模式下，去掉diy的标题，框架的diy样式和数据的diy样式边框要清0，内外边距也要清0。
这样一个前台diy首页框架就已经基本完成了。
页:
[1]