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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
" p# |, P  W1 t) M7 h, t' N- h我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
- W8 q2 _- P6 s# S2 z  z6 U<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>
; J6 {  o' }+ A( M! l' Q<ul class="d1 ico3">
3 z8 M* w% D/ \7 I% W/ f, ^  J$ F{dede:arclist titlelen='60' row='8'}
* y/ n6 _: k: x- D; C<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>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
' n3 J3 Z, j- M9 d! X. ~& r
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
9 ^0 J! [5 D, U% }5 L/ i' X% l+ q. }   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
" K/ @( C6 B( Y2 m列表调用样式2 - 带日期的长标题列表(d1)

+ b" ?1 |$ g9 Q& M# i: u可以调用23个中文字符的长标题和短日期
9 M& _5 o9 c5 D7 t& o" f% r<ul class="d1 ico3">
4 H; D9 {+ e' e) `   {dede:arclist row='8'}
  [9 H# G1 G) P$ u8 z     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
3 i8 y( x) Y1 W7 e' `   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)

0 p! U1 ^& x% b8 V/ n& t可以调用19个中文字符的长标题和短日期
<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}
</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
% R9 q. j+ A: R0 S( j. g: i
& u/ k2 ]8 l* o/ ?" \8 q! ?左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
( o9 e# \/ X8 R# F2 W7 n     {/dede:arclist}
</ul>
, l& v( j' F, q+ T# j<ul class="c1 ico3">
0 n6 m% q/ M$ |# v   {dede:arclist row='6'}
6 `5 c4 u/ a- {5 Z9 z- o) e2 v, }     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
4 h8 V. Q9 t1 O$ L( G# h. N+ I* a1 s</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
8 h- C5 J& I! V0 \! A5 f<ul class="e6">
* A% q, g" Z, a/ S     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
7 H8 s- f% I- U3 z4 x( q<ul class="d2 ico3">
. v& o, ~7 W: k3 s/ d" C. V   {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>
8 D1 c: {3 n. X. W" P! @   {/dede:arclist}
" ]. E6 m* h* t</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
3 H2 n1 n; N- c8 m* P/ Y     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
2 l! C& h- c6 X     {/dede:arclist}
</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
. N! G2 S  G- {4 K3 @. @" T     <li><a href="[field:arcurl /]">[field:title /]</a></li>
  N9 h- f! t" z6 j6 P4 @   {/dede:arclist}
+ K3 t% G9 F6 S7 J</ul>
$ s! ]$ J5 W/ Z另外ico部分有3种ico可选择
8 s# O- [9 r+ V- E2 m% S分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.