DEDECMS V5.3 官方模板 6种列表样式说明

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
) q" d. p* \: f: {您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
: v2 G6 L+ n) L( g首页模板的<div class="listbox"></div>内是区块列表的调用
# V# ~7 u8 O- N<dl class="tbox">
<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>
& S. C, ?& ^4 \; v: O8 S' y<dd>
0 c; b8 q  U. j' @" w% ~! D+ [<ul class="d1 ico3">
2 e2 U! a( a8 x9 q: ?) x1 l{dede:arclist titlelen='60' row='8'}
# F1 g8 a, H/ U8 X<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
" _6 o, P; ?. Q3 [. p0 b{/dede:arclist}
</ul>
+ I' e! T7 M+ k! H! \. e! O5 l7 \</dd>
8 \! y: F& C* Q; @. i</dl>
1 K' y$ P2 f/ d2 i其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
( \* i% z, [) e* c: ~7 w-------------------无聊的分隔线--------------------------------------------
$ o9 {1 ?: U# A* g列表调用样式1 - 纯文本列表(c1)
5 \0 E( p( M# P" k4 Q1 K: F
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
9 D+ K) s  w% p3 ^1 S   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
/ o8 h1 g3 z" {( A. \   {/dede:arclist}
</ul>
* R0 a  R; [/ _1 B: p" ~1 Y* |5 ~列表调用样式2 - 带日期的长标题列表(d1)
$ ~& k5 h4 H# r/ t& `0 D* R
0 p6 L9 w. v& U5 x3 _8 A可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
9 D8 s2 ^1 T; @- ]     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
0 j! g* x6 C* {2 \0 a列表调用样式3 - 带日期的短标题列表(d2)
- j2 ~% o9 ^  f
可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
; s8 {& H( S9 t/ C5 N* ]- Q   {dede:arclist row='8'}
$ e3 ^, R, T1 Z     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
* b% c+ O6 r' v   {/dede:arclist}
</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
; G! G  K4 X* v( h$ e4 o2 p<ul class="e5">
8 p1 X# ?" r! C) z' N& b" b     {dede:arclist row='2' type='image'}
( [: o* D' c: I9 F) S7 r     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
0 v5 Y, E) F4 y! `6 `8 L     {/dede:arclist}
</ul>
<ul class="c1 ico3">
6 V, c1 e5 j7 s! L2 c- Z4 M   {dede:arclist row='6'}
. M$ n; J; @8 m     <li><a href="[field:arcurl /]">[field:title /]</a></li>
1 \- [2 ~. L' ~. z" Z8 I' N6 O6 v   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
' u; b0 O* U- Q  E; n/ m6 `
上部调用图片,下部调用文字标题加长日期列表
- b1 u' _8 p6 p8 U<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
2 ^0 d1 _% N6 A2 m# i, Q. l     {/dede:arclist}
9 O& H" [) o1 d  h. m& p! b2 `% N) B</ul>
, c* a# ^8 U& p3 u9 a<ul class="d2 ico3">
   {dede:arclist row='3'}
8 @' s1 m  M( t; `. D/ r     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
$ }0 V* @, ?6 j* O  e+ y   {/dede:arclist}
& b% X  X! t( B* l+ Q6 `% P</ul>
4 l1 N% T9 D) f; V' E% P6 H% u列表调用样式6 - 图文混排列表3(e6,c2)

* T' h4 `, U% h) x5 C, s# P上部调用图片,下部调用两列文字列表
, B4 Q3 R; O0 S  g; _* x: ^<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
' V8 M8 U: m( O     {/dede:arclist}
</ul>
8 G, P+ s& y$ f4 A8 X) u- v<ul class="c2 ico3">
) s& Z( v3 i( c& O0 Q   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
( w# Q9 H# }  {   {/dede:arclist}
, I$ c: e% p2 f</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
3 f5 T# \4 d; ^: p2 G4 X这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
1 d4 l/ b* v$ G' ~2 e# j. c- }另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.