|
项目列表是网页设计中用途很广泛，上一节我们的导航条其实已经应用到了这个知识点，并且给其去了列表项目前面的原点，横向排列。不过当时没有详细讲解，这里单独写一篇教程，把无序列表和有序列表进行对照示范，ul是无需列表，ol是有序列表，通常都是与li一起使用，li是具体的列表项。先看不添加css样式的默认状态，比较二者的区别，完成测试代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">- B+ A0 T: n& G" `0 n! U x6 F) Q& d* C' U; X <html xmlns="http://www.w3.org/1999/xhtml">8 N5 T8 o. e/ ?6 e* V G3 w! J8 g) K- {9 }# g3 T4 L! ? <head>1 F2 H1 `. |5 D0 c. X* n) |- i) F1 p$ H2 O: d/ i <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />+ {) K- o2 t/ I( d9 |3 ^, r- q3 i6 j$ h0 r* h _/ U, ~. @* _. Q, {9 m6 m" X: {; `$ V! c% p N2 }- X* M! G <title>无标题文档</title>" _/ w& x% b% z) A( o2 v/ z9 z: W6 O </head>' f+ u8 R! T" p/ x' ]0 d6 H1 R3 Y) C8 T8 A: i9 A1 X7 ] ; Q1 f! I7 A: u# J# m6 _2 G8 c' ?+ A8 S# q4 b0 U, B0 p <body>. I* |5 d& U ]8 J( [- |& B4 ^) c <ul>$ j" u% E2 G' b5 |* N6 e( a& V <li>SEOWHY DEMO</li>' o. R2 l+ ?$ q+ G- f3 }( `9 a5 y1 u& i1 Z- r3 p* p* U <li>SEOWHY DEMO</li>6 c; \) x" u$ O, j: o6 n3 c& \1 i* ^& T <li>SEOWHY DEMO</li>7 @8 M, m. e3 m: H& {9 n$ x7 m& L2 y) A! ]8 v+ |$ N5 n! ~* ^1 x <li>SEOWHY DEMO</li>% F) Y( X- X7 o' W, i1 D: ]4 Q' C0 ^1 q0 \( y$ \6 r& l: \( ^7 e1 ]9 Y <li>SEOWHY DEMO</li>8 Q+ \% y* @& E1 D) R, O( K; q5 w* e8 N </ul> U1 I6 @; y: |: j9 @2 K* Q <ol>' }" K( y! [& j; H. {$ L& c- j* C <li>SEOWHY DEMO</li>! \# P- H( k M3 q6 [8 B# u5 E6 t3 t X( B <li>SEOWHY DEMO</li>: n$ E' `! L/ q' t X5 Q# Z* W" O" p8 V. v% O# h <li>SEOWHY DEMO</li>: ]( V: U- x9 Q6 l6 T! a: o( e+ k# R1 f6 F; { <li>SEOWHY DEMO</li>' U1 f7 x. V* Y9 j$ _, T; N$ l- y <li>SEOWHY DEMO</li># v: |- @/ u' M7 r9 b0 F b- \9 [! S# l2 n) w; N </ol>( Y( W4 p1 o+ o' W7 Q* h8 w3 j5 b' y6 F </body>; ?3 l, e* C7 p( w4 e/ e& ~6 {/ D( n( p L) ~& }9 n+ i- r0 v </html>/ B" ^+ y8 l4 O. N2 ~9 y: H2 u8 L4 l% i1 [ 8 t' D' X5 t4 _2 Z3 X: e; v+ H) p+ _5 w / V0 h3 C3 X b/ m: r S" t9 m5 a8 _; |6 b2 c 从案例可以看到，ul的默认状态的实心圆点，垂直方向排列。ol的默认状态是数字12345，也是垂直方向排列。通常情况下，ul的属性值有3种常用类型：2 U# t z0 S5 p* g# @, }6 A$ K7 u; f _1 p$ ?$ m3 ^# ]% Q8 S 1）disc，默认值，实心圆。7 J6 e! o# w, q. i, O' L, z6 p/ e9 A2 w. D 2）circle，空心圆。 3）square，实心方块。2 Q: i2 Y7 k% ?& _( U- y1 ?4 A4 n- C# g ' ?8 J) D0 ]" ~& T* [3 r" Q/ A6 W0 o2 [# T9 U7 M2 s ol有序列表属性值比较多： 1）1，decimal，默认值。数字有序列表。（1、2、3、4）. z9 N* t) y0 b C: ~+ }- x! V9 V, ^ ]0 {- G4 Z 2）a，lower-alpha，按字母顺序排列的有序列表，小写。（a、b、c、d）! P, m! Y: ^; {; c' m2 t+ A* `* H4 a$ E# E/ A# y- I# m 3）A，upper-alpha，按字母顺序排列的有序列表，大写。（A、B、C、D）* t% J! y7 m. t( O9 s6 k$ [, _ 4）i，lower-roman，小写罗马字母。（i, ii, iii, iv）! l; B9 r2 P: K( g! e q- s2 O+ j* R3 ]1 ^* g7 ?. I0 j6 c 5）I，upper-roman，大写罗马字母，（I, II, III, IV）9 Z, \4 z. `. R, I2 `- `, W3 u5 B- u8 O1 C4 ]* X/ K: B 8 ?! s. C- _) e% H+ p% D, u+ O+ ?! B 下面分别给ul和ol添加css，看看效果8 p/ |/ K$ E1 g) t0 o0 V H <style type="text/css">+ V Q" n( m5 E0 U& a: E3 m# y ul{5 c/ q* ?! S+ e l, H+ ]* P( x: [9 j: Q$ [ list-style:circle;$ y' }! {) A4 h }$ a; C( {; K! q$ A: F+ l+ ^0 N6 O+ P/ }1 [. f/ w7 n8 T1 A9 M/ r8 S }, L6 R7 s( i" B5 X# N% h1 ~1 y/ F ol{+ r* y, k: u. g. Z t8 e" ]9 x7 H, d3 N! y& d list-style:upper-alpha;/ O: `# B0 Z! F0 a5 B" U* Z3 j5 y$ ]7 e" v' |! `, @4 G: ~: w L8 \4 N- d+ Z } </style>( m% o2 Y6 @. n$ x9 f2 @: L6 P1 Z/ Q4 m+ N" R( I6 ^: N t6 p N3 v$ H$ [2 s/ t) U; K( ~0 H/ G# E! V0 d: f+ }% ^ 还有很多属性值可以看到不一样的列表效果，大家可以自己测试。实际应用中，如果添加样式的话，其实Ul和ol没有区别，只是在默认状态差异明显，大多数情况下使用ul 即可。如果要让li列表项某个项有特殊的属性，实现方法也很简单，在样式里面定义一个对应的类，在li列表项引入这个类即可，由于操作比较简单，这里就不做案例示范了。列表项前面的符号除了使用圆点圆圈，也可以自定义一个小图标，在css里面写上list-style-image属性即可，对应的属性值就是要显示的小图片，所以，对于项目列表前面的符号，其实我们可以任意设置，想放什么都可以轻松实现。) B& {2 o" N# ~- Q+ B- v+ C6 @+ s . z G/ J$ S- m' i9 A+ f/ f! W2 D- H* o! C% ]+ V6 q+ ? . C1 |* ^' t7 \: s% {/ _: ]* N% m; t+ p! c3 F! z; S; x# ^/ z, F' S4 e; [( ] U! i$ m8 h " H0 z% t; t* v4 A0 g; s* G" _1 E9 j5 R D! y! u% Q D! M8 H7 L2 h& r, |. w- P$ V) W; E: K; ?% F : {3 q" P2 d! \4 W' p/ K+ a! ]* t& T4 L! w |
烨水朱华 发表于 2017-5-23 16:30' P! {# m, y8 h( j" o- D7 A/ k) t# r" k* d2 i 如果需要排序，确实很方便，一下子就出来了 |
评论 使用道具 举报