航空论坛_航空翻译_民航英语翻译_飞行翻译
标题:
DEDECMS V5.3 官方模板 6种列表样式说明
[打印本页]
作者:
帅哥
时间:
2009-8-29 10:44:53
标题:
DEDECMS V5.3 官方模板 6种列表样式说明
DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
z( v- _& a1 t! q4 u' `
您可以根据自己的实际需要修改使用
" j: f ]$ B4 b% r& n6 `) O; Q
下面以首页区块调用位置为例
4 Y9 T- `1 n) R+ Z9 x
我们来详细介绍这六种列表样式的结构和class
& y& ~+ T( d( @) l+ B; X7 u4 X
首页模板的<div class="listbox"></div>内是区块列表的调用
& d: Y% c- M/ [' K1 s
<dl class="tbox">
- O' C5 |) f9 l: t! R; d: E
<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 I' s( |# L4 A5 J% Y
<dd>
9 o6 `8 p: B& x" E
<ul class="d1 ico3">
9 B" ]: v+ v# M6 Z5 @- l5 f9 ?
{dede:arclist titlelen='60' row='8'}
1 [1 x: Z* l. \; C8 v- Q# O+ ^9 l
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
, u3 \2 e/ g4 \9 { ~5 X# H
{/dede:arclist}
5 O$ i- \$ d& m8 X
</ul>
4 b @5 m* \ F" c8 j9 K
</dd>
% z9 N/ X& Y. u* T, M2 z
</dl>
, f: ?5 [+ I' S. K: A# r' p8 `' X& J
其中<dd></dd>区域即为列表调用
5 }2 M+ N1 Z, U+ Y
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
8 b8 d6 E4 a5 k4 ]0 O1 v
-------------------无聊的分隔线--------------------------------------------
: w; I) a# k4 ~- q* Y' I) h/ Z
列表调用样式1 - 纯文本列表(c1)
% K/ K) m' {9 u5 z# s
+ l8 A- c8 `# x! `9 [- F
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
0 t: m& I( S9 I
<ul class="c1 ico3">
) Z1 j9 Y# ~0 m# `3 \: `
{dede:arclist row='8'}
( z0 `# j& [% [$ P) i
<li><a href="[field:arcurl /]">[field:title /]</a></li>
# _' D3 B+ z. I$ @, n
{/dede:arclist}
0 I! \: ~, b% [' Y9 o1 Q
</ul>
! D' G+ N8 ^. j k# i
列表调用样式2 - 带日期的长标题列表(d1)
. u9 g/ c- Q' A$ W
1 u7 S2 z) o% A# T7 ^
可以调用23个中文字符的长标题和短日期
$ G5 K) o2 O) i
<ul class="d1 ico3">
) l9 R- R# {+ S0 j9 [5 h
{dede:arclist row='8'}
) _& i# W8 @4 c' F9 x: ~6 e
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
6 T, y2 Q& q2 a. L( q6 i: Z
{/dede:arclist}
! ]; b, h# R' z, |+ q" p! A
</ul>
' l: K% e3 Z" F2 K
列表调用样式3 - 带日期的短标题列表(d2)
U& K0 a' C8 X2 x
; p/ W! k9 ]6 E+ G7 T) q; @$ d
可以调用19个中文字符的长标题和短日期
8 x0 @. ^3 W# R1 K' [+ e* N
<ul class="d2 ico3">
( i( i8 F. x# B; w! O, I/ _1 f
{dede:arclist row='8'}
; Z7 e' |3 V( q$ z* }+ M4 H
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
7 p* I1 i; J) R& N
{/dede:arclist}
, G/ C6 f w% N ^7 H ?
</ul>
# K+ i9 E4 O0 e5 z3 n# r
列表调用样式4 - 图文混排列表1(e5,c1)
0 f! l' j' T) w
5 ?2 K% k; e0 G% `1 S, s* ~: H
左侧调用图片,右侧调用文字标题列表
+ v- C' [/ [/ `5 O' o. ?' V
<ul class="e5">
! G" g* x( R$ z6 N9 p
{dede:arclist row='2' type='image'}
& G" F$ o7 y3 k9 M' t* X8 R
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
7 B( c" A% {. ~7 f5 G4 l
{/dede:arclist}
. O. O2 g$ m5 V& I" m1 T
</ul>
5 g6 R5 u3 ?" u) a0 P; V1 |( Q# K
<ul class="c1 ico3">
$ {6 p$ h$ w! G: m* U m0 |( o
{dede:arclist row='6'}
+ E) d1 J: x! w2 ?4 j6 c
<li><a href="[field:arcurl /]">[field:title /]</a></li>
2 N, F- c1 f7 e
{/dede:arclist}
" @& }5 E! [" a) b
</ul>
: Q9 P# B+ z9 g% z0 e" t( ~
列表调用样式5 - 图文混排列表2(e6,d2)
) Y; q7 D# e" z, x# u
* E8 b0 \3 A0 g' Y0 q" g" d
上部调用图片,下部调用文字标题加长日期列表
3 b0 J# X6 C' f$ o' k; I. O6 T, f
<ul class="e6">
" |2 E2 ~ x5 P6 e
{dede:arclist row='3' type='image'}
! z! K7 U$ j- \3 {- I
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
( {5 a8 p' X$ q7 W& i- J. j m
{/dede:arclist}
$ V" h i' K/ }8 k$ W
</ul>
: W: s* A7 c3 _! i
<ul class="d2 ico3">
3 S, [, d- d# D* `5 A
{dede:arclist row='3'}
& p' R" i3 E. @. Y. d9 \
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
. o8 O' U3 g$ K/ c5 s
{/dede:arclist}
. ?) ?* q8 W/ v& l0 x/ [3 a
</ul>
- r$ ^; D6 K1 K- P: i6 s" d
列表调用样式6 - 图文混排列表3(e6,c2)
4 g6 J' _2 W- g8 [0 ?4 W1 f
) `1 Z9 o; P$ X4 W
上部调用图片,下部调用两列文字列表
+ [8 p& o' V5 K4 T
<ul class="e6">
4 @/ Q5 z/ g, L* l: i7 M# C
{dede:arclist row='3' type='image'}
, z: F1 L6 M& |/ j
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
+ J7 t5 \1 Z6 L
{/dede:arclist}
: T9 A7 W# S0 q/ @% M4 \
</ul>
, l; Q# g' a f9 X1 D
<ul class="c2 ico3">
6 b; L) _8 J& L; Z
{dede:arclist row='6'}
& B2 w! W. l& W# f" S" e9 Z
<li><a href="[field:arcurl /]">[field:title /]</a></li>
' n3 c, e4 E; y4 h+ ~3 v& F
{/dede:arclist}
2 k7 ~5 U+ D, H
</ul>
! _- c8 ]5 d, R( [& L6 n Q
另外ico部分有3种ico可选择
a! C4 U% t4 @* E
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
0 A* |5 C. [. E* |9 v) N
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
6 @4 ]0 r0 S% v3 K) f% s
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
/ p- N8 D5 U* i* ]+ D, R6 Q7 U9 I. f
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.
欢迎光临 航空论坛_航空翻译_民航英语翻译_飞行翻译 (http://bbs.aero.cn/)
Powered by Discuz! X2
1 u7 S2 z) o% A# T7 ^
5 ?2 K% k; e0 G% `1 S, s* ~: H
