看到很多 Discuz 模板做的首页 Portal 图片聚焦都是美伦美央的，于是 Forece 就研究了一下。然后就有了这篇帖子。看起来很难，其实很容易。主要就是CSS。配合模块模板。

首先看下效果图。然后我们在一步一步来。

discuz-image

1. 首先在首页模板文件那插一个 DIY 代码，具体怎么做请参考之前 Forece 写的 Discuz 如何仿站的教程。

1
<!--[diy=portal_image_block]--><div id="portal_image_block" class="area"></div><!--[/diy]-->

2. 在 DIY 处添加一个 100% 框架
1-1-1框架

3. 然后开始往里边扔帖子模块（当然你也可以用文章模块），模块标识可以用视图左01，视图左02，视图中01，视图中02，视图右01，视图右02这种容易辨识的名称。必须包含图片附件选择是，要不然很多帖子就会没图啦。显示样式选择帖子图片列表。缩略图宽度218，高度128。这个根据自己模板自己修改。显示条数4个。然后我们的第一个模块就出来了。很丑是不是，不要紧，我们还没做CSS，需要先把内容填充起来。
帖子图片列表模块

4. 然后以此类推，我们把剩下的模块也照猫画虎做出来。图片大小 Forece 这里给大家一个参考，左下角大图是宽度448，高度270。中间图片宽度216，高度270。都做完如下图所示。
帖子图片列表模块-1

5. 非常恶心是不是，而且显示的都是从第一个帖子开始显示的。我们需要调整一下起始行数，注意，Discuz起始行数是从0开始计算的，也就是说如果你想从第10张图片开始显示，那么起始数据行数应该填9。
帖子图片列表模块-2

6. 然后打开模板中的 extend_common.css，加入下边代码

1
2
3
4
5
6
7
8
9
10
11
12
/*Portal Image Code*/
.forece .title {margin-left:10px; margin-right:10px; height:40px;line-height:40px;border-bottom:1px solid #ed8163;padding:0px;background:none;}
.forece .titletext {font-size:18px;font-family:Microsoft Yahei;font-weight:700;}
.forece .block {margin:0px;}
.forece .frame-1-1-1-l{ width:470px;}
.forece .frame-1-1-1-c{ width:216px;}
.forece .frame-1-1-1-r{ width:460px;}
.forece li{ padding:0px; margin-right:12px; margin-top:12px; position:relative;}
.forece li p{position:absolute;height:60px;line-height:60px;bottom:0px; left:0px;background:rgba(0, 0, 0, 0.5);white-space:normal;-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=50);opacity: 0;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.forece li:hover p{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=70);opacity: 1;}
.forece li p a{ font-size:16px; color:#fff; display:block; padding:0 15px;}
.forece li:hover p a{ text-decoration:underline;}

7. 然后调整模板1-1-1框架模板的样式，指定class填写forece
discuz聚焦视图

8. 然后将1-1-1框架的标题改成图片聚焦，把边框改为0px

9. 最后到后台刷新缓存，再回到首页刷新，见证奇迹的时刻~~，貌似还有一些小瑕疵，自己修改一下外边距就可以了。

10. 今天的教程到此结束~ 请根据自己模板自行调整宽度以及边距。

打赏分享