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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
7 G4 E4 i; B- o6 @4 j# m" {您可以根据自己的实际需要修改使用
" g1 w7 r3 o! t, k  W" |  ]下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<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>
, A) F5 F* v% ], P* n) g<dd>
% U2 g) }. U7 V" R! x<ul class="d1 ico3">
# T0 m; i, ^5 J- [4 U{dede:arclist titlelen='60' row='8'}
" O, e/ r; O2 F' C$ f& p) r4 A# m<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
- X* ^2 ]# ]: s0 c4 p  J</ul>
! G% p+ \, X% P) r3 [5 B</dd>
/ T5 N& H% h8 M</dl>
( C% s! S$ d% ]1 o- Y4 i4 P其中<dd></dd>区域即为列表调用
% Z0 G1 q5 g, {只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
7 K- a0 @) W" {<ul class="c1 ico3">
   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
6 Y* U! I* h) j, |" O8 Z   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)
" ?/ ^! }8 t$ U5 E% ~! r: b
, r7 R0 y% O# {! u7 T6 g" p可以调用23个中文字符的长标题和短日期
& ~0 M. J8 q; t% M5 r( q8 y0 ?<ul class="d1 ico3">
! G+ c9 I0 O$ w5 k! K   {dede:arclist row='8'}
; Z* [0 a4 ^8 z4 ], I. Z- o* D     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
. x! b* {' {' N, R9 D% V  J: @   {/dede:arclist}
" x' |* x$ N) ^& [( u</ul>
; \2 ^! H0 f7 m, ~5 u/ T列表调用样式3 - 带日期的短标题列表(d2)
: \- a( R- O# ?6 M
可以调用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)
% X+ \2 \' r& |" Z1 Z2 m' k
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
0 |0 R) H9 t) ?     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
" [: h( f8 u6 L( h& b8 k     {/dede:arclist}
</ul>
<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

, l5 {# |! A. l% T- Q3 M; w上部调用图片,下部调用文字标题加长日期列表
% k& H5 S# v1 h% J  q3 u<ul class="e6">
' o5 Q3 e; [3 w; ~2 i7 f; p( Y     {dede:arclist row='3'   type='image'}
8 A! f, i- ?3 {" P     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
+ J; \" K! v7 z     {/dede:arclist}
</ul>
<ul class="d2 ico3">
   {dede:arclist row='3'}
. g. ]8 y2 G, w; o8 A     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
+ n+ B: D% n3 z  c( |2 u$ s7 [/ q   {/dede:arclist}
. x/ `, W( Z. O9 i+ }5 P  Z</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
) k4 A4 R7 R* f- j: b4 @3 ^
, L7 n1 A: |2 M4 S3 B, x上部调用图片,下部调用两列文字列表
4 d; q+ M; U- {, G# N. a<ul class="e6">
/ r5 K' h. _6 n* D, F3 X     {dede:arclist row='3'   type='image'}
4 D; i' ]; q0 D' b4 F' m& O2 d     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
6 L- ~7 I; O' K- K9 \     {/dede:arclist}
</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
8 a; b6 g4 q: D% h     <li><a href="[field:arcurl /]">[field:title /]</a></li>
" c+ `, p4 j' x5 ~5 i- z# A2 P1 w% f   {/dede:arclist}
</ul>
- k+ o0 H) u3 d另外ico部分有3种ico可选择
" X  j6 e) C4 Z- x分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
6 H5 B. F3 @- c这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.