discuz资源站模板（discuz门户模板风格diy制作）

想必现在有很多小伙伴对于discuz门户模板风格diy制作方面的知识都比较想要了解，那么今天小好小编就为大家收集了一些关于discuz门户模板风格diy制作方面的知识分享给大家，希望大家会喜欢哦。1.开启门户功能安装好scuz之后，我们进入后台，点击全局，找到站点功能菜单，把门户功能开启。在弹出的菜单中，勾选主导航。当页面中门户后面的小红叉变得绿勾时，说明门户功能已经开启。2.设计网站的基本布局第一次设计，我们就从简单的布局讲起。我们就以新浪科技的1:1:1的布局为例3.打开y设计界面进入网站首页，点击图中箭头所指的diy高级模式菜单，进入diy高级编辑模式。4.为页面添加框架现做房子一样，我们先要为网页搭好框架，因为我们要设计的是1:1:1的框架，所以我们选中1:1:1的框架，当选中框架后，你会发现网页的中部会出现一个虚线的区域，我们把框架往这个区域拖即可。5.编辑框架我们把鼠标移到添加好框架上，点击红色的编辑菜单，我们可以选择一个菜单进行编辑。这里我们选择标题，在弹出的窗口中，把标题删除。如果你有需要，可以用来作版块的主标题，视你的情况而定。然后我们编辑框架的样式，去掉框架的边框6.为框架添加模块添加好框架后，我们就可以往框架里添加模块了。这好比房子已经盖好了，现在我们可以往里塞家具了7.编辑模块当我们往框架里添加模块之后，系统会弹出模块的编辑框，如果不对模块进行设置，每个模块调取的内容将是一样的。所以，我们必需对模块进行编辑配置。对于模块编辑菜单中的各个配置项，我就不一一介绍了。大家只要一个一个去试试就知道了。注意，模块标识一定要填写，名字任意。因为我们新浪的最左侧是一个轮播图，因此我的模块配置信息如下模块标识符为portal_slider，数据来源为高级自定义，聚合标签为幻灯，文章栏目为全部,显示样式为文章图片幻灯,缩略图宽度为300,高度为300因为无法把截图整个设置项的内容，所以只截局部。编辑好后，我们直接点确定。系统又弹出模块标题编辑窗口，这里我们暂用不到，直接点确定即可。如果添加模块之后一没有文章出现，你应该查看一下对应选项下没有文章。比如，你勾选了聚合标签的“原创”选项，但是所有发布的文章，却没有一篇文章在发布时勾选“原创”的聚合标签。8.添加头条模块并讲解模块标题的妙用。scuz现在的模块中，没有一款显示样式能达到新浪科技中部的头条显示效果，但是，我们可以借助模块标题实现这个效果。还是和上一步一下，我们把选择文章模块把它拖到框架的中间。模块属性中的“显示模式”选择“[内置]碎片式文章标题列表”这个一项。点击确定后，在弹出的模块标题窗口中，我们写上头条新闻的标题，链接，如果要加大字体和更变颜色，可以选择相应的字体和颜色。9.编辑模块样式。新浪头条的下面有一条下划线，如何在我们的头条下，也加上一条下划线呢？我们可以通过两种方法。第一种：在模块的展示分类中选择静态模块，然后选数据来源为“分割线”。第二种：编辑模块样式，为模块添加一条底部的边框。我们把鼠标移到刚才添加的头条模块上，点击出现的蓝色编辑按钮，再点击样式。按图中所示设置即可。10.添加扩展css当scuz提供的样式，无法达到我们想的效果时，我们可以添加一个扩展样式。这里以新浪右侧的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.tbli{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-250px0px;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-796px11px;display:inline;color:#1f90de;}.news_tab.tbli.a{background-position:-400px0px;color:#fff;}.news_tab.tbli.aa{background:none;border:0px;}scuz的css书写规则请查看http://faq.comsenz.com/library/template/cssextend/cssextend_index.htm此链接下的官方文档。写好之后，新开个页面，进入后台，按下图所示，更新css缓存。11.最后然后依样依样画葫芦，按照新浪的样子，继续添加模块。下图就是最终效果了，虽然不是完成一样，但是，大家稍微开一下大脑，就能想到实现方法了。

本文到此结束，希望对大家有所帮助。