航空论坛_航空翻译_民航英语翻译_飞行翻译

 找回密码
 注册
搜索
查看: 1360|回复: 0
打印 上一主题 下一主题

DEDECMS V5.3 官方模板 6种列表样式说明 [复制链接]

Rank: 9Rank: 9Rank: 9

跳转到指定楼层
1#
发表于 2009-8-29 10:44:53 |只看该作者 |倒序浏览
DEDECMS V5.3在(layout.css)中预设了6种区块列表样式 . _, c1 P" `9 y. b7 ]: @' I
您可以根据自己的实际需要修改使用
+ y# f0 v" a+ T' ^下面以首页区块调用位置为例
. o1 I4 L5 u: ^1 `  w我们来详细介绍这六种列表样式的结构和class
/ Z: F! q. V/ ^5 b1 u& C* E- A首页模板的<div class="listbox"></div>内是区块列表的调用 ! E/ }6 Y# n, k( S: T! y0 Q
<dl class="tbox">
  }. V8 D0 j0 B* v9 F<dt><strong><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></strong><span class="more"><a href="{dede:field name='typeurl'/}">更多...</a></span></dt>
4 q5 ^. ^$ F/ C! C6 H9 n<dd>
" q: _" x- b6 ~/ a' i* Y/ G<ul class="d1 ico3"> ; i+ p2 P6 i5 T0 `# x) B; z
{dede:arclist titlelen='60' row='8'} % _( Y. c: ?. F5 |& d5 O/ E6 L
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li> ' p, J; g1 {% B7 F8 S) {% M; _# E
{/dede:arclist}
+ ^8 M3 j. V/ j  l, E$ Y</ul>
0 A2 S5 o! X, V( Q" ~0 [</dd> 7 J  P9 b% G- V) j  V
</dl>
0 i6 g$ X3 o) w) U' M: T9 w其中<dd></dd>区域即为列表调用2 l4 R) L  U2 I
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
; i5 E% |# X1 l# y- S. [  ~4 }: u- M-------------------无聊的分隔线--------------------------------------------8 o8 H* p9 N* ]. V9 c
列表调用样式1 - 纯文本列表(c1)
. Y( w, {. J( _. c
2 B7 W$ j! B4 d6 _3 O纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.8 B  ^0 H" T4 i) H4 _/ @: D
<ul class="c1 ico3">8 y& ~# E7 r" p. Y, W7 G- l! t* r3 S/ i
   {dede:arclist row='8'}$ Q3 S; f. s/ p
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
; v% ]/ ?- Z% x, X$ }  {) i   {/dede:arclist}( w( ]( y) j5 M2 U6 K% p) G/ W
</ul>3 [# X. M. j9 U# O5 W
列表调用样式2 - 带日期的长标题列表(d1)
, p2 s5 N4 T5 ~# ^5 M+ H4 B  T
可以调用23个中文字符的长标题和短日期* g1 ?* V% F5 I
<ul class="d1 ico3">
+ ^: y* }4 D* n1 p. a7 r   {dede:arclist row='8'}( e3 p" p* g: x
     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>2 x) h3 p+ o( L1 I
   {/dede:arclist}  h8 ?/ |( K7 N
</ul>
5 y. Y; v: v0 D) b1 K0 X列表调用样式3 - 带日期的短标题列表(d2)
+ O; c; m9 U) V0 A7 `, \0 \# e: z9 C) {
可以调用19个中文字符的长标题和短日期
/ n3 W5 f. U3 m7 F9 g<ul class="d2 ico3">1 w6 q7 }, Z8 a; n$ y& d& I
   {dede:arclist row='8'}
) Q2 _1 j2 F+ c5 {- n     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
" Z% D  K% G6 M& E0 ~# i' t( o. ~   {/dede:arclist}
' i) w+ c4 |# F8 f6 ]* ^( T1 v</ul>
6 B% w; {) z) h3 A4 }- V9 V列表调用样式4 - 图文混排列表1(e5,c1)( C. j0 ~$ e. R* n8 E2 c
2 l8 V. R) o$ \& S- v# p3 P$ Q' T
左侧调用图片,右侧调用文字标题列表
# d# c' _' C) S: O- T! N<ul class="e5">
6 b3 B1 M- A' _- Q+ L6 A     {dede:arclist row='2' type='image'}) A% _, W1 F" ?7 u2 n; }1 C
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
& F3 Z. `% U* E     {/dede:arclist}
' B3 p" x" u8 k0 x  }</ul>" T  i$ Y$ j5 y3 |. V3 j
<ul class="c1 ico3">, D' I- p- p( o: A9 K3 r* L
   {dede:arclist row='6'}
9 `- ^. |) n$ N9 g     <li><a href="[field:arcurl /]">[field:title /]</a></li>* n( G$ F; R- Y
   {/dede:arclist}
& o+ x2 M8 p0 M! h! ^, L& T7 ^</ul>/ `. H# s- }& b/ C4 ?; C- q
列表调用样式5 - 图文混排列表2(e6,d2)- R' H- O8 ^* |( R: y; P! `/ X
- l2 j% R5 v( _) y
上部调用图片,下部调用文字标题加长日期列表7 k1 V! S0 k) ?3 ?; ~* `( B# _
<ul class="e6">
! |: y  Z; l* b3 s' G6 Z     {dede:arclist row='3'   type='image'}
1 e! q9 ^/ e# z4 |- L     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>! T' b) p! S) y: |: R& `. d# A
     {/dede:arclist}7 H9 g' @: l, J# w' N
</ul>, u4 l' e0 e* Y9 C% i2 Z
<ul class="d2 ico3">0 T  [! Y7 i# w  k
   {dede:arclist row='3'}
9 e8 h+ E, l5 M; |, t1 P     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
" g, _- ?  \/ I0 y: ]   {/dede:arclist}+ ~  Q! v4 t; ?& r% u
</ul>, L8 x& G+ S/ K# w$ _/ q3 x5 E4 B
列表调用样式6 - 图文混排列表3(e6,c2)
' j+ h. N. E; W* j1 B. o
7 H: c% m+ f. X  K上部调用图片,下部调用两列文字列表
" t2 B2 P. H) R) P: A<ul class="e6">
2 n& B3 k5 g7 H7 f+ f* ~. ^3 ^! @0 q     {dede:arclist row='3'   type='image'}
3 L9 E" C: e0 t  g7 ~, b     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
6 A0 R2 U5 z1 D5 d* F1 F* `     {/dede:arclist}
* I* I. P0 W8 h6 P</ul>
6 q) z5 V- @* Z; L1 X" M# O3 \$ ?8 m<ul class="c2 ico3">
3 N' ~  Z9 t2 v+ F   {dede:arclist row='6'}+ p! d+ p4 T' [- ^- @8 C
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
8 m( `. i3 s. x% Z, A% f   {/dede:arclist}0 H6 h0 J! L0 M3 [. K, Q
</ul>! Q# A9 Q2 Y. R9 P9 o$ d& a
另外ico部分有3种ico可选择
9 _/ Y& t' R% [& I, C4 e分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.9 Q) i: m3 L. Y3 u
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
" _8 E+ f" o) J# K- X这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.: t! T8 K* z9 J6 w9 l& E
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.
您需要登录后才可以回帖 登录 | 注册


Archiver|航空论坛 ( 渝ICP备10008336号 )

GMT+8, 2025-10-4 18:11 , Processed in 0.022002 second(s), 9 queries .

Powered by Discuz! X2

© 2001-2011 MinHang.CC.

回顶部