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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
5 a, s! B- i) N$ L) {% ]/ u您可以根据自己的实际需要修改使用
6 C& U3 j3 r* x; t/ V# H0 @下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
' R: s/ k2 ]3 X<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>
- s# Q+ \0 s# [$ b" D7 h<dd>
" q# `: Q' D3 I<ul class="d1 ico3">
! B6 R+ H' K6 v$ F& M* j; }& K{dede:arclist titlelen='60' row='8'}
/ {0 C1 u. A& J% }<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
" D! n! a  V: j' l: [</ul>
9 i- {  T2 H" E0 O3 O</dd>
3 x5 D! O$ o1 I5 W2 y! K</dl>
其中<dd></dd>区域即为列表调用
2 }: _, r  B" `只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
3 o4 a& h& n$ i! ^5 V% L- n<ul class="c1 ico3">
! `1 v7 H7 J/ m8 [0 [7 W  ~5 D5 {   {dede:arclist row='8'}
6 R$ n1 R) C$ H: G. S' N& p     <li><a href="[field:arcurl /]">[field:title /]</a></li>
0 ]: D9 y0 o6 S6 ~, P1 Y   {/dede:arclist}
8 {' R9 t/ N! A</ul>
& ~; c9 U6 `4 n% A' m列表调用样式2 - 带日期的长标题列表(d1)
5 E2 w. J" L3 C, a  d2 V
) y# f/ a+ ^4 ~7 s8 F* B! ]可以调用23个中文字符的长标题和短日期
7 a, b2 N& M8 q+ Q" h) W<ul class="d1 ico3">
   {dede:arclist row='8'}
4 A+ e- Y6 ~8 p6 J7 m, {0 A     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
0 C( f, V/ q  [   {/dede:arclist}
! t. U& F/ J8 {</ul>
& e( T- g0 o3 j# u列表调用样式3 - 带日期的短标题列表(d2)
; J' e3 s, T0 E- k- m
可以调用19个中文字符的长标题和短日期
, a# G7 ^0 r( ^: q<ul class="d2 ico3">
% J3 c+ x: ^1 _2 v/ n: B   {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}
) T8 @" u# Z2 x' R8 ^/ ~& n</ul>
2 M, r" I6 }8 v列表调用样式4 - 图文混排列表1(e5,c1)
' _8 z: }3 ?: ?1 H
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
- V0 `  N0 y: L$ U! }     {/dede:arclist}
</ul>
<ul class="c1 ico3">
, G- O9 h( D2 K! X   {dede:arclist row='6'}
2 h  _9 D$ C& d/ c9 t, f8 c     <li><a href="[field:arcurl /]">[field:title /]</a></li>
! v- l( }: {) @   {/dede:arclist}
</ul>
" j5 k, T) S5 ~/ q! a5 O0 w5 t. B列表调用样式5 - 图文混排列表2(e6,d2)
) e8 r+ j) Z3 q/ N) T! `7 Y. \$ @; }
) ^& @9 v) F; _$ h; b上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
* Z% R: x, b0 A; a. _$ d# N+ e     {/dede:arclist}
0 t! G; K3 m$ g( Z</ul>
<ul class="d2 ico3">
9 `1 a0 T, l# \6 g   {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>
, i6 {$ [. h6 P0 q4 E. a# c   {/dede:arclist}
  n5 X/ [! G) j5 G  n% a! o6 B</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

上部调用图片,下部调用两列文字列表
" A& j( L) P- w" G/ K<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">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
% u6 m1 @% u/ I  d$ T   {/dede:arclist}
8 |, a! X1 h9 Q4 S7 W4 Z! N6 ~</ul>
另外ico部分有3种ico可选择
1 o7 [! z0 `. k* l分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
' m0 N1 {3 m% Z) C3 P这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
& `0 S8 r4 t- `另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.