仿极客网的首页左侧简洁模式[类似博客]，喜欢的就顶下，谢谢！

话不多说，首先上图：



刚刚完成，只仿了文章列表的东西，具体情况可以到我的站看看：http://www.312g.com/portal.php

也可以到极客网去看看，仿的方法很简单，老鸟不要笑！

步骤一、 首先把下面这段CSS代码加入到  你的  /template/default/common/common.css  最底部：

1. /*
   
2. 新增门户模版模块CSS
   
3. */
   
4. .scrollUl{width:690px; background:url("/gg/img/bg_07.jpg") no-repeat; overflow:hidden;height:33px;}
   
5. .scrollUl li{float:left; font-size:13px; font-family:"微软雅黑";}
   
6. .bor03{height:auto; width:690px;}
   
7. .sd01{cursor:pointer;background:url("/gg/img/an_01.jpg") no-repeat;padding:8px 0 0 32px; color:#1b1c0c; width:85px; height:25px;}
   
8. .sd02{cursor:pointer;background:url("/gg/img/an_02.jpg") no-repeat;padding:8px 0 0 32px; color:#fff; width:85px; height:25px;}
   
9. .bor03 .block{margin:0px !important;}
   
10. .bg3{width:661px; height:163px; background:url("/gg/img/bg_08.jpg") no-repeat; margin-bottom:10px; padding:10px 16px 0px 13px;}
    
11. .bg3 .l{width:214px;float:left;height:153px;}
    
12. .bg3 .l img{border:1px #e1e1e1 solid;padding:1px;}
    
13. .bg3 .r{width:428px;float:Right;position:relative;z-index:5;}
    
14. .bg3 .r p{line-height:22px;color:#555;padding-top:6px; font:normal 14px/1.5 宋体; word-wrap:break-word;word-break:normal;}
    
15. .bg3 .r p a:hover{color:#9cb53c;}
    
16. .bg3 a.posi{position:absolute;left:345px;top:125px;width:100px;display:block;font-size:14px;color:#9cb53c;}
    
17. .bg3 .r p a{color:#555;text-decoration:underline;}
    
18. .bg3 .ll{width:440px;float:left;padding:18px 0px 0px 8px;color:#646464;}
    
19. .bg3 .ll a{color:#646464;}
    
20. .bg3 .ll a:hover{color:#9cb53c;}
    
21. .bg3 .ll a em{color:#B6D018;}
    
22. .bg3 .rr{width:211px;float:right;padding-top:5px;}
    
23. .bg3 .rr div{padding:3px 8px 0px 27px;font:normal 24px/30px 微软雅黑,黑体;color:#000;text-align:center;width:52px;height:31px;float:left;margin-right:7px;}
    
24. .bg3 .rr div:hover{cursor:pointer;}
    
25. .bg3 .rr .e1{background:url(/gg/img/main.gif) 0px -821px no-repeat;cursor:pointer;}
    
26. .bg3 .rr .e2{background:url(/gg/img/main.gif) -112px -821px no-repeat;color:#fff;cursor:pointer;}
    
27. .tit1{font:normal 17px/21px 微软雅黑,黑体;height:31px;background:url(/gg/img/10x1.jpg) bottom repeat-x;color:#252525;padding-left:6px;}
    
28. .tit1 a{color:#252525;}
    
29. .tit1 a em{color:#B6D018;}
    
30. .tit1 b{font:normal 12px/22px 宋体;float:right;}
    
31. .tit2{padding:6px 0px 0px 7px;color:#252525;}
    
32. .tit2 span{color:#9cb53c;}
    
33. .tit2 a{color:#9cb53c;}
    
34. .bor03 .mn{width:690px !important;}
    
35. .bor03 .bm{ border:0px !important;}
    
36. .bor03 .bm_c{padding:0px !important;}
    
37. .mhsyno{height:300px;}

复制代码

注：CSS中的图片文件请自行下载，并上传到相应位置。

步骤二、登录后台，进入  门户--模版模块--添加 帖子模块 并命名模块名称。然后把下面的代码覆盖到模块里面 并保存：

1. <div class="bor03">
   
2. [loop]
   
3. <div class="bg3">
   
4. <div class="l"><a target="_blank" href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" /></a></div>
   
5. <div class="r"><a class="posi" target="_blank" href="{url}">阅读全文>></a>
   
6. <div class="tit1"><b>【<a target="_blank" title="{forumname}" href="{forumurl}">{forumname}</a>】</b>
   
7. <a target="_blank" title="{title}" href="{url}">{title}</a>
   
8. </div>
   
9. <div class="tit2"><span>{dateline}</span> 发布 | <span>{views}</span> 次阅读 | <span>{author}</span> 撰稿</div>
   
10. <p>{summary}</p>
    
11. </div>
    
12. <div class="clear"></div>
    
13. </div>[/loop]
    
14. </div>

复制代码

步骤三，进入首页 DIY，框架选3：1   模块选 帖子模块，然后在模块属性样式里面，选择你刚刚建立的新模块，并把图片设置成210 140大小，主题文章选220  。

步骤四， 更新，更新缓存，完成！

很受益！

很好的风格，超喜欢

了解一下呢  呵呵

耕田人民割禾草 发表于 2012-3-22 16:58
很好的风格，超喜欢

感谢！！！！

听吧 发表于 2012-3-22 16:51
很受益！

共同学习

难道没人喜欢？

分类信息怎么整合UC啊？
https://discuz.dismall.com/thread-2709200-1-1.html

好贴必须顶