- 注册时间
- 2008-9-13
- 最后登录
- 1970-1-1
- 在线时间
- 0 小时
- 阅读权限
- 200
- 积分
- 0
- 帖子
- 24482
- 精华
- 4
- UID
- 9
  
|
DEDECMS V5.3在(layout.css)中预设了6种区块列表样式 $ I& A: D! y8 o
您可以根据自己的实际需要修改使用 6 L+ O) y u( @( P4 S& h- }' {
下面以首页区块调用位置为例 & k* F% r9 p& u! H
我们来详细介绍这六种列表样式的结构和class - s. b2 ^: M/ q" p& r+ H
首页模板的<div class="listbox"></div>内是区块列表的调用 ! L O+ F/ {1 z+ ?1 @# p
<dl class="tbox"> 2 R& \' ]/ T$ K, u9 E6 s+ b
<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> % T3 @* ]! \- i* z) T* D1 D, j
<dd>
! s* s) Z2 G; n& s" c7 V+ p<ul class="d1 ico3"> + H6 _2 j. P' y6 G6 x& k
{dede:arclist titlelen='60' row='8'}
" P! [! O3 E0 @8 ]<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
) W2 }" B# V V/ q* ?{/dede:arclist}
& r ?) y# G& C( H1 j$ q</ul>
& ]: F. O# F e* Z5 \) O</dd>
( R( Z& f0 j# N/ L+ w; q</dl> p p J) n; U, E6 h
其中<dd></dd>区域即为列表调用0 J8 u# U/ r. a, Q' O
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式3 r+ I, ^1 g% i0 d
-------------------无聊的分隔线--------------------------------------------
' k' M1 U J+ t% s0 W. [& P列表调用样式1 - 纯文本列表(c1)
3 b" K3 h: E7 i$ {3 G
# P; O8 N/ L! K纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.5 |, R- Z/ [0 d4 I' N
<ul class="c1 ico3">
; `& U9 c9 `0 W {dede:arclist row='8'}" @( m" S7 \% R: o
<li><a href="[field:arcurl /]">[field:title /]</a></li>
- B6 Z1 b/ u( u0 `2 X {/dede:arclist}' g3 H. k3 B b' B0 O, D
</ul>
7 h# _; r6 `/ ^8 p3 v( Q; G% f列表调用样式2 - 带日期的长标题列表(d1)
8 m7 N3 m) i' Z0 W% {7 b' f& E
0 {9 x. f) f4 D" Y" L( @4 B. Z可以调用23个中文字符的长标题和短日期
! o0 Y# `, I f" K' Q1 J. Z: Y0 F<ul class="d1 ico3">
3 k9 f" d4 ~# W1 A; L {dede:arclist row='8'}. a, {5 B' C! G$ S4 K
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>+ `3 ]* @6 S0 `% N' F' O" Q$ j$ t% D) o
{/dede:arclist}$ l& }7 R6 f! J. Z+ e; W( ]+ M
</ul> |' F; `6 h3 D! E
列表调用样式3 - 带日期的短标题列表(d2)6 G* s/ d$ I/ @7 p2 o1 ]) b
/ x6 T5 |0 g n, v5 b# N' v
可以调用19个中文字符的长标题和短日期4 ^* @4 K! W5 u& ?+ f
<ul class="d2 ico3">' X, T* \* |* ^3 d+ W. l
{dede:arclist row='8'}
& U C; [' I$ ?0 y; d; l" P4 k <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
6 [ W( g+ a. g# U, J! a' M {/dede:arclist}
, S u+ H* B* @5 c2 D</ul>
. v( B" Q1 F* M+ h列表调用样式4 - 图文混排列表1(e5,c1)
1 p2 V z& ^/ @9 c( G% r
: \# y: ?" @5 E% F左侧调用图片,右侧调用文字标题列表
9 s1 Y6 b: I- |6 @- l<ul class="e5">
1 H# L/ t; Q$ ~. c( \" t2 | {dede:arclist row='2' type='image'}! q1 x- \) \4 @4 p2 S
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>+ f. L9 t! p- j6 N6 R
{/dede:arclist}7 f, p4 d" e7 B2 c$ I0 K
</ul>
# p) I/ f8 i0 _( x1 p<ul class="c1 ico3">
. c5 c4 M* N+ v {dede:arclist row='6'}" V% F8 t! o* ~& g& _
<li><a href="[field:arcurl /]">[field:title /]</a></li>% ^8 A# K* M0 Q) d7 e
{/dede:arclist}
4 G o# p, Q- d. v! M</ul>
! T: z ~( k: I5 H列表调用样式5 - 图文混排列表2(e6,d2)
, O# `4 d2 F% I4 q
5 e5 [. R' O: Z( _/ g上部调用图片,下部调用文字标题加长日期列表
' b5 P. ~' |# B: S5 J) O<ul class="e6">/ @5 a, x4 t, B& A7 x
{dede:arclist row='3' type='image'}' M% e \2 _4 p9 U: B' M
<li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>3 l- d k5 H _$ a6 F; `
{/dede:arclist}2 ]$ F. y$ i" v1 T2 o7 }( a5 h
</ul>0 w% P9 N2 X2 N9 g1 y
<ul class="d2 ico3">
& H! G- } w6 k: W7 ~ Q {dede:arclist row='3'}" I/ ^3 B- M5 ^
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>4 [4 A/ S, K" I" H
{/dede:arclist}
& y8 L) _% L* ~( e' P+ d y</ul>3 b% D$ _8 ~! k u" d2 @
列表调用样式6 - 图文混排列表3(e6,c2)
) {% Z n# d. B% Z& K2 q% t
- I$ ?. J+ P3 s" J/ Y; U上部调用图片,下部调用两列文字列表
- u0 e& C& B* Z' U<ul class="e6">2 v- C, `; \' E( e" e" M
{dede:arclist row='3' type='image'}
. ?( J& e, k. E- q& b+ M <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>; u* r2 b/ Y( a8 l6 X2 x6 x
{/dede:arclist}; w" d# K0 L6 o9 I0 @, t
</ul>
# M& Z1 J0 ]. q8 Z3 B6 x3 W<ul class="c2 ico3">
4 @- i0 A& }& ~7 V# H {dede:arclist row='6'}; r: n2 N+ l6 _1 { s
<li><a href="[field:arcurl /]">[field:title /]</a></li>+ C3 o! z3 T+ X: G
{/dede:arclist}" [( K2 k+ ]/ x9 u: ~$ P
</ul>
% [5 r' p: h& \7 x另外ico部分有3种ico可选择
7 G0 B8 R% y( f# r: ~' x$ k2 Q分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.2 @8 V' J' S6 G: V
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
{" r+ J1 {' h) U Z" [) Z$ s这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.0 t$ I& Q" ~! F% Z& ?" ^% e
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究. |
|