search

Home >Backend Development >PHP Tutorial >YEEI official dream template multi-frame sharing! (Demonstration: You can see the N grid on this site)

YEEI official dream template multi-frame sharing! (Demonstration: You can see the N grid on this site)

WBOY
WBOYOriginal
2016-07-25 09:13:431992browse
When I saw this home page, I thought it looked very nice. Not original, just saw it and turned it over to share with everyone.

Copyright belongs to YEEI. The Programmer's Home Forum is just for sharing!

Let’s take a look at the rendering of the N grid on the homepage:



Implementation method:
1. Upload image files (default template directory: /static/image/common/)
Download the attachment, then unzip it and transfer the img folder to your file directory (see clearly, the img folder is not the content of the folder)
2. Add N grid css style to CSS
  1. .frame{ border:none; padding:0px; margin:0px}
  2. .move-span { border:none; background:none; padding:0px; margin:0px}
  3. .yeei_sw{padding:0;margin-top:-1px;*margin-top:-16px; border-left:1px solid #D9D9D9; border-right:1px solid #D9D9D9; border-top: 1px solid #D9D9D9 ;}
  4. .yeei_sw1{height:107px; overflow:hidden;border-bottom:1px solid #D9D9D9;}
  5. .yeei_sw1l{ margin-right:320px;_margin-right:323px;padding:10px 10px 0 15px;background :#fff url({IMGDIR}/img/show_1_bg.gif) repeat-x 0 0px;position: relative}
  6. .yeei_sw1l .hot{background:url({IMGDIR}/img/new.png) no-repeat right 0;position: absolute;right:0px;top:1px; width:48px; height:47px;_background:none}
  7. .yeei_sw1l .m { margin-top:0px; padding-right:5px;*padding-right: 0px}
  8. .yeei_sw1l .m img{ border:1px solid #E0E0E0; background:#fff; padding:1px}
  9. .yeei_sw1l dt{ font-size:16px; padding-bottom:3px; padding-top:1px; font-family:'Hiragino Sans GB','Microsoft YaHei','宋体',Helvetica,Arial,sans-serif;}
  10. .yeei_sw1l dd{ color:#666;margin-bottom:5px}
  11. .yeei_sw1l . b{ color:#888;}
  12. .yeei_sw1l .b a{ color:#77828E; margin-right:6px}
  13. .yeei_sw1r{float:right;height:98px; width:313px;_width:316px; overflow:hidden ; padding-left:7px; padding-top:8px;background:url({IMGDIR}/img/show_2_bg.gif) no-repeat 0 0;}
  14. .yeei_sw1r .chart{ background:none;width:300px; padding -bottom:10px; padding-left:6px;background: url({IMGDIR}/img/bottom_b.gif) repeat-x 0 bottom;}
  15. .yeei_sw1r .yeei_wb{ padding-left:7px; padding-top:2px ;}
  16. .yeei_sw1r a{cursor: pointer;}
  17. .yeei_sw1r a:hover{text-decoration: none;}
  18. .yeei_wb dt { height:19px;overflow:hidden;padding-bottom:9px;font- family:'宋体',Helvetica,Arial,sans-serif; font-weight: 700;background:url({IMGDIR}/img/wb.gif) no-repeat -54px 4px; padding-left:17px}
  19. . yeei_wb .n { float: left; color:#666; width:220px; overflow:hidden; background:#FFFFF0; border:1px solid #EDD180; height:23px; line-height:23px; padding:0 6px;}
  20. .yeei_wb .n b{ color:#F08800; font-weight:none}
  21. .yeei_wb .m { float: left; margin:0px; height:54px; width:54px; margin-right:7px;}
  22. . yeei_wb .m img{ border:1px solid #85898C; padding:1px;}
  23. .yeei_wb span{float:left; margin-top:2px;margin-right:10px; font-size:14px}
  24. .yeei_wb . ting{width:66px;height:19px;display: block;background:url({IMGDIR}/img/wb.gif) no-repeat 0 bottom; float:left}
  25. .yeei_sw2{height:195px;overflow:hidden ;border-bottom:1px solid #D9D9D9}
  26. .yeei_sw2l{margin-right:318px;height:195px;border-right:1px solid #D9D9D9}
  27. .yeei_sw2r{ float:right;width:313px; overflow:hidden ; padding-left:5px; padding-top:5px;}
  28. .yeei_sw2l .title{background: url({IMGDIR}/img/tab_bg.gif) repeat-x 0 0; height:40px;}
  29. .yeei_sw2l .titletext{font-size:12px;font-weight:normal;}
  30. .yeei_sw2l .tb a{padding:0px; background: url({IMGDIR}/img/tab_a.gif) no-repeat 0 -40px!important ; margin-right:5px; color:#444; border:none;text-align:center;width:85px; height:40px}
  31. .yeei_sw2l .tb-c{ padding:10px; border:none}
  32. . yeei_sw2l .tb .a a {background:url({IMGDIR}/img/tab_a.gif) no-repeat 0 0!important;font-weight: 700; color:#333;}
  33. .yeei_sw2l .module ul li{width :50%;*width:49%;border-bottom:1px dotted #ddd; float:left; margin-bottom:3px; padding:0 0px 3px 0; }
  34. .yeei_sw2l .module ul li span{background:url ({IMGDIR}/img/li.gif) no-repeat 5px 6px; padding-left:15px;}
  35. .yeei_sw2l .module ul li em{ font-size:11px; margin-right:10px;}
  36. . yeei_sw2l .module ul li a:hover{color:#225F8F;text-decoration: none;}
Copy code
3、模板中添加N格代码（默认模板文件是：/template/default/forum/discuz.htm）






  7. {lang index_today}: $todayposts|{lang index_yesterday}: $postdata[0]|{lang index_posts}: $posts|{lang index_members}: $_G['cache']['userstats']['totalmembers']






























    • 复制代码 4、打开论坛首页，管理账号登陆，导入论坛XML文件！
    然后更新缓存 就可以了！

    不会的可以看看这个帖子， http://www.clqxn.com/forum.php?mod=viewthread&tid=7&extra=page%3D1
    还可以加小贝QQ一起交流 ，好东西就是要分享和交流的！

    PS:  还有另外一直方法，也可以的，附件里面有说明，你懂的
       
    dream

    yeei多格.rar

    55.22 KB, 下载次数: 1239


    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：discuz forum adds and replaces return to top iconNext article：discuz forum adds and replaces return to top icon

    Related articles

    See more