航空论坛_航空翻译_民航英语翻译_飞行翻译
标题:
DEDECMS V5.3 官方模板 6种列表样式说明
[打印本页]
作者:
帅哥
时间:
2009-8-29 10:44:53
标题:
DEDECMS V5.3 官方模板 6种列表样式说明
DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
0 W, g& }" ?" l* F; v0 }
您可以根据自己的实际需要修改使用
) X1 F5 R" H; b+ [
下面以首页区块调用位置为例
$ f [! {- `+ h
我们来详细介绍这六种列表样式的结构和class
% R% h* c9 _9 K1 n) C# r
首页模板的<div class="listbox"></div>内是区块列表的调用
' H1 o: L) d$ T( p
<dl class="tbox">
' z9 d) I: m, G9 t
<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>
2 u4 }# S+ W& U, X; w8 s8 S$ K& v
<dd>
8 Y) h+ S" G4 l9 e
<ul class="d1 ico3">
+ `9 Q3 a$ n$ P) Q9 k" u; d
{dede:arclist titlelen='60' row='8'}
! {' R4 [8 X! y) c. \+ T& _2 J
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
' N7 C' P/ @ y
{/dede:arclist}
) l- ?" R/ K5 M& @+ v, v
</ul>
/ S3 [: H* @9 M; b
</dd>
# Y1 X, f; |6 x0 M" }/ @
</dl>
6 [, b" P! S* Q, |' L
其中<dd></dd>区域即为列表调用
: i, o" j- n' T+ {+ S: A
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
$ m% y% R& ^. W" y; Y
-------------------无聊的分隔线--------------------------------------------
, g! O9 F' u1 k. R
列表调用样式1 - 纯文本列表(c1)
. ]% H' s" q& G; w1 D# q3 P( G
" `/ m; k+ t! x: K# H/ K9 _ A' r. i
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
. I- e# G6 t3 G% v5 o% M% i
<ul class="c1 ico3">
/ H: |1 {8 J# V- Y) A: `* @+ f; c; b
{dede:arclist row='8'}
$ n$ f' M( Y% ~$ O
<li><a href="[field:arcurl /]">[field:title /]</a></li>
% P7 b) ^/ v: z' k: D" A9 C! r' t+ i
{/dede:arclist}
3 |* W7 x1 x. c- B( s q9 k
</ul>
( x! I! f! S( A0 c- p( O
列表调用样式2 - 带日期的长标题列表(d1)
; s n, ]0 f1 `$ _: [. z6 a
7 H) W% F! b0 @/ q% a
可以调用23个中文字符的长标题和短日期
* Q" o8 v& O: U( t
<ul class="d1 ico3">
* \1 ~" r2 P* X# h9 P H" a0 E! v- Q' H
{dede:arclist row='8'}
, T0 c& @5 @0 J9 X' l
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
+ B( [% ^9 {2 |# I- a
{/dede:arclist}
; e6 j3 A. G7 @( i
</ul>
6 R- s8 e$ l# |( ]5 y
列表调用样式3 - 带日期的短标题列表(d2)
: P5 Q7 `: Q0 ?7 k" `* O/ [
8 f6 j7 W! ?6 u
可以调用19个中文字符的长标题和短日期
7 Z% M' z) V6 @/ Q
<ul class="d2 ico3">
* R( M. c3 @9 v8 J" m
{dede:arclist row='8'}
; H0 o+ p Z( E4 a# p+ J$ g' n
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
6 s$ Y8 b5 H4 x6 t8 S9 l. l5 N2 I
{/dede:arclist}
( L6 H1 f' r. }8 p: }3 x$ J" e2 ^5 i9 a
</ul>
6 L( h2 u6 e, x& `, m5 d
列表调用样式4 - 图文混排列表1(e5,c1)
7 j0 ?9 l- `7 P" B
0 g/ Y0 |( P# ?& L# n. G3 h
左侧调用图片,右侧调用文字标题列表
$ t. V6 V/ k; i2 R4 v$ \! l, e
<ul class="e5">
4 N5 O/ i1 ~ {: w `
{dede:arclist row='2' type='image'}
5 |0 g- B8 o: ^- i8 g9 N$ I! p5 I
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
. H5 o' D- W: M/ n+ E+ l1 {
{/dede:arclist}
# Y' v9 H. a- Y
</ul>
( {+ W6 M/ L/ i
<ul class="c1 ico3">
Y+ Z+ A5 L4 x; f2 i* `9 r/ ~
{dede:arclist row='6'}
) X A0 r" }3 j+ q! {% B" V
<li><a href="[field:arcurl /]">[field:title /]</a></li>
P4 W% l* \' ?4 N2 A
{/dede:arclist}
0 N5 X) Q r1 f+ c9 Y
</ul>
# {$ L g" M* ~, W; `% ~6 a
列表调用样式5 - 图文混排列表2(e6,d2)
) c8 q) m% c% b5 s: e
4 i6 J! V. q8 u# g, H- q
上部调用图片,下部调用文字标题加长日期列表
8 N& b7 K5 n/ m% N) J9 O0 c
<ul class="e6">
: B% P" z9 g& G5 [# K% [
{dede:arclist row='3' type='image'}
8 _- A# T2 m; {; `# h6 B
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
* l/ R j. ]1 e4 z
{/dede:arclist}
; m. g6 ^ }' {" q
</ul>
9 @+ `# K# I9 w
<ul class="d2 ico3">
. x/ M3 w7 g" r3 C& D
{dede:arclist row='3'}
* p; v/ l, D' V+ q
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
- g6 I/ h7 w5 T# Q
{/dede:arclist}
! @7 }0 t- v1 ?& G" W
</ul>
: m Q7 Y+ ]6 d7 w
列表调用样式6 - 图文混排列表3(e6,c2)
9 Y3 d- }, V: {% r3 Y
& h7 X- q0 a- k# J& r& }# o! E
上部调用图片,下部调用两列文字列表
) Z' D+ N. S: h5 L% t! i+ T% S
<ul class="e6">
0 @% f$ ], L; M9 E& u; h$ W
{dede:arclist row='3' type='image'}
- g% L: }3 p3 c" Z: {8 _1 y6 U
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
% ~# a( K& i) q# l% a; K( B; n0 b
{/dede:arclist}
5 Y+ j$ C4 G$ j
</ul>
$ W1 d7 c. e; i) N5 H& o% q, q! e$ i
<ul class="c2 ico3">
3 R+ e. A) m/ m C0 m( V
{dede:arclist row='6'}
4 P4 f2 q' v+ V" p6 }6 T. ~7 F
<li><a href="[field:arcurl /]">[field:title /]</a></li>
& M6 h1 J- V+ z
{/dede:arclist}
5 V: b4 Z( J( D' G8 L6 w
</ul>
# K7 l) l6 N: G- e, S9 \
另外ico部分有3种ico可选择
3 ?( a* z1 ?9 K8 z
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
2 C: f# G# d7 o3 E9 V6 G
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
" ?; B1 y# S9 [' _3 u
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
6 J- n6 ^$ N0 W( M# }# k
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.
欢迎光临 航空论坛_航空翻译_民航英语翻译_飞行翻译 (http://bbs.aero.cn/)
Powered by Discuz! X2
7 H) W% F! b0 @/ q% a
8 f6 j7 W! ?6 u
0 g/ Y0 |( P# ?& L# n. G3 h
