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

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

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
. E' F; A$ {. e8 j  x0 H+ q您可以根据自己的实际需要修改使用 % J. `7 ?' E, c. v+ C- L0 \
下面以首页区块调用位置为例 4 m$ o7 Y8 t5 q7 D' x( p
我们来详细介绍这六种列表样式的结构和class 9 c, l( E! C$ }$ G* d
首页模板的<div class="listbox"></div>内是区块列表的调用 8 c  \  b6 B* Z! b1 S) O
<dl class="tbox"> 0 a( y% z& {: _; {
<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>
5 }6 x; p8 K' _' y- _7 ~<dd> 8 S" S" Z! S5 [7 t
<ul class="d1 ico3"> 8 ?" V1 p% `9 T4 @6 l5 a
{dede:arclist titlelen='60' row='8'}
! P% L) Y1 H6 n" j9 ^& [1 c# r<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
; `% e& K/ C7 \{/dede:arclist}
9 k( E9 l$ i0 H6 B' Z3 T9 X& n</ul>
) V% R, j% A4 N# F& m; B4 b</dd> % H# A( k% L& w$ ~0 J
</dl>
' B& F( @% Q- C: W0 D) w1 L其中<dd></dd>区域即为列表调用
1 S: h, ?( P1 A( c! J只需修改<ul>的class和内部<li>的结构即可更换列表调用样式3 _4 u3 _) H/ [5 k# I+ `
-------------------无聊的分隔线--------------------------------------------; b  Q: |" K1 U% }& |7 O* s
列表调用样式1 - 纯文本列表(c1)8 s) O) z9 S; ^2 z
# {% v7 K: z. J2 X! m
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.$ O% V% R' h4 D. v
<ul class="c1 ico3">+ b+ C0 L' R7 u; h; d6 c
   {dede:arclist row='8'}
: V- g* }' {  a9 G% T     <li><a href="[field:arcurl /]">[field:title /]</a></li>8 _: o2 N# Z; K7 ]0 o1 O
   {/dede:arclist}
9 e5 q, G8 z4 L8 o: m. B% r! O</ul>( h0 k; A4 a5 E( G2 T7 X
列表调用样式2 - 带日期的长标题列表(d1)/ l8 }  o( a% I& c3 T

$ s3 S7 J  d( b0 u可以调用23个中文字符的长标题和短日期' E: E$ S+ `0 d8 B
<ul class="d1 ico3">
$ Q" N0 S& a4 }+ B+ K0 g! b4 y   {dede:arclist row='8'}
- y& A8 ^. H, F* \% |     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
6 M# T% G- |5 n; k   {/dede:arclist}1 ?( a8 ]8 _( u+ e- G4 V
</ul>7 ]) A6 A4 s: \: ^
列表调用样式3 - 带日期的短标题列表(d2)) A) U  `9 P$ x- |7 ~

9 v' V: `9 P* {! C8 a) M' x6 M/ D可以调用19个中文字符的长标题和短日期$ |0 t$ |, S0 R& [
<ul class="d2 ico3">7 F+ [6 X: A7 k- a( a$ [
   {dede:arclist row='8'}
6 Y( ^" E  M, |6 W     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>9 T3 f4 u  C6 l, U1 s, R
   {/dede:arclist}5 d1 a2 m& r/ P  f9 z2 [
</ul>  S$ \. I+ ^0 F* F  c
列表调用样式4 - 图文混排列表1(e5,c1)5 P, H" Y+ Y& [1 [
( R2 W3 K1 D. b
左侧调用图片,右侧调用文字标题列表- ]0 u% w  B. |, m" I0 P
<ul class="e5">
6 ?5 Z2 X2 d$ \) o( f1 j0 J     {dede:arclist row='2' type='image'}
% }5 B4 A* q; `0 g! U% \     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>2 C2 K8 w  v: t2 Y7 N: v4 \4 W
     {/dede:arclist}
) `% G1 b: o% j) ?</ul>
8 g. j) W8 b( l8 ]<ul class="c1 ico3">
" G( F/ Y" C6 L! V   {dede:arclist row='6'}
! s8 x, g; {3 |3 P6 D7 h     <li><a href="[field:arcurl /]">[field:title /]</a></li>
- l. Q$ X3 s' r" R   {/dede:arclist}8 x3 p$ ~# p4 U# o0 y
</ul>
# L0 w: v6 c5 a  Q3 q: X2 r列表调用样式5 - 图文混排列表2(e6,d2)
4 z0 @6 L0 d/ H# X+ i- K% D  @8 {2 ~- J' b
上部调用图片,下部调用文字标题加长日期列表& {$ x4 c+ o7 t3 M( H* K
<ul class="e6">4 n  `' d) k* m5 q* t
     {dede:arclist row='3'   type='image'}; |* R& I# @1 s5 q9 N5 H% V
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
: {& D: C& r8 I/ C, b     {/dede:arclist}
3 B: L' o5 p7 a0 x! B" l</ul>
5 j. Y" d+ w: n& r9 B, U+ g<ul class="d2 ico3">
8 r+ o+ J+ {6 Y2 B   {dede:arclist row='3'}) V6 D0 _$ D- R
     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>" W, }% h3 m/ k% N7 G' z/ X
   {/dede:arclist}/ v; T( A9 e7 Y- n$ e" x: d! d8 C
</ul>
! r" ^4 ^) z9 ]# H. s  Q列表调用样式6 - 图文混排列表3(e6,c2)& f$ |& Y9 f' z) k$ Y* W% i! J; C

% p7 N3 D! a. Z+ O6 x上部调用图片,下部调用两列文字列表
" X% V; b3 W2 ?1 u; V* J5 I- A' _<ul class="e6">
8 W# P& j) A+ e0 X     {dede:arclist row='3'   type='image'}
! P9 W! {& n! g. p& ]     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>* p$ G4 O4 S- J) _/ Y  x
     {/dede:arclist}, h4 y  M$ |' ?6 `8 P/ s
</ul>
  R8 s: c( ^' a" M- q) f) F<ul class="c2 ico3">
- [. J; R; s- r+ Q   {dede:arclist row='6'}1 p) m% G5 Y" y: K; r! O, S& k2 y
     <li><a href="[field:arcurl /]">[field:title /]</a></li># z$ o. o6 p# e+ |7 L5 C* {
   {/dede:arclist}8 \) v: A- W0 I. O) w3 q
</ul>
& U" l! v& p) K4 C另外ico部分有3种ico可选择
7 i+ u. X" U* T5 I% i分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
9 y0 K3 S6 W5 K$ _您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式." r4 ?" Y4 l& H( f. b; R( A+ \
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
; ^/ \" t9 E2 [4 H- x另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.



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