discuz门户模板风格diy制作

discuz的门户默认是什么都没有的，全部内容都需要自已diy搭建。对于新手来说，diy出的效果总是不尽人意。现在就由我来像大家介绍diy高级教程，搭建任意风格的门户页面。

开启门户功能

安装好discuz之后，我们进入后台，点击全局，找到站点功能菜单，把门户功能开启。在弹出的菜单中，勾选主导航。当页面中门户后面的小红叉变得绿勾时，说明门户功能已经开启。

设计网站的基本布局

第一次设计，我们就从简单的布局讲起。我们就以新浪科技的1:1:1的布局为例

打开diy设计界面

进入网站首页，点击图中箭头所指的diy高级模式菜单，进入diy高级编辑模式。

为页面添加框架

现做房子一样，我们先要为网页搭好框架，因为我们要设计的是1:1:1的框架，所以我们选中1:1:1的框架，当选中框架后，你会发现网页的中部会出现一个虚线的区域，我们把框架往这个区域拖即可。

编辑框架

我们把鼠标移到添加好框架上，点击红色的编辑菜单，我们可以选择一个菜单进行编辑。

这里我们选择标题，在弹出的窗口中，把标题删除。如果你有需要，可以用来作版块的主标题，视你的情况而定。然后我们编辑框架的样式，去掉框架的边框

为框架添加模块

添加好框架后，我们就可以往框架里添加模块了。这好比房子已经盖好了，现在我们可以往里塞家具了

编辑模块

当我们往框架里添加模块之后，系统会弹出模块的编辑框，如果不对模块进行设置，每个模块调取的内容将是一样的。所以，我们必需对模块进行编辑配置。

对于模块编辑菜单中的各个配置项，我就不一一介绍了。大家只要一个一个去试试就知道了。注意，模块标识一定要填写，名字任意。

因为我们新浪的最左侧是一个轮播图，因此我的模块配置信息如下

模块标识符为portal_slider，

数据来源为高级自定义，

聚合标签为幻灯，

文章栏目为全部,

显示样式为文章图片幻灯

,缩略图宽度为300,高度为300

因为无法把截图整个设置项的内容，所以只截局部。

编辑好后，我们直接点确定。系统又弹出模块标题编辑窗口，这里我们暂用不到，直接点确定即可。如果添加模块之后一没有文章出现，你应该查看一下对应选项下没有文章。比如，你勾选了聚合标签的“原创”选项，但是所有发布的文章，却没有一篇文章在发布时勾选“原创”的聚合标签。

添加头条模块并讲解模块标题的妙用。

discuz现在的模块中，没有一款显示样式能达到新浪科技中部的头条显示效果，但是，我们可以借助模块标题实现这个效果。

还是和上一步一下，我们把选择文章模块把它拖到框架的中间。

模块属性中的“显示模式”选择“[内置]碎片式文章标题列表”这个一项。

点击确定后，在弹出的模块标题窗口中，我们写上头条新闻的标题，链接，如果要加大字体和更变颜色，可以选择相应的字体和颜色。

编辑模块样式。

新浪头条的下面有一条下划线，如何在我们的头条下，也加上一条下划线呢？

我们可以通过两种方法。第一种：在模块的展示分类中选择静态模块，然后选数据来源为“分割线”。第二种：编辑模块样式，为模块添加一条底部的边框。

我们把鼠标移到刚才添加的头条模块上，点击出现的蓝色编辑按钮，再点击样式。按图中所示设置即可。

添加扩展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缓存。

最后然后依样依样画葫芦，按照新浪的样子，继续添加模块。

下图就是最终效果了，虽然不是完成一样，但是，大家稍微开一下大脑，就能想到实现方法了。