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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
& E" P' t. y4 A% s: o5 {, T4 y" p# h我们来详细介绍这六种列表样式的结构和class
3 j; a  G! r1 ^8 l5 q2 z" w首页模板的<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>
, m: j: J; M' e$ ?" J% D$ o! g( W<ul class="d1 ico3">
/ g* u( L- O6 P- }& ?{dede:arclist titlelen='60' row='8'}
5 Z) ~: A7 t6 B<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
# s% P, [# `! A+ ]</ul>
$ ~7 _- i! M0 y) K4 w</dd>
</dl>
, Y1 w* U9 {8 i- O3 |, f1 a其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

. c7 V2 N5 E3 r& j纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
. O: D" J9 n1 a, }  {. I; q<ul class="c1 ico3">
: [; i9 K& A: a1 ^  n# P6 R   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
$ }9 }" r; Y1 Q</ul>
9 S" v9 Z. {  e9 p5 x# v9 U8 \1 x) ~列表调用样式2 - 带日期的长标题列表(d1)

# I8 p  |: H4 A( v7 I! z可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
3 `3 t5 S2 d1 V( b   {dede:arclist row='8'}
2 |0 s% a& Y, ?! I     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
. V$ j( ~% M' y5 W4 L   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)

5 F& F1 i9 X/ @5 ^  p. x可以调用19个中文字符的长标题和短日期
. b3 N1 P6 m/ d9 k3 B8 _<ul class="d2 ico3">
   {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}
% }8 @$ i& }2 F7 O" c</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
3 `6 x7 p  Q9 [: w" p<ul class="e5">
1 _$ t( t* K9 T- G     {dede:arclist row='2' type='image'}
% [% a5 w! w# n, s     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
* c6 V2 Z) p/ H9 A     {/dede:arclist}
</ul>
( w$ m1 i  W: h* z; Q3 _. _/ k<ul class="c1 ico3">
/ G  C0 b; C/ m3 i/ b& L8 \0 n0 W. S# M   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

0 {- h; h  A0 G* m% M' @上部调用图片,下部调用文字标题加长日期列表
; Z$ T5 ^3 q: q2 x# Z2 M& X" S' @: B<ul class="e6">
6 c- Q2 M$ j7 x7 _3 F     {dede:arclist row='3'   type='image'}
: b6 P' F4 w9 U" M- e: A% x4 @! `9 b     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
$ Q- E( J$ w; I# \     {/dede:arclist}
</ul>
<ul class="d2 ico3">
% ^6 ]  G9 I3 i7 t   {dede:arclist row='3'}
2 d8 D8 `$ \: _' P     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
: t4 ^/ c5 {% R4 e9 a   {/dede:arclist}
</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
, }% x" e# v# t& p; w
- Y( _2 [/ r7 |9 y  ^; w5 I4 j9 l上部调用图片,下部调用两列文字列表
4 b( y" Y; a& E1 C<ul class="e6">
+ u* d0 _6 A3 Q8 K& n' V% j     {dede:arclist row='3'   type='image'}
9 X% p! L" _4 h& S6 T9 @     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
) K, t* C4 A4 y- f</ul>
, N' A8 c  A8 h8 |! Q, v& s<ul class="c2 ico3">
& o  s6 T5 B# l   {dede:arclist row='6'}
1 V- {* p9 B0 k8 q0 L     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
3 ]/ _+ m5 x. x4 x+ I$ W' p</ul>
另外ico部分有3种ico可选择
& j7 h- K  c' z4 \6 M3 C* k分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
4 g& Y2 w' j: y您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
! u, h( a. m! h' l/ C另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.