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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
0 N. u3 I( j/ ~) ]# a+ N* ?您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
6 K2 ]! p, G& p& L6 ^我们来详细介绍这六种列表样式的结构和class
0 Z9 {  H5 l: Z+ D6 ^首页模板的<div class="listbox"></div>内是区块列表的调用
<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>
<dd>
<ul class="d1 ico3">
$ K: R0 i# C' A0 x- J/ S# N{dede:arclist titlelen='60' row='8'}
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
, {' {) ?4 V$ p) Y</ul>
& S( `0 F3 ~1 o. E0 T* p# w! Y" d</dd>
</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
( p0 u* ?9 z* x9 K列表调用样式1 - 纯文本列表(c1)
- h, P% Y7 n$ ~/ u: b
  d. |- l: K5 A纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
7 ^: h: B" B; H' S<ul class="c1 ico3">
   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
1 T' f4 u. H" g" U   {/dede:arclist}
</ul>
* i6 G  w. V, K: A2 ~列表调用样式2 - 带日期的长标题列表(d1)
- B# J& [- C% ^$ _9 K8 @9 E( ]6 o
# K* I/ @0 ?7 v% k% f' h1 J1 q可以调用23个中文字符的长标题和短日期
& }" B. N% v& g/ c, h<ul class="d1 ico3">
7 ~) D! i6 L; v* X0 `   {dede:arclist row='8'}
     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
) ?  U# Z) \' U( z0 O, t. w* p</ul>
  s# M! B& ^; ^  e7 x列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
4 ]4 B* V' n' M' p. O- A9 _4 o   {dede:arclist row='8'}
     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
  {  q# f1 i) T8 _$ v</ul>
5 k# @2 j( W$ q3 {  V列表调用样式4 - 图文混排列表1(e5,c1)

. C9 L+ l8 f& T3 h, h. f& q) r左侧调用图片,右侧调用文字标题列表
) i4 ?1 U# q" G<ul class="e5">
$ m; f. D9 h0 T7 F% W* @  \4 t     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
: y1 Y, s( o) W% {/ Q( H2 ~$ d     {/dede:arclist}
</ul>
& O; _$ ^2 a: a0 ]- o. I<ul class="c1 ico3">
- W/ O& E9 i3 Z, J4 t" p# p   {dede:arclist row='6'}
0 S/ C+ i2 i+ l* A4 g' d     <li><a href="[field:arcurl /]">[field:title /]</a></li>
: Z, a, J' a2 {0 j6 d+ P   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
% R% R9 d  g: c8 R4 H" O" T* U5 x     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
- [$ Y+ l6 _6 @/ E( k! k, o     {/dede:arclist}
& K8 X0 k6 d0 x8 @$ s9 k</ul>
<ul class="d2 ico3">
& l. p4 F; |4 t4 b   {dede:arclist row='3'}
     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
# Q" v" w% s) z8 ~, |7 T6 F   {/dede:arclist}
</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
! ]# \) x5 F0 B  @9 P
上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
! {- T% l6 q4 z! o$ y' G' _     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c2 ico3">
$ J. o- o; E6 \- E   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
& ]" S* ?& x6 w   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
# S: B2 G- S& W6 I0 D+ x+ ]分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
4 I: Q+ R7 P; `4 k; X1 D您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
$ W$ t, G) }0 m. n9 z另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.