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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
9 k( H. i% \4 \2 C. P下面以首页区块调用位置为例
8 }5 y9 H$ \' u4 h! `我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
1 M% I3 O* @! y  M% B7 ~$ F<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>
<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
" A3 Z: b- H/ ^4 Z<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
& l9 V4 z/ t" C</ul>
7 w( z' H6 }6 k& h8 R+ J: }# C5 w</dd>
- A5 L/ K; {5 M9 ^# p! ]</dl>
其中<dd></dd>区域即为列表调用
5 Z3 I7 \) o1 g  O5 H2 b( ~( P6 E只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
" h8 P" Z6 e* s8 U& b5 t列表调用样式1 - 纯文本列表(c1)
. p+ n" Z! d2 ~7 s" p- f
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
: a- _, ~* j  u, G* x8 o<ul class="c1 ico3">
   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
6 r% q* b! L! _6 d; L* C</ul>
列表调用样式2 - 带日期的长标题列表(d1)

可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
) M$ u8 x; a9 [% }     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)

7 B9 ~# Z0 F$ g0 E/ w可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
   {dede:arclist row='8'}
$ Y4 o4 j* l( U8 Y     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
0 H5 H' n+ j! {& }. {列表调用样式4 - 图文混排列表1(e5,c1)
+ o) R9 U, {  h7 C* b; q- ^+ S
/ X/ J! [- Q* n- i/ m1 C左侧调用图片,右侧调用文字标题列表
, W: S0 `, d% f3 \# `; z/ Q<ul class="e5">
     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
+ M: v0 v# T: x<ul class="c1 ico3">
   {dede:arclist row='6'}
9 W# F9 y$ d; P, _+ F4 J     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
3 k2 y0 a" l0 o/ v; z/ U</ul>
6 D2 X7 {. H+ f1 V1 W+ b列表调用样式5 - 图文混排列表2(e6,d2)
( R" C- ~8 [3 Y* U% S! v& X+ @# j1 P7 {
上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
- Q) x" W! P* B# I" A0 z     {dede:arclist row='3'   type='image'}
, `! v8 f& m. a9 P) i1 \' l" E2 I     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
6 f5 ~+ B* ~) V3 W$ `     {/dede:arclist}
</ul>
2 y) ^* L* j3 A<ul class="d2 ico3">
   {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>
) Y6 P" k. p) {   {/dede:arclist}
5 @8 h3 J& d! J</ul>
$ m: p& R( s8 w) |: w' i1 U5 m5 o; Z列表调用样式6 - 图文混排列表3(e6,c2)
) i0 n( t0 k. a/ H
上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
. J+ s4 b; ^0 u- R4 H' P! f6 ~) d) W     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
1 _  q. ^0 u, y1 D     {/dede:arclist}
' e7 i+ L5 c5 ?; w0 n</ul>
<ul class="c2 ico3">
. Q9 m0 O( |' v. s9 }' H+ ^$ R   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
. `/ K: g  c/ h" W: _: b7 X! K</ul>
另外ico部分有3种ico可选择
1 k8 v# F8 {2 f' R# @9 T- x2 G' _分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
1 t1 E! [/ N' B$ J+ }另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.