爱华网discuz的门户默认是什么都没有的，全部内容都需要自已diy搭建。对于新手来说，diy出的效果总是不尽人意。现在就由我来像大家介绍diy高级教程，搭建任意风格的门户页面。
discuz门户模板风格diy制作――工具/原料discuz论坛系统discuz门户模板风格diy制作――方法/步骤
discuz门户模板风格diy制作 1、
开启门户功能
安装好discuz之后，我们进入后台，点击全局，找到站点功能菜单，把门户功能开启。在弹出的菜单中，勾选主导航。当页面中门户后面的小红叉变得绿勾时，说明门户功能已经开启。
discuz门户模板风格diy制作 2、
设计网站的基本布局
第一次设计，我们就从简单的布局讲起。我们就以新浪科技的1:1:1的布局为例
discuz门户模板风格diy制作 3、
打开diy设计界面
进入网站首页，点击图中箭头所指的diy高级模式菜单，进入diy高级编辑模式。
discuz门户模板风格diy制作_discuz模板制作
discuz门户模板风格diy制作 4、
为页面添加框架
现做房子一样，我们先要为网页搭好框架，因为我们要设计的是1:1:1的框架，所以我们选中1:1:1的框架，当选中框架后，你会发现网页的中部会出现一个虚线的区域，我们把框架往这个区域拖即可。
discuz门户模板风格diy制作 5、
编辑框架
我们把鼠标移到添加好框架上，点击红色的编辑菜单，我们可以选择一个菜单进行编辑。
这里我们选择标题，在弹出的窗口中，把标题删除。如果你有需要，可以用来作版块的主标题，视你的情况而定。然后我们编辑框架的样式，去掉框架的边框
discuz门户模板风格diy制作_discuz模板制作
discuz门户模板风格diy制作 6、
为框架添加模块
添加好框架后，我们就可以往框架里添加模块了。这好比房子已经盖好了，现在我们可以往里塞家具了
discuz门户模板风格diy制作_discuz模板制作
discuz门户模板风格diy制作 7、
编辑模块
当我们往框架里添加模块之后，系统会弹出模块的编辑框，如果不对模块进行设置，每个模块调取的内容将是一样的。所以，我们必需对模块进行编辑配置。
对于模块编辑菜单中的各个配置项，我就不一一介绍了。大家只要一个一个去试试就知道了。注意，模块标识一定要填写，名字任意。
因为我们新浪的最左侧是一个轮播图，因此我的模块配置信息如下
模块标识符为portal_slider，
数据来源为高级自定义，
聚合标签为幻灯，
文章栏目为全部,
显示样式为文章图片幻灯
,缩略图宽度为300,高度为300
因为无法把截图整个设置项的内容，所以只截局部。
编辑好后，我们直接点确定。系统又弹出模块标题编辑窗口，这里我们暂用不到，直接点确定即可。如果添加模块之后一没有文章出现，你应该查看一下对应选项下没有文章。比如，你勾选了聚合标签的“原创”选项，但是所有发布的文章，却没有一篇文章在发布时勾选“原创”的聚合标签。
discuz门户模板风格diy制作_discuz模板制作
discuz门户模板风格diy制作 8、
添加头条模块并讲解模块标题的妙用。
discuz现在的模块中，没有一款显示样式能达到新浪科技中部的头条显示效果，但是，我们可以借助模块标题实现这个效果。
还是和上一步一下，我们把选择文章模块把它拖到框架的中间。
模块属性中的“显示模式”选择“[内置]碎片式文章标题列表”这个一项。
点击确定后，在弹出的模块标题窗口中，我们写上头条新闻的标题，链接，如果要加大字体和更变颜色，可以选择相应的字体和颜色。
discuz门户模板风格diy制作 9、
编辑模块样式。
新浪头条的下面有一条下划线，如何在我们的头条下，也加上一条下划线呢？
我们可以通过两种方法。第一种：在模块的展示分类中选择静态模块，然后选数据来源为“分割线”。第二种：编辑模块样式，为模块添加一条底部的边框。
我们把鼠标移到刚才添加的头条模块上，点击出现的蓝色编辑按钮，再点击样式。按图中所示设置即可。
discuz门户模板风格diy制作_discuz模板制作
discuz门户模板风格diy制作 10、
添加扩展css
当discuz提供的样式，无法达到我们想的效果时，我们可以添加一个扩展样式。
这里以新浪右侧的tab菜单样式为例。向指定位置添加一个tab框架，我们打框架样式编辑窗口，即第五步的第三图，在“指定class”的输入框的字母后面，我加英文的空格，然后写上一个news_tab的类名,记得要空格。我们打开在discuz/template/default/common目录，新建个extend_common.css。填写以下内容即可
.news_tab .title { height:95px; }
.news_tab .tab-title { background-image:none; background:none;}
.news_tab .tb li {float: left;width: 146px;margin-right: 4px;background: url(http://www.sinaimg.cn/IT/deco/2013/1125/index/1113_lqf_techHP_icons_V11.png) no-repeat -250px 0px;text-align: center;height: 40px;line-height: 35px;cursor: pointer;font-size: 14px; }
.news_tab .tab-title .titletext { float:none; margin-left: 3px;font-size: 18px;padding-left: 15px;line-height: 40px;font-weight: normal;background: url(http://www.sinaimg.cn/IT/deco/2013/1125/index/1113_lqf_techHP_icons_V11.png) no-repeat -796px 11px;display: inline;color: #1f90de;}
.news_tab .tb li.a { background-position: -400px 0px; color: #fff;}
.news_tab .tb li.a a{background:none;border:0px; }
discuz的css书写规则请查看
http://faq.comsenz.com/library/template/cssextend/cssextend_index.htm此链接下的官方文档。
写好之后，新开个页面，进入后台，按下图所示，更新css缓存。
discuz门户模板风格diy制作 11、
最后然后依样依样画葫芦，按照新浪的样子，继续添加模块。
下图就是最终效果了，虽然不是完成一样，但是，大家稍微开一下大脑，就能想到实现方法了。
discuz门户模板风格diy制作_discuz模板制作
discuz门户模板风格diy制作――注意事项如果觉得好，请点个赞，或者投个票吧。
