[交流] CSS无序列表<ul>和有序列表<ol>实际应用 ...

小七 于 5-23 11:56 发表在  建站交流[高级] 8353
项目列表是网页设计中用途很广泛,上一节我们的导航条其实已经应用到了这个知识点,并且给其去了列表项目前面的原点,横向排列。不过当时没有详细讲解,这里单独写一篇教程,把无序列表和有序列表进行对照示范,ul是无需列表,ol是有序列表,通常都是与li一起使用,li是具体的列表项。先看不添加css样式的默认状态,比较二者的区别,完成测试代码如下:
搜外七街 www.SEOwhy7.com <!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>
搜外七街 www.seowhy7.com   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,空心圆。
搜外七街 www.seowhy7.com 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有序列表属性值比较多:
搜外七街 www.seowhy7.com 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
        }
搜外七街 www.seowhy7.com </style>( m% o2 Y6 @. n$ x9 f2 @: L6 P1 Z/ Q4 m+ N" R( I6 ^: N

搜外七街 www.seowhy7.com   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
 
个性签名玩转七街

评论 使用道具 举报

评论

帮你查询到 5 条优质的评论,通过实名认证可以查询更多优质的评论
您需要登录后才可以查看更多的评论 登录|立即注册 用QQ账号登录
搜外七街:SEO培训_SEO优化排名技术_网络营销推广建站培训
        搜外七街(SEOwhy7.COM)是互联网最大的搜索引擎优化排名技术、SEO培训、网络营销、网络推广、建站等综合bbs社区论坛站长学习培训网站,致力于培养学员。
七街事务:点击这里给我发消息
快速回复 返回顶部 返回列表