航空论坛_航空翻译_民航英语翻译_飞行翻译
标题:
DEDECMS V5.3 官方模板 6种列表样式说明
[打印本页]
作者:
帅哥
时间:
2009-8-29 10:44:53
标题:
DEDECMS V5.3 官方模板 6种列表样式说明
DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
4 E& r' E3 c# y
您可以根据自己的实际需要修改使用
2 c: m( H3 }6 e8 ?
下面以首页区块调用位置为例
( F* C4 { u4 z+ w3 x5 W" [
我们来详细介绍这六种列表样式的结构和class
/ r# R7 f2 u) g
首页模板的<div class="listbox"></div>内是区块列表的调用
J! ^( Y* b. ?
<dl class="tbox">
) N- u r$ z' q' Z+ J3 L8 m6 p2 Z) ]
<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>
% Z3 E3 J/ J* p, w
<dd>
* j2 [- `+ C: q$ i6 g) f
<ul class="d1 ico3">
& Q o I1 i( T
{dede:arclist titlelen='60' row='8'}
" h3 X* s% I/ k8 a0 R/ |2 `$ d
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
V# m9 _$ i+ e, ?# ^
{/dede:arclist}
( U" n+ F( z2 i2 C: p( w0 ^
</ul>
7 V; ~* o) A$ c4 A3 X, y/ G
</dd>
8 q8 y* e, z6 |# G) z2 x6 R/ g: t
</dl>
' f7 a4 P, Z! Q# I6 C
其中<dd></dd>区域即为列表调用
4 J" o' S. A8 A1 F! {6 Z
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
3 {+ J+ a; U K6 l/ n" W7 y+ l
-------------------无聊的分隔线--------------------------------------------
- P, |* {; B# w* z4 ~4 d2 K+ {
列表调用样式1 - 纯文本列表(c1)
: @4 f# `1 o3 O7 r& `6 S$ _
0 L5 i4 s1 @, j% {, c+ \
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
/ O6 @0 O- c6 T( \
<ul class="c1 ico3">
/ n& t2 H3 N' V) u& i$ {
{dede:arclist row='8'}
+ }6 ^! m1 G" M' |
<li><a href="[field:arcurl /]">[field:title /]</a></li>
4 ^4 m O& j& F' I7 m
{/dede:arclist}
, b2 ~6 N) Y" ?# R
</ul>
0 K! q4 Z- n9 X/ [* H
列表调用样式2 - 带日期的长标题列表(d1)
" w7 @7 j+ j O* O. y
# I$ L/ d7 n: {1 | b; f' h
可以调用23个中文字符的长标题和短日期
! B+ y/ y1 G* ^
<ul class="d1 ico3">
8 G- Q3 W6 l3 _
{dede:arclist row='8'}
8 _! G5 N4 j; Y
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
- W$ p7 c l+ c7 C- P3 ^2 T
{/dede:arclist}
# [# o( N, {: ^) l# y( J6 D, p# ^
</ul>
) p& q$ v1 z: f2 Q& g* W( w2 I
列表调用样式3 - 带日期的短标题列表(d2)
2 J2 u. L! c- z% @5 w
5 Z2 p ^8 K* g
可以调用19个中文字符的长标题和短日期
( s$ z) Z \ X: q5 s8 n
<ul class="d2 ico3">
+ w! k1 C( u" \6 |! _% S
{dede:arclist row='8'}
' V& _7 p& b; j- j' I2 w. {, M. u
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
$ @: `: l( i) v9 C j
{/dede:arclist}
* g( [2 E( b3 s! V
</ul>
! k# r+ Q) l/ X- M' W
列表调用样式4 - 图文混排列表1(e5,c1)
& n5 E$ x! x3 {$ R/ J3 p# i
& Y$ ?" y0 b$ v' d$ ~; F/ _
左侧调用图片,右侧调用文字标题列表
; h- J# w" G, y( W: ?! G9 a' K. L
<ul class="e5">
( L( g. C$ a7 m) i ~
{dede:arclist row='2' type='image'}
; C2 |9 ]0 E' h. {
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
# P: g8 G. y+ I5 z: E" s% a
{/dede:arclist}
! X6 @. a) o, ^$ K$ N% a
</ul>
5 T( X3 [/ L3 X1 u8 V! j7 D( c
<ul class="c1 ico3">
$ G8 z5 y! [- i7 n0 Y
{dede:arclist row='6'}
6 P% T9 W9 p; G/ z) B: }( H
<li><a href="[field:arcurl /]">[field:title /]</a></li>
) E5 S5 ?2 x' z* y# T
{/dede:arclist}
* D- R- T" s X+ x
</ul>
6 x1 N( Q Z' o/ v4 `
列表调用样式5 - 图文混排列表2(e6,d2)
2 M% z9 i L; M: ^. d: V+ d, y8 ?
& ], L. C- f& x7 ?
上部调用图片,下部调用文字标题加长日期列表
8 V8 p) k! b2 ]5 K2 p
<ul class="e6">
- f2 ~# v3 W3 v' b. U
{dede:arclist row='3' type='image'}
5 V& R- r5 E B- g% K
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
c/ s5 i/ o' L# X/ g [
{/dede:arclist}
6 t2 K. Y x# S2 k; k9 x
</ul>
+ f' D( c4 m2 K" L6 N% R
<ul class="d2 ico3">
6 B3 r- a3 Z* l' \! y
{dede:arclist row='3'}
" x2 Q' `8 L+ X, d! u
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
* Q- I" V& B: S) Q2 ~6 ]; ?4 f% |
{/dede:arclist}
* r u# B2 Q7 C5 @$ S" s( w
</ul>
8 g( p _# c( g
列表调用样式6 - 图文混排列表3(e6,c2)
6 `) U4 ~! o( Q( f
1 S! H# ]( _; Y# f: y5 b
上部调用图片,下部调用两列文字列表
* t7 b/ E" D, |( ?3 m
<ul class="e6">
3 c# [) V! ~" T$ E J* k: K
{dede:arclist row='3' type='image'}
) [( f3 i/ d) t0 N* O* D; K
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
& Y- w! n* Y% Q# r8 _& ^
{/dede:arclist}
2 B( V6 j! T- [# ~0 ]
</ul>
. o F0 a# v. v$ u4 a
<ul class="c2 ico3">
; w9 T$ ]& a+ o% B- Q4 g
{dede:arclist row='6'}
% n" B$ M1 B' B; w: I
<li><a href="[field:arcurl /]">[field:title /]</a></li>
1 d' ~4 o9 S$ r; n% f9 F: M
{/dede:arclist}
+ ~2 ?( b$ z2 G. z) v
</ul>
7 U' p# c2 t8 G& M9 ~
另外ico部分有3种ico可选择
! O, K( N+ B, A: F: W$ G# B
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
! c9 Z4 j" E8 \) l1 g( @% |
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
; q) d* G( {5 m5 _. c) q9 K
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
) x/ f, I. c1 r6 m$ q+ t9 J
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.
欢迎光临 航空论坛_航空翻译_民航英语翻译_飞行翻译 (http://bbs.aero.cn/)
Powered by Discuz! X2
0 L5 i4 s1 @, j% {, c+ \
5 Z2 p ^8 K* g
1 S! H# ]( _; Y# f: y5 b