- 注册时间
- 2008-9-13
- 最后登录
- 1970-1-1
- 在线时间
- 0 小时
- 阅读权限
- 200
- 积分
- 0
- 帖子
- 24482
- 精华
- 4
- UID
- 9
  
|
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中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究. |
|