看到這個首頁N格，覺得非常好看。非原創，純屬看到了轉過來跟大家分享。
版權歸屬YEEI。程式設計師之家論壇只提供分享！
先看下該首頁N格的效果圖：
![]()
實作方法：
1.上傳圖片檔案（預設範本目錄：/static/image/common/）
把附件下載，然後解壓，把img 資料夾傳到你的檔案目錄（看清楚，img資料夾不是資料夾的內容）
2、CSS加入N格css樣式
- .frame{ border:none; padding:0px; margin:0px}
- .move-span { border:none; background:none; padding:0px; margin:0px}
- .yeei_sw{padding:0;margin-top:-1px;*margin-top:-16px; border-left:1px solid #Dorder*margin-top:-16px; border-left:1px solid #Dorder9D9D9; bD9D9D9; border -right:1px solid #D9D9D9; border-top: 1px solid #D9D9D9;}
- .yeei_sw1{height:107px; overflow:hidden;border-bottom:1px solid #D999; >.yeei_sw1l{ margin-right:320px;_margin-right:323px;padding:10px 10px 0 15px;background:#fff url({IMGDIR}/img/show_1_bg.) repeat-x-x 0 0prelx-x( 🎜>
.yeei_sw1l .hot{background:url({IMGDIR}/img/new.png) no-repeat right 0;position: absolute;right:0px;top:1px; width:48px; height:47px; height:47px; _background:none}
-
.yeei_sw1l .m { margin-top:0px; padding-right:5px;*padding-right:0px}
-
.yeei_1l .m img{ border:1px #E0E0E0; background:#fff; padding:1px}
-
.yeei_sw1l dt{ font-size:16px; padding-bottom:3px; padding-top:1px;font-family:'Hiragino Sans GB' 'Microsoft YaHei','宋體',Helvetica,Arial,sans-serif;}
-
.yeei_sw1l dd{ color:#666;margin-bottom:5px}
-
.yeei_sw1l.b{ color:#888;}
-
.yeei_sw1l .b a{ color:#77828E; margin-right:6px}
-
.yeei_sw1r{float:right;height:98px1 :316px; overflow:hidden; padding-left:7px; padding-top:8px;background:url({IMGDIR}/img/show_2_bg.gif) no-repeat 0 0;}
-
.yeei_sw1r .🎜>
- .yeei_sw1r. { background:none;width:300px; padding-bottom:10px; padding-left:6px;background: url({IMGDIR}/img/bottom_b.gif) repeat-x 0 bottom;}
- 。 .yeei_wb{ padding-left:7px; padding-top:2px;}
- .yeei_sw1r a{cursor: pointer;}
- .yeei_sw1r a:hover{text-decoration: noneyeei_sw1r a:hover{text-decoration: noneyeei_sw1r a:hover{text-decoration: noneyeei_sw1r a:hover{text-decoration: noneyeei_sw1r a:hover{text-de.
- .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}
- .yeei_wb .n { float: left; color:#666; width:220pxden:220px ; background:#FFFFF0; border:1px solid #EDD180; height:23px; line-height:23px; padding:0 6px;}
- .yeei_wb .n b{ color:#Fweight:n; }
- .yeei_wb .m { float: left; margin:0px; height:54px; width:54px; margin-right:7px;}
.yeei_wb .m imgpx solid #85898C; padding:1px;}-
.yeei_wb span{float:left; margin-top:2px;margin-right:10px; font-size:14px}
-
.yeei_sw2{height:195px ;overflow:hidden;border-bottom:1px solid #D9D9D9}
-
.yeei_sw2l{margin-right:318px;height:195px;border-right:1px solid #D9D9D9}
.yeei_sw2l .title{background: url({IMGDIR}/img/tab_bg.gif ) repeat-x 0 0; height:40px;}
-
.yeei_sw2l .titletext{font-size:12px;font-weight:normal;}
-
.yeei_swding2l .2{swding: 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}
-
.yeei_sw2l .tb-c{ padding:10px; border:none}
-
.yeei_sw2l .tb .a a {background:url({IM4IR}/img/tab_GDa. gif) no-repeat 0 0!important;font-weight: 700; color:#333;}
-
.yeei_sw2l .module ul li{width:50%;*width:49%;border-bottom:;border-bottom: 1px dotted #ddd; float:left; margin-bottom:3px; padding:0 0px 3px 0; }
-
.yeei_sw2l .module ul li span{background:url({IMGDIR}/img/GD. ) no-repeat 5px 6px; padding-left:15px;}
-
.yeei_sw2l .module ul li em{ font-size:11px; margin-right:10px;}
- 🎜>l. module ul li a:hover{color:#225F8F;text-decoration: none;}
-
複製程式碼
-
3.範本中加入N格程式碼（預設範本檔為：/template/default/forum/discuz.htm）
-
-
-
-
- {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：還有其他一直以來的方法，也可以的，附件裡面有說明，你懂的
|
