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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
4 Z* Y, W9 P. ~' b; J" f5 ?$ h您可以根据自己的实际需要修改使用
! F" G- F: H# s0 S3 v) P下面以首页区块调用位置为例
  g( D+ M3 N/ x2 u8 u2 }  E我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
1 @0 A2 x: a4 d' Q7 q. F' d$ z<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% `- u3 O<dd>
<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
8 Q: E% k3 C% q) P) q<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
+ l% S8 ]$ p/ \! [5 u{/dede:arclist}
</ul>
) h& a/ g/ U8 i) |. |. H; L</dd>
; B! b7 F0 _/ {8 o$ d& d$ W</dl>
, y5 Y: i' E$ m% b其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
, x- _# G1 B/ A( M1 \" S" m列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
% x9 f* r  m5 F2 C( w0 H( o5 E+ v     <li><a href="[field:arcurl /]">[field:title /]</a></li>
$ _2 F1 V- m- ]; w+ d% z3 k! ?   {/dede:arclist}
& L! Z% H0 X0 H7 c7 B: d1 H</ul>
5 i9 d% H% C, M6 A列表调用样式2 - 带日期的长标题列表(d1)

可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
2 f2 a! `3 Y: _! D3 j     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
5 O- d0 F. M6 b% J. {5 w+ j</ul>
列表调用样式3 - 带日期的短标题列表(d2)
7 P* U4 [2 B! V  T* l% Q( g& R
可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
   {dede:arclist row='8'}
* N8 @! l- _* i1 [/ M     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
! W$ C8 i: n* }: M: X' L</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
0 n3 k4 `/ K4 K- `5 j: B<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}
# Q5 c. }! |) f% B4 H</ul>
, i! `, s2 e( c" Y6 L<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

2 z# _8 D+ L7 m2 L0 Y( C. Y! j上部调用图片,下部调用文字标题加长日期列表
* J0 p$ `6 j& c9 S2 V1 J7 ~7 n<ul class="e6">
     {dede:arclist row='3'   type='image'}
; e$ E# {3 x4 o7 Q5 }     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
: T- N! m, G$ J9 H</ul>
" ?- |# U$ W/ _<ul class="d2 ico3">
   {dede:arclist row='3'}
- }0 H8 A, {* L     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
1 e# ^. l4 C( ^9 e4 g! U8 t7 X   {/dede:arclist}
. I0 n* n+ b& s' N% s4 g8 ~</ul>
# ^1 R& A9 G0 ?; B6 F5 Y列表调用样式6 - 图文混排列表3(e6,c2)
! s" a$ u$ ^' R" f
上部调用图片,下部调用两列文字列表
( h  x9 Q% c% c<ul class="e6">
3 }6 l: h  i% w6 t$ F+ t4 g     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
- q' K$ d3 j/ V- Z     {/dede:arclist}
/ J2 m  y. }0 B* T7 Y/ b</ul>
2 e( N3 V' O" Y% E9 {6 r<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
. W0 J  C. w7 K3 }5 C" ]   {/dede:arclist}
  S% p+ f0 O, t+ {</ul>
另外ico部分有3种ico可选择
* o. ^7 A& I: X, Z- Z9 E分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
, ]/ ?$ ]4 @( X8 [* T您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
- ]+ _$ z! t' K$ X& L这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.