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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
6 ?: p+ _2 q& ~! O下面以首页区块调用位置为例
0 Q$ y" K6 s! I! N* h0 x我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
/ @* J" I$ F; e0 F+ L! Q  Q2 f7 Q' S<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>
7 t4 E! N! e- k+ J<dd>
<ul class="d1 ico3">
5 I& i& M" c! |, w* V' 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}
' ~0 g$ \$ L4 Y" y; `</ul>
8 y' n! B# u& B' g9 d% s- h& P</dd>
0 r. O" t) m9 Q" x7 l0 a" }</dl>
! T& ~' Z1 _, C1 S/ d9 w1 T其中<dd></dd>区域即为列表调用
% D/ N+ R0 O4 ]% @4 P只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
. W' l  v+ g1 N<ul class="c1 ico3">
   {dede:arclist row='8'}
9 Y3 y4 Z# n/ u     <li><a href="[field:arcurl /]">[field:title /]</a></li>
: u" x+ c) F- z" u9 L- y   {/dede:arclist}
</ul>
* a7 P) C' g6 W- u列表调用样式2 - 带日期的长标题列表(d1)

) O* W* Q5 B- |+ ^9 ^可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
# d" ?, }3 p7 `5 z$ Y" y* ^3 q* v   {dede:arclist row='8'}
. o" b+ E% Q4 h( f' Y& j) i     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
, q( _7 G8 G( {: d6 x   {/dede:arclist}
  X$ [/ d2 u- G) ?  B: \( J  h</ul>
列表调用样式3 - 带日期的短标题列表(d2)

5 U3 L- a3 ^% v4 ]9 ^+ E$ m可以调用19个中文字符的长标题和短日期
4 Y- c  W% [8 ?& Z<ul class="d2 ico3">
   {dede:arclist row='8'}
' v! ]# s( G& N- y% [  j     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
$ w7 d( Z/ G7 A' u  Z列表调用样式4 - 图文混排列表1(e5,c1)
4 j  W4 `3 X) @0 L
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
; t$ U/ s% W! j  B. o; k     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
% v) Y; p- x7 J# f1 Z+ x) y     {/dede:arclist}
  l5 d" K' P7 ~+ w) M0 ]</ul>
, a* Z5 [2 e% e) S9 \( m0 Z% R2 P. ?<ul class="c1 ico3">
   {dede:arclist row='6'}
# P9 m3 n( V  J3 J# w, t     <li><a href="[field:arcurl /]">[field:title /]</a></li>
1 c" S0 ~5 m; I$ ~' J% {1 t   {/dede:arclist}
. E2 U) L! `( x</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

5 P% l) I, O+ \8 e3 M上部调用图片,下部调用文字标题加长日期列表
2 h- Q0 J$ C; L: h<ul class="e6">
' a# @2 i* `) E# G     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
9 @3 `& F: L2 P6 T+ B- W" i<ul class="d2 ico3">
( s  v5 G% U$ ^; \# D   {dede:arclist row='3'}
4 |, E. l- p' C     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
4 R! t$ p. g) z4 C" m( Q0 \& D   {/dede:arclist}
5 B/ o% t/ |( j! ]7 A9 t/ ^</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

: ^) Z' A3 i1 j! J" R上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
' i: @8 F1 Y; T     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
/ a9 d3 m7 Z8 A+ m     {/dede:arclist}
</ul>
% K' q0 [7 a# i<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
8 O# H! J+ ^7 u7 E   {/dede:arclist}
</ul>
, `2 G) D" `+ }8 W% W' M' q另外ico部分有3种ico可选择
' a, C0 K4 d+ o6 B' O1 m4 Q分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
4 ~( l& T8 A$ P/ z- G2 j$ N这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
. D5 [+ S- a, J! a/ f- d0 _2 ?另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.