欢迎您光临月翼潮流公益残友设计论坛:  
修改/美化信息:
插件(修改)名称: 单页制作教程 For Discuz!X2(DIY/左右边栏/标签选项卡)
适用版本: Discuz! X2 
语言编码: GBK简体 UTF8简体 BIG5繁体 UTF8繁体 
插件(修改)作者: 体无完肤
支持网站: http://bbs.moonyi.com
插件(修改)简介: 单页制作教程 For Discuz!X2(DIY/左右边栏/标签选项卡)
首先,单页包括该单页的php文件和该单页的模板(.htm)文件,比如:host.php、host.htm# g# ^# {! [0 [

9 G8 E& D( P; T3 k8 S普通单页的php文件内容如下:
# M8 W* c4 ?( F3 T- k
游客,如果您要查看本帖隐藏内容请回复
5 A- Y" D1 B4 b  X, L1 c
: A( T( F( ?( q) u/ E# [
这里需要注意的是,host为模板文件名,不需要加.htm扩展名,模板文件存放于默认风格目录下的forum目录;4 u1 B) n, s. m2 M2 \% t7 ^) K
单页的php文件存放于论坛根目录;

- p2 Y* w8 y" c. I+ @; f* p
; p6 K! Z% M  e" O  o. F9 o% a% u$navtitle = '官方QQ群列表'; 这一句是定义单页的标题,显示于浏览器顶部的网页标题
* n+ U* |& B! ]4 r/ F$metakeywords = 'QQ群,官方,discuz,DRC,7drc,QQ'; 是单页的关键词信息
! U' X0 b2 u+ E# Q. w$ @* [$metadescription 是单页的描述信息。1 `+ M. _7 V' m* _; d) T$ Z* f
" X) ^7 r* H" i. h/ U) Z
可DIY的单页PHP文件代码内容如下:
  1. <?php
    0 G) j8 Z$ p$ |/ ?# W4 g
  2. define('CURSCRIPT', 'test');
    & v8 T& g* z9 Q! \6 j
  3. require './source/class/class_core.php';//引入系统核心文件5 [0 r* f4 I( K( D0 S' Q5 Q( [
  4. $discuz = & discuz_core::instance();//以下代码为创建及初始化对象4 p8 H; Q7 X2 W- r
  5. $discuz->init();
    ; \) o  s, H5 T) Q; H, G% c; u
  6. loadcache('diytemplatename');! ~: u" z. P% A0 l7 j
  7. $navtitle = '官方QQ群列表';
    , V. ]- S, {1 _3 r
  8. $metakeywords = 'QQ群,官方,discuz,DRC,7drc,QQ';
    - h: j1 q& @5 u( D; \- @
  9. $metadescription = '该页面展示Discuz! Rescue Centre 官方QQ群系,加入本站官方QQ群可及时了解掌握最新动态、插件、模版第一手信息。请勿加入多个QQ群,珍惜有限的群资源。';
    3 w) [0 F& c3 ^5 F& m8 E4 l8 q/ S- P0 I
  10. include template('diy:forum/host');//调用单页模版文件/ a6 y/ d/ _; y: b% B
  11. ?>
复制代码
注:其中 loadcache('diytemplatename'); 为Discuz!X2对DIY这一块做的更新,DIY要载入缓存,所以以前X1.5的单页制作教程做出来的单页DIY会无法保存。DIY的单页模版文件,修改单页模版内容后需要更新缓存才能刷新出来。  j; O& w% \4 K' e# m
9 C% H% b; n7 J, r
php文件创建完毕,现在开始创建模版文件,基本代码如下:) \8 [7 D  e- f6 L) ]! d6 T

3 g  |' B0 L# D+ g" v1 V普通单页的模版文件代码:
  1. <!--{template common/header}-->8 W/ E8 Z; J' A6 x5 v! s1 k) Z
  2. <div id="pt" class="bm cl">6 J! s1 @( [; G# S( Z  B8 n) a' F
  3.         <div class="z">
    6 {' ^" z* N' ~, x3 X
  4.                 <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a><em>&raquo;</em>
    + p' @) |  P% s3 W0 @' d
  5.                 <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</em>
    " Q# E+ c+ D# `8 f
  6.                 <a href="javascript:;">$navtitle</a>
    - k" I# C/ N. a+ j0 d/ z2 V: K0 ~
  7.         </div>, w+ U, |/ |, |! Y) d4 A
  8. </div>$ _* k* B: J/ q/ M
  9. <div id="ct" class="wp cl">* ^, T& o, a6 ^) S9 K7 U9 D
  10.         <div class="mn bm cl">
    / \6 V/ S) n, U9 n* B7 n
  11.                 <div class="bm_c"># E, F' b9 c& P; e) r
  12.                 <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>                        
    ) k/ z  V2 w) F3 n5 E$ b
  13.                 </div>3 I# k  }% L6 ]- Z
  14.         </div>
    ! R$ t% [8 R$ I8 p( B
  15. </div>) ^& X  |( U( s6 U# q& K
  16. <!--{template common/footer}-->
复制代码
效果图如下:
4 _) S- z  a2 U/ Y& w5 q
/ {* b- |. j! p: _! {
1 p* u2 w* ?9 p- e! _* }
" b$ M( t. P  q$ k9 _$ M- X$ M& E+ y可DIY的单页模版文件代码如下:
  1. <!--{template common/header}-->$ R9 {! \2 I7 E+ G8 @7 g. _  k
  2. <div id="pt" class="bm cl">
    - X6 A! `1 {1 z* i
  3.         <div class="z">- j( l, v& x; ]8 N7 N6 ^
  4.                 <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a><em>&raquo;</em>
      ^8 m/ r4 N/ Q, H2 V) n8 j3 l: ]
  5.                 <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</em>
    6 |, L, E2 b- ?' |/ ~) h; |- ]
  6.                 <a href="javascript:;">$navtitle</a>
    ' r9 y" J; a  M8 H$ C  i
  7.         </div>4 ]4 T8 h+ C* A, r
  8. </div>$ s) P+ P0 ?5 ]$ u0 ~8 I
  9. <style id="diy_style" type="text/css"></style>4 E% c4 U3 E( X$ `; f. x) p; h
  10. <div class="wp">" O  ^1 w$ j& O' B% T% y
  11. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
    " E5 Z5 \1 q0 h1 Q  v) o
  12. </div>
    * V- g. }+ [/ q4 F& V( s

  13. : R8 `- b; ^5 K2 Y
  14. 6 w7 B# c" |, ]+ k% N6 X$ N
  15. <div id="ct" class="wp cl">* K7 h2 X7 R2 R) k; j0 _- G
  16.         <div class="mn bm cl">$ J0 J2 J, F1 ]) I# H" Y1 q( K
  17.                 <div class="bm_c">5 C2 z4 F1 {8 u( Z
  18.         / ^" u1 l- g9 l+ G8 @8 V
  19.                 <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>" U2 V3 P1 }* Z- b* k, v
  20.                         ! S( T) W# }% t8 K) Y: A
  21.                 </div>/ z" d# E4 Q& M5 d" Q
  22.         </div>
    : N4 u" E. ?- z) G
  23. </div>- E% y8 d; _$ t$ Q
  24. ' f0 K; ]1 D: }0 n3 B- Z
  25. <!--{template common/footer}-->
复制代码
其中:
  1. <div class="wp">
    1 T9 Q+ ^2 _% f, ^. I! ~' p; ]
  2. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
    0 h) \: U+ m3 [) C" @/ m. R: m
  3. </div>
复制代码
这段代码就是DIY区域的代码,之前X1.5的单页教程里面我们也讲到过,可以在单页的任意位置插入DIY区域,即:
  1. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
复制代码
注意:如果一个页面要插入多个DIY区域,注意修改上面DIY区域的编号ID,几个DIY区域的ID编号不能相同。
5 |" H" a& v% y, n# }9 u4 e- A. ~
带有右侧边栏的单页模版文件代码:
  1. <!--{subtemplate common/header}-->1 T4 t6 P6 \/ I* i8 T. Y

  2. $ M; o8 [% b. ^9 S
  3. <div id="pt" class="bm cl">  p8 Z& o1 @' p2 z0 ^- [& o
  4.         <div class="z">! O5 q5 U& H( C4 _+ F! J
  5.                 <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a><em>&raquo;</em>- u% Y) B$ c  ^. Z
  6.                 <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</em>7 X8 g8 g  ~. `$ H1 H8 a( r
  7.                 <a href="javascript:;">$navtitle</a>7 F: r; O. F% `  K# ?, y- Y
  8.         </div>) F" ]7 _( e) g3 e! x9 X1 E
  9. </div>* \! p" A1 _0 s$ f0 m# S- s
  10. ) K+ L& u, s5 b/ i3 b0 d; y; n
  11. <div id="ct" class="wp cl ct2">0 H8 \$ k, ^7 n" K; n9 P# t8 P0 _
  12.         <div class="mn bm cl">
    0 n& X$ [, K9 Y
  13.             <div class="bm_h">标题栏</div>
    & ^% w3 J1 b6 Z9 M
  14.                 <div class="bm_c">
    - }8 U# z. \2 W+ J7 l% ], X0 w
  15.                 " q( b' g! d( P2 f# h; c6 W
  16.            <p style="width:300px; margin:220px auto; text-align:center;">这里是单页正文内容区域</p>- N7 [6 \# c0 U: Q: _; a- I! U
  17.             
    ' }- v' J+ J- F, e* W
  18.                 </div>3 X) ^! q- B7 U% B  V- D
  19.         </div>
    6 @# N5 d% Y; R8 R
  20.    
    # ~6 i- m* g; K
  21.             <div class="sd">
    9 P/ z* J' z: J; @+ ~5 |
  22.    
    * d$ w  v0 m, s/ q; z$ L
  23.             <div class="bm">/ m$ {9 M( W- g: C
  24.                         <div class="bm_h">
    6 E0 J& ^0 z' a. r  ?
  25.                                 <h2>公告栏</h2>  J7 w1 I' m3 G8 `. R' n1 w
  26.                         </div>
    4 L6 `: }- J( a+ K3 _* @0 T5 F! Y" ]
  27.                         <div class="bm_c">  |2 k" I2 ~' `1 D7 F8 b
  28.                                 <p class="xl xl2 cl" style="line-height:25px;">' W; o) q# k" ?1 R- |6 y
  29.                         这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容
    & D5 L. U# g% G# M7 ]: U# i
  30.                                 </p>5 ?0 g- ^$ I& X' s
  31.                         </div>
    + P$ c3 ?. X3 T. g  Q; ^; I/ F
  32.                 </div>
    0 P4 `$ l3 I7 r
  33.         6 A" ?) }- V* M$ \7 H) [, v. j  _
  34.         <div class="bm">
    - }/ g5 D1 p% s
  35.                         <div class="bm_h">
    0 @; w! o/ F& ^  W2 z
  36.                                 <h2>操作菜单</h2>) Q" j) ?# |# {+ M7 B- n
  37.                         </div>
    , k+ Y, q+ J# m1 c0 `  e
  38.                         <div class="bm_c">' K+ Y0 f5 ^5 }) J/ v& k9 s* ?$ H
  39.                                 <ul class="xl xl2 cl">) d8 h6 W. Q; o( T% B/ F
  40.                         <li><a href="#">测试菜单一</a></li>" D0 I. z& g5 u
  41.                     <li><a href="#">测试菜单二</a></li>
    ( ~' V- `, S% k! j( w4 y$ h+ j! L3 |
  42.                     <li><a href="#">测试菜单三</a></li>% d% A$ p, {2 K! y
  43.                     <li><a href="#">测试菜单四</a></li>
    ; P# |9 n6 Z# _- l) j' G: Y
  44.                     <li><a href="#">测试菜单五</a></li>
    . }+ Q$ C" \) q. {  h
  45.                     <li><a href="#">测试菜单六</a></li>1 p8 ]; M- I% ]* W# D- U  f$ C
  46.                                 </ul>1 Q* _7 q! U7 u+ v) e# i/ n
  47.                         </div>
    , E+ v! h5 T8 t, W  O; [
  48.                 </div>
    " U1 n/ A0 {. H  ?1 {6 V
  49. ( b7 k9 b) s( m6 }8 s# Y. e
  50.         0 F  L, x$ W! _- }8 z9 n9 a% l; S
  51.         <div class="bm">/ J) Y4 u  x2 e1 e% S. N
  52.                         <div class="bm_h">2 m2 h5 {) _9 q" W; p
  53.                                 <h2>版权信息</h2>
    ! q8 ]; M0 D! W$ _3 M: h+ i
  54.                         </div># v: }$ u4 B& u; W  o0 }& u. S
  55.                         <div class="bm_c" style="line-height:25px;">% H# b) w  t+ a
  56.                                 <ul>, Z& ]/ D$ c, q3 @/ ]
  57.                         <li>作者:<a href="http://www.mutoulee.cn" target="_blank">体无完肤</a></li>
    , o1 d" D1 \' P+ J
  58.                     <li>网站:<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li>
    3 J$ }1 F6 O; ]4 V' X
  59.                     <li>版权:Discuz! Rescue Centre</li>) }0 V: Y) u" ^8 e3 C0 ~( O0 L
  60.                                 </ul>; {( T- J0 U  {# y4 X
  61.                         </div>4 ?! S- C7 z: f, B  `3 }
  62.                 </div>
    0 z6 d1 Q+ v& }- |; V2 h: f
  63.         
    & N& E3 k7 e2 r( a/ p. l
  64.     </div>* T$ l% x, Q; `2 C- [8 }; h. L
  65.    
      V) p! q2 m+ f! w
  66. </div>
    3 q( Z% f- N4 N+ [* q/ H1 i( A
  67. ! D; G8 N  ~; `9 x
  68. <!--{subtemplate common/footer}-->
复制代码
效果图如下:
9 _# k) _- Q+ H( T: ~3 Z" }- }( h5 V' f9 S- `2 M2 u( a

; x8 C6 W" [4 F7 b( o6 G. a  ?# M/ B  m; w! C1 t  S
带有左侧边栏的单页模版文件代码:
  1. <!--{subtemplate common/header}-->1 l- a" d& Q# J# U/ M
  2. , y: H$ H3 M+ B2 j5 ?1 B: g
  3. <div id="pt" class="bm cl">
    * p) f; u! |7 u$ W* n# [
  4.         <div class="z">/ G5 L: ]0 _0 \9 \+ E
  5.                 <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a><em>&raquo;</em>' ^# F4 w/ U. |# o" c* o
  6.                 <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</em>4 @% y0 Z# Z7 L( c
  7.                 <a href="javascript:;">$navtitle</a>1 Z: O$ \) t  U/ o. I. E! j
  8.         </div>
    2 j" \: h, I4 ~
  9. </div>
    $ [! Y- u! h& ?$ z: E

  10. % q- }' M' G1 X7 W2 }
  11. <div id="ct" class="wp cl ct2">& h. q6 p4 Z: ~/ U
  12.         <div class="mn bm cl" style="float:right;">! v- V* g2 P/ b/ M7 c
  13.             <div class="bm_h">标题栏</div>
    " h8 o) ?4 Z4 x" f2 e1 \8 e- u6 K
  14.                 <div class="bm_c">
    2 J  X5 S* A+ r3 |7 h7 J
  15.                   u5 A* `- F0 A$ ^
  16.            <p style="width:300px; margin:220px auto; text-align:center;">这里是单页正文内容区域</p>
    7 v) V7 W! ^' w+ j
  17.             
    % k- u1 Y$ K% y! T) A$ e2 L" E
  18.                 </div>
    * Y2 f0 i! r' f% ~# t: q
  19.         </div>
    : h( \- S; D0 h; b. f1 h
  20.     7 _9 X6 ]2 w1 H
  21.             <div class="sd" style="float:left;">0 i  b1 n% v% r: [" \* Y  p! t
  22.     0 V* {7 f6 W9 M9 n" l( _5 R
  23.             <div class="bm">
    4 s/ d6 _, T6 V8 c" V" m, ]/ q
  24.                         <div class="bm_h">
    $ R/ l  g' g6 k
  25.                                 <h2>公告栏</h2>
    2 X- P% {) N* n8 V% ^
  26.                         </div>  `& {/ v8 K% e" G# A% y- k
  27.                         <div class="bm_c">( y( Q$ s) p' C5 L
  28.                                 <p class="xl xl2 cl" style="line-height:25px;">
    , s5 S8 ~9 u9 {0 A
  29.                         这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容! \3 m9 M* Z- f; N. Q
  30.                                 </p>3 M, w& a: c; ~- j. E- K
  31.                         </div>
    " E+ d2 B- @0 e
  32.                 </div>: ~! A- e3 ?  ]" U
  33.         ! m2 o% y5 G1 \# D% S2 d
  34.         <div class="bm">
      I' r) V1 p6 h
  35.                         <div class="bm_h">: M1 K3 n+ N0 Z) E
  36.                                 <h2>操作菜单</h2>  n; o6 |; v! b8 P; `7 \# Y" Z
  37.                         </div>
    0 U, k5 p# L  a0 E+ R  [& Z- L
  38.                         <div class="bm_c">, |% @) o- r7 V3 U0 ~
  39.                                 <ul class="xl xl2 cl">
    ' x9 W  e4 }* j
  40.                         <li><a href="#">测试菜单一</a></li>  \& Q, t, s0 ^
  41.                     <li><a href="#">测试菜单二</a></li>1 y6 J, ]8 L2 D4 z+ I
  42.                     <li><a href="#">测试菜单三</a></li>. z6 X' C8 A; F" d8 U
  43.                     <li><a href="#">测试菜单四</a></li>
    1 ~' R9 J) b9 H6 w- t( c
  44.                     <li><a href="#">测试菜单五</a></li>
    * X4 I/ ?* Y; Y$ E. }! j. A
  45.                     <li><a href="#">测试菜单六</a></li>
    , j. `4 L  C3 |5 L& E
  46.                                 </ul>2 {& R  b4 H; n
  47.                         </div>3 ]3 \# W5 p& C( H8 u& X7 I$ U3 Q4 t
  48.                 </div>- Q$ [7 K1 Z% G$ u# ^
  49. 4 }) J/ }. p+ z/ C. H
  50.         ! N! R9 J! N" z9 b, ~6 f
  51.         <div class="bm">
    ; p) W( z( t9 f# g2 t3 }
  52.                         <div class="bm_h">
    6 y6 _' R8 u: i3 Q
  53.                                 <h2>版权信息</h2>
    ' ^0 y/ p, q$ g8 U! c% ?
  54.                         </div>7 @7 W, \/ X6 ^3 R/ \4 B: h
  55.                         <div class="bm_c" style="line-height:25px;">
    ( o7 p7 M  b6 V, f
  56.                                 <ul>
    , r: d* N  @" M% @3 F6 e2 I
  57.                         <li>作者:<a href="http://www.mutoulee.cn" target="_blank">体无完肤</a></li>
    . y3 {6 F5 b$ m" j. r" Q
  58.                     <li>网站:<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li>
    & K; c7 G7 Q; o; A- s- |
  59.                     <li>版权:Discuz! Rescue Centre</li>
    - D; I7 Y' P) S8 j, C9 o, T- ~% R
  60.                                 </ul>
    $ W. E+ W$ h0 E
  61.                         </div>
    # R2 ^6 \; s( s) C- g! |; b3 N* X8 I
  62.                 </div>. r) a; V' U) @& l* N( i
  63.         5 x9 S8 ?7 ?( a* b$ {, L
  64.     </div>3 V: f# r0 y+ r7 k3 R
  65.    
    + ^8 h0 ^" r$ t8 x
  66. </div>
    1 q  [$ B: ?0 o, }8 l2 O

  67. 9 N1 C" Y$ _' [2 k9 @
  68. <!--{subtemplate common/footer}-->
复制代码
注意观察这个左侧边栏的模版代码和右侧边栏的模版代码,可以发现,代码其实都一样,只是更改一下CSS样式
1 s) j  @8 H- x8 [- r$ r/ b/ I2 f6 M' r% _' r( ?) D/ L" s
<div class="mn bm cl"> 给这个div加一个向右浮动,即:
  1. <div class="mn bm cl" style="float:right;">
复制代码
再给 <div class="sd"> 这个div加一个向左浮动的CSS样式,即:
  1. <div class="sd" style="float:left;">
复制代码
就是说只是左右对调一下。
/ k  V) W$ J" O/ e0 u6 t$ |; R" P) K( p/ z3 `1 R9 K4 \- T, \
效果图如下:& @$ |4 C$ l) L5 ?: w* i
% m; s# N- W) C/ w0 R

# E7 \- L  e& k9 [
3 D1 q1 Q# V, e5 r2 `带有标签选项卡的单页模版:
  1. <!--{subtemplate common/header}-->
    # u& l! [& d/ w  ~
  2. * k$ k1 r3 N1 Y9 I
  3. <div id="pt" class="bm cl">" e8 Z% }* [8 Q6 J2 e4 k! O
  4.         <div class="z">
    ' ~/ [4 J' u! Q
  5.                 <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a><em>&raquo;</em>/ x5 p) n9 u. V2 X  B
  6.                 <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</em>
    - [( G5 w- n, f/ u. z; x, k
  7.                 <a href="javascript:;">$navtitle</a>
    9 ^$ D$ Q2 F$ k) k- q! c) }
  8.         </div>
    9 s4 p% ~' t, E7 d! Z0 A$ p1 N
  9. </div>( K  d$ `+ n9 ^* y' R

  10. 2 W1 m1 o1 N  l* L% G+ V
  11. <div id="ct" class="wp cl ct2">2 u3 b5 Q" X/ _4 S" \
  12.         <div class="mn bm cl" style="float:right;">
    6 Z& H' Y+ H0 Z* k: Q
  13.             <div class="bm_h">标题栏</div>
    " E2 I9 z0 e- [' o  r' r( O
  14.                 <div class="bm_c">- W" h. p! ~7 ?
  15.                
    ( \$ f* E& W* Y
  16.             <ul class="tb cl">" H; ?* l1 O/ Q8 r7 j1 J3 c
  17.                                 <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=new">最新发布</a></li>0 }$ ~; b# g! t9 J& F4 h
  18.                                 <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=view">浏览排行</a></li>
    % F. H1 _0 k" N' c3 O
  19.                                 <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=comment">回复排行</a></li>
    . p- R$ P" Z  E$ \
  20.                 <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=rate">评分排行</a></li>
    ( ~# o, j' M- C8 t$ L; k: K
  21.                         </ul>
    0 t: B  O/ c* K7 ~1 c, j: N
  22.                 ( V+ L2 X' F9 q  h+ q+ a" u7 y
  23.            <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>0 ]$ y& @) u- q/ Q; s
  24.             & k( x5 _. j% G9 ~9 j8 S+ c- J* _! }
  25.                 </div>
    . l+ H' s; D7 \" d% N
  26.         </div>: C% k. J1 [9 i& V( j( O1 X1 j
  27.    
    - z4 T. V6 A/ K, ]9 ^. p
  28.             <div class="sd" style="float:left;">
    4 y6 w  g8 O. n" g- N
  29.    
    & c/ `! J2 S: g+ ^% M
  30.             <div class="bm">- |; _5 k1 O, L4 W# g5 o6 Q  N% d
  31.                         <div class="bm_h">
    1 v3 d! T! m1 K
  32.                                 <h2>公告栏</h2>1 E% `  H2 w* S5 e$ }2 l1 U# l
  33.                         </div>
    : W( c" B1 c6 D! X; y. w
  34.                         <div class="bm_c">
    , J# a$ v8 ]. f4 T' F
  35.                                 <p class="xl xl2 cl" style="line-height:25px;">; K+ @' T: K! D0 c/ W9 L% m
  36.                         这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容
    : R, h7 _* H  T  k: l  y% L& r; x- q
  37.                                 </p>; ~" k/ c7 d7 o
  38.                         </div>& I8 i8 ^6 r! o6 W
  39.                 </div>4 ~' }2 [1 n) m! @5 W
  40.         
    , h+ f" G! Y! t
  41.         <div class="bm">0 e6 a8 I$ }- i& v
  42.                         <div class="bm_h">: P; ]; m5 q& j  \# m! Z; E" G
  43.                                 <h2>操作菜单</h2>) K, p+ o* m# F$ i
  44.                         </div>
    , X% P% p5 i( u6 S- z" t# N- l
  45.                         <div class="bm_c">
    % m) d1 a0 d8 E4 T. O% {
  46.                                 <ul class="xl xl2 cl">
    - s/ m7 {6 Y4 m- f/ E6 b
  47.                         <li><a href="#">测试菜单一</a></li>
    ( Z6 l5 k# s8 L# q$ h
  48.                     <li><a href="#">测试菜单二</a></li>
    * i8 T6 [4 j+ Y2 V( n
  49.                     <li><a href="#">测试菜单三</a></li>" X$ z" k  b3 z4 u* c
  50.                     <li><a href="#">测试菜单四</a></li>+ `- y; ]: ?4 I) R, m1 G
  51.                     <li><a href="#">测试菜单五</a></li>
    5 D3 }8 _( D) O( l' o
  52.                     <li><a href="#">测试菜单六</a></li>
    5 J; {5 ]7 v- U  a: h4 r1 j
  53.                                 </ul>& R* F& k) O2 ^
  54.                         </div>
    8 Y: Y5 q$ c, y! \$ s; r' k4 p/ U% W+ v
  55.                 </div>/ T& x) M* u8 r- q$ R2 r/ w6 a

  56. ' Y3 e' q) r" q* x  h$ {$ i% a3 k! E
  57.         $ R- b- e2 K" `9 g! [' e+ x$ [
  58.         <div class="bm">) @. {: {9 _, f0 b/ K. c; D$ [
  59.                         <div class="bm_h">4 C7 E* H$ _+ C( H$ a
  60.                                 <h2>版权信息</h2>5 m, ?5 p2 _. q7 u3 Z& {3 m
  61.                         </div>
    6 Z  P7 J3 F+ }/ A! t. l" t) p7 q
  62.                         <div class="bm_c" style="line-height:25px;">
    ! N# v0 {* i7 c
  63.                                 <ul>  F6 P; G; Z9 G. }; `  Y& y
  64.                         <li>作者:<a href="http://www.mutoulee.cn" target="_blank">体无完肤</a></li>% B- u( U& |: X9 H% _. O7 ~
  65.                     <li>网站:<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li>: K! @9 E* h) ~1 O9 A1 z) @* V+ V( I
  66.                     <li>版权:Discuz! Rescue Centre</li>- {/ L7 r# S) @
  67.                                 </ul>
    4 D: v) C8 F6 I: [2 i
  68.                         </div>
    . k2 @! J9 A' A7 O: r% G$ ?7 b
  69.                 </div>" ]3 U7 E1 u1 O4 a
  70.         1 B4 K. M, E4 e& f
  71.     </div>+ D+ _6 A3 U; q, s5 ]  V
  72.     . q, j0 l# o  u1 x1 x; y0 n! k8 ~
  73. </div>$ p" D# A, \8 L- D

  74. 3 z; h. z: P, g' ]
  75. <!--{subtemplate common/footer}-->
复制代码
注意观察你会发现,选项卡这一部分跟X1.5一样的,就是在模版的正文区域的div内增加一段代码:
  1. <ul class="tb cl">
    5 v' E% ]! N$ I8 a: g' I4 A. O3 {
  2.                                 <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=new">最新发布</a></li>! q) V& m/ u- P$ i
  3.                                 <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=view">浏览排行</a></li>* L5 s8 k( }- ~2 @$ W
  4.                                 <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=comment">回复排行</a></li>4 ^' g7 Y& `8 ?  B+ s9 ~
  5.                 <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=rate">评分排行</a></li>) Z) T9 m: M) r: x
  6.                         </ul>
复制代码
效果图如下:
. X5 w, D3 n7 \( g6 K
# ^5 v; h9 m0 V! A5 s' }& p$ g8 W5 [( F0 p7 {, s$ u

6 `+ D6 D$ S- N, E9 g另外还有单页里面的分页(多页)显示,跟之前X1.5的单页教程一样,大家可参照X1.5的来做。
9 Z9 J  a1 a2 c1 E; y6 k* kX1.5单页制作教程:http://bbs.moonyi.com/thread-107388-1-1.html7 {, _1 W# m2 d$ v8 w1 }2 e
此次教程整理结束。
4 I! f* n* x) a! W7 c
这个世界已然疯狂,你还在那假装一本正经,这样多不好,快来加入我们吧!
要查看全部内容么?那就。。
立即注册 已有账号?点击登录
附件: 你需要登录才可以下载或查看附件。没有帐号?入驻月翼潮流

Rank: 23Rank: 23Rank: 23Rank: 23Rank: 23

级别:MYF·管理员(殿)

帖子: 498|积分: 3144

MYF·家族成员(族)

  • TA的每日心情

    2018-09-30 17:05:00
  • MID
    2
    威望
    83 点
    精华
    0
    灵感
    1309 点
    月光
    2902 抹
    激情
    555 升
    潮流币
    927 枚
    阅读权限
    250
    在线时间
    444 小时
    最后登录
    2018-10-12
    入驻时间
    2009-12-18

    MYF·团队精英(英) MYF·自强家族(族)

    疯狂的时代,你还在那假装一本正经吗?
    Fashion的你怎能错过这个显摆Personality Self的机会?
    赶快来【个人中心】设置签名吧!
    Hold住大家,WE 等 YOU!

    您需要登录后才可以回帖 登录 | 入驻月翼潮流

    fastpost

    关于月翼潮流|下载桌面|联系我们|隐私保护|版权声明|Archiver|手机版 || 月翼法律顾问: ITlaw-庄毅雄|权威认证

    Powered by M.Y.Fashion ® with Discuz! X2 |Theme Designed by Jathyapple, Theme Code by Youths. google|baidu

    © 2007-2014 M·Y·Fashion 月翼潮流 MoonYi.com (沪ICP备08110630号-4) |感谢柒瑞提供免费技术支持.|

    回顶部