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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
4 r/ ^6 Y3 c# ], \0 k) y我们来详细介绍这六种列表样式的结构和class
5 E$ s0 d7 v/ A5 G首页模板的<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>
- k! s- |( k- Y7 ]  i7 x. z<dd>
<ul class="d1 ico3">
& L- Z7 [) {" U( R{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}
</ul>
</dd>
</dl>
其中<dd></dd>区域即为列表调用
1 E/ J; z( I- K% D% V8 ~) U只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
0 i9 u( E. b+ f2 [-------------------无聊的分隔线--------------------------------------------
3 l/ {; R- f% O" C+ a列表调用样式1 - 纯文本列表(c1)
7 ^% I& D0 ~' p# V' U  j  N+ K2 Q
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
0 H. e5 B2 R- r7 ^( {1 e   {dede:arclist row='8'}
3 {% x$ n+ y4 Q" O4 Y     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)

可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
! w2 v. v# ?" ?7 q/ R/ Y3 l     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
9 P* \0 Z/ L! o- q& `; J' e. K   {/dede:arclist}
6 \; A! `$ Y, W9 @+ Q# R; c8 u/ N' m</ul>
) G1 f% {: _: y! Q- K" R, q# g4 d列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
8 U. z$ E$ e, ]5 z) n   {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}
</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
+ Z& _/ u  H& T4 ?- y8 {* T# z  t. b5 O
左侧调用图片,右侧调用文字标题列表
' l; @+ J( R& z: L2 b0 a1 V( X<ul class="e5">
     {dede:arclist row='2' type='image'}
; @+ X% m% u6 J) T     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
9 t$ Q) y8 }2 m     {/dede:arclist}
</ul>
' ^# `/ Q( {" |. A2 z) X; R<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
' {# m3 n8 F' Y) J9 m3 k</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
: q! r- q+ ]# ~$ d+ q+ _+ S1 ~+ z
上部调用图片,下部调用文字标题加长日期列表
) @6 K2 z$ g# ^7 r$ ~, X<ul class="e6">
$ f+ H4 _8 J# a% f( P+ z$ N8 @- U" ?     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
0 X+ Y' }2 ^% N     {/dede:arclist}
</ul>
. \; j) H; F5 O<ul class="d2 ico3">
   {dede:arclist row='3'}
1 Q( P( @8 U" p: J! `     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
! v" ?6 ]$ ^9 J& [6 [+ C2 X   {/dede:arclist}
</ul>
. B0 x; _( H: Z  N+ \列表调用样式6 - 图文混排列表3(e6,c2)

5 b3 g' F4 M* T* o3 |) Q& A- l3 O上部调用图片,下部调用两列文字列表
<ul class="e6">
     {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">
) s+ |: w( h% w" k, a+ J" d2 {   {dede:arclist row='6'}
, Y% V7 Q2 ]- h% y# ?     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
$ P  W9 R- J3 C# G! d</ul>
5 }/ v- E* A2 h7 v& R0 @另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
# U; w' B& k& r0 b# b8 `% {3 `另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.