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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
* Y; i# z  v5 g/ z2 R我们来详细介绍这六种列表样式的结构和class
7 z- T2 O( {' a% e9 F首页模板的<div class="listbox"></div>内是区块列表的调用
4 l% }  @6 S& R0 I% p" g<dl class="tbox">
# M; T( ~+ l7 G4 g( u<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">
{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}
" ?% P7 Q; ]: n</ul>
</dd>
7 @$ j2 D" u9 o# ]6 z</dl>
" V8 t8 u8 |) r* t" p. k& |2 {- L& ^其中<dd></dd>区域即为列表调用
' e# L' H5 @- @9 l  O只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

) v- U# W$ D2 u+ c纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)
* O1 l6 K. H8 |; N9 P' V" e" a. ]" @6 F
可以调用23个中文字符的长标题和短日期
6 q& Z$ A- V) A6 M<ul class="d1 ico3">
, E' T. V& \* a0 Y   {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}
" y9 k& ^7 o# a</ul>
) h* s& a) m/ A列表调用样式3 - 带日期的短标题列表(d2)
/ ?6 b+ _! I7 O0 F1 u
可以调用19个中文字符的长标题和短日期
, W3 J5 I; E& ?3 z<ul class="d2 ico3">
, m! i. g9 O* h  y; l   {dede:arclist row='8'}
" U; V9 O0 o/ w     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
7 \/ M! e7 o1 v   {/dede:arclist}
% `/ y  X; V& e- h. V5 F</ul>
, q* C6 V8 B+ k" o9 o列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
: R& {% W/ q. H<ul class="e5">
! `' U1 s2 I% \3 u* X     {dede:arclist row='2' type='image'}
+ q! V5 t2 c7 W% Q" R% L     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
1 `* {+ {& ?- W- @! v9 P, r     {/dede:arclist}
5 ]: ^/ U  @  r- O0 V4 W6 V9 h8 H</ul>
<ul class="c1 ico3">
* T8 A$ ~6 W4 h   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
* L0 B. X# @, w. N2 U列表调用样式5 - 图文混排列表2(e6,d2)
# l- R+ z0 L2 K5 ~, A
  ?2 U+ O) m6 {, C, U0 W+ \9 P) }上部调用图片,下部调用文字标题加长日期列表
! {) {, u9 q* P: V1 v' _% a<ul class="e6">
% H1 n0 J+ i; M: F" r     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
' d3 K) ?& z* Q! v7 ?! i; d     {/dede:arclist}
</ul>
<ul class="d2 ico3">
  Y, w- p% b8 R2 K   {dede:arclist row='3'}
: E+ ^. h! m, z! u- X6 X     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
" S' @8 q" W# C* T1 q& q6 s   {/dede:arclist}
</ul>
* P6 h, A4 T9 K! `& ]. p列表调用样式6 - 图文混排列表3(e6,c2)
: S+ b4 I3 S2 n8 p, U) o( a
5 ^) Z9 j& X# p上部调用图片,下部调用两列文字列表
<ul class="e6">
" D7 m+ v. x4 ?) e, M- ~. D' |     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c2 ico3">
& t2 G! Q( n1 ]6 b9 H; q   {dede:arclist row='6'}
, T" t2 E2 j7 [9 {2 {4 L     <li><a href="[field:arcurl /]">[field:title /]</a></li>
( z+ l* |3 T( T, C* N/ p* Z   {/dede:arclist}
# x) h# r$ X% C4 i% r' x</ul>
另外ico部分有3种ico可选择
0 ^+ \1 ^% K5 R1 V3 O5 @9 M6 c; l7 N分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
- V7 X" w8 I* A3 A另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.