航空论坛_航空翻译_民航英语翻译_飞行翻译

标题: DEDECMS V5.3 官方模板 6种列表样式说明 [打印本页]

---

作者: 帅哥    时间: 2009-8-29 10:44:53     标题: DEDECMS V5.3 官方模板 6种列表样式说明

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
7 |( z: G7 n" j7 T: K首页模板的<div class="listbox"></div>内是区块列表的调用
' n! b+ H+ }+ _* B4 |% i<dl class="tbox">
& d  p- R) J  W- a# Y) B. E( G( e<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>
$ m# Q) o: p9 Q2 d, C<ul class="d1 ico3">
+ U6 d% I9 ^, E1 P4 X{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}
</ul>
</dd>
</dl>
其中<dd></dd>区域即为列表调用
/ u5 L8 b( j; M只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
3 q" Z& e. f# x1 D- {! R9 A-------------------无聊的分隔线--------------------------------------------
) q5 c" ~/ H2 p7 H列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
9 w7 B$ L% a: {$ z! A2 x<ul class="c1 ico3">
, E0 Q. V/ L  A4 D8 V1 }  }6 m   {dede:arclist row='8'}
: M" j/ B( |, U4 ?     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
4 z, V: T* K4 A) f</ul>
. L) G  C5 q5 w  A7 D' f列表调用样式2 - 带日期的长标题列表(d1)
, E5 H6 s* q/ G9 l6 G
可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
; |8 p' Q* r+ b: g' S; G   {dede:arclist row='8'}
. ~1 j$ W  {# M1 @. l4 e1 z: |2 F     <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)
3 K6 C) Y5 U  M3 [' q" e1 i
' q$ \: m: s7 J; Q可以调用19个中文字符的长标题和短日期
, b, ]7 f# V- x5 `5 ]1 R<ul class="d2 ico3">
1 f6 Y0 U6 ~( C   {dede:arclist row='8'}
5 M) _6 I: [: R     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
% K" ]7 F' T+ W1 U# `3 L8 g6 q   {/dede:arclist}
( Z7 [$ p# I+ ]) d# ]# {& }</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

5 B: F2 e9 e! b: }2 Y左侧调用图片,右侧调用文字标题列表
( J0 l/ L6 ?& H& ]8 b: q' V( l# Y<ul class="e5">
9 w; [% Z! R% q! u3 M- i. K$ g; M9 s: t     {dede:arclist row='2' type='image'}
3 z5 |/ T6 j1 a; O     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
" L4 _1 f% n" J( k+ @     {/dede:arclist}
6 c  p9 S5 h2 @6 Z</ul>
<ul class="c1 ico3">
0 `. z: p/ c& T- U- P& F- @( O+ R7 k   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
" A9 f$ [8 F" E% }3 i1 v( ?0 I
( f3 `2 `9 S4 i+ D上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
1 W# x5 U, Z( S# t# v+ [5 ?# I     {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="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>
; o( s! v1 {) x: P2 D; n8 k   {/dede:arclist}
4 {% J. q% Y2 T/ |0 ^. t</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

. w2 x7 W; j) X4 W上部调用图片,下部调用两列文字列表
  Z9 w: ~) M1 M6 ^9 r5 N3 b0 Z& U<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">
; T7 o) n* ?! F5 F. g9 ^   {dede:arclist row='6'}
& v9 {. [( h: j. Z8 G     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
# ^: }" [0 P# j7 W* R4 s另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
, Y/ \: ^# t$ A( x1 E您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.

---

欢迎光临 航空论坛_航空翻译_民航英语翻译_飞行翻译 (http://bbs.aero.cn/)

Powered by Discuz! X2