返回列表 回复 发帖

Div+CSS布局入门教程(四)


/ ?/ d, r. l' q2 c$ a2 o) Y) K( Y" t
三、页面顶部制作(2)----使用列表<li>制作菜单
% Z3 s9 ]7 \  M
& S" v8 h5 |4 t' v( T% K  开始此节的学习前,请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。
& e5 r( a8 M: [( H  ]  这一节我将告诉大家如何用列表<li>来制作菜单。 程序代码2 P8 ^9 }9 F% g4 V+ d
        <div id="menu">) Z" v' L4 x' f
          <ul>3 u+ ]* d! ~- K! v. Y) @8 j% {
            <li><a href="#">首页</a></li>' V1 |9 c4 ?8 F& Z# |8 v
            <li class="menuDiv"></li>: i9 l6 f& m# }& }" q
            <li><a href="#">博客</a></li>
+ a6 |. h( Z0 x8 R+ e8 V5 \            <li class="menuDiv"></li>
9 o( w* e. H' D- o7 R$ O            <li><a href="#">设计</a></li>8 c! L# k, z2 B! A9 K' w: l
            <li class="menuDiv"></li>
: L  O" |. d7 }- z1 h            <li><a href="#">相册</a></li>
$ _' u" ^) ]5 X+ t; g: z            <li class="menuDiv"></li>
: x0 Z" h2 r6 L7 `3 J            <li><a href="#">论坛</a></li>: Q% q' w' P8 ^' X0 t
            <li class="menuDiv"></li>- W* ]' c7 J; Y5 d/ l
            <li><a href="#">关于</a></li>; q4 s5 @" q) e, [# W
          </ul>$ u4 ]  h6 u0 l- j6 V2 c( v1 {
        </div>
, j5 A  k' ^, y0 T: j# _) W  以上是这部分的结构,有关于<ul></ul>、<li></li>这两个HTML元素大家自己去参考相关的内容吧,它们最主要的作用就是在HTML中以列表的形式来显示一些信息。9 q3 C0 w( I& S+ l
' {5 z  g+ S7 e! P" ]; W* d7 u
  还有一点需要大家一定要分清楚的,当在HTML中定义为id="divID"时,在CSS对应的设置语法则是#divID{} ,如果在HTML中定义为class="divID"时,则在CSS中对应的设置语法是.divID。
, }( [  ~) F" p  如果id="divID"这个层中包括了一个<img></img>,则这个img在CSS中对应的设置语法应该是#divID img {},同样,如果是包含在class="divID"这个层中时,则设置语法应该是.divID img {},这一点希望大家要分清楚了。
$ V6 k  |( M9 U, U# ^* y/ {  另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。4 G$ J; P- G. s7 V0 D3 K( r

& C" P5 G8 ~5 O/ n" ]/ }& S  按照上面的介绍,我们先在css.css中写入以下代码: 程序代码
- f7 _$ A/ a4 H) g$ e4 J#menu ul {list-style:none;margin:0px;}
/ @" @" x1 q  {#menu ul li {float:left;}
9 T3 D, x: e! B4 j  解释一下:
: }0 n* x! l' |9 v* {! s  #menu ul {list-style:none;margin:0px;}+ I5 H9 ~% k  }1 t
  list-style:none,这一句是取消列表前点,因为我们不需要这些点。! I: K% h# j2 I
  margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。3 y8 E2 k/ M1 x5 V* Z  r. {0 M

2 m4 b& T0 e/ v: L6 B  #menu ul li {float:left;}
* m6 d/ Y  B' [  这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。1 M; q; X+ m5 n! ~, r5 e- F
; A7 R; l4 x$ Z' R4 o
  到这一步,建议大家先保存预览一下效果,我们再添加下面的内容,效果如下:
6 X- [# Q7 |: k, H) n" n
+ _  U: i5 v, t& e3 z9 Q5 |" I
& L  f% K) L0 F3 V4 X9 m
    这时,列表内容是排列在一行,我们在#menu ul li {}再加入代码margin:0 10px: 程序代码. f0 ?  ?" t0 o8 q
#menu ul {list-style:none;margin:0px;}
5 V3 ^* D; R, H4 r4 K: F" k5 p#menu ul li {float:left;margin:0 10px}
% X$ U4 D' O( q, \$ V. _- l+ J  margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px),预览的效果如下:6 j  t' T9 S8 c; s% a
3 h! w% |1 Z6 P: B" ]+ l
# L. R' E* q2 }: a

6 R/ |/ z5 ]; v7 D9 k  A% Z现在,雏形已经出来了,我们再来固定菜单的位置,把代码改成如下: 程序代码
# P$ ?6 M6 R) u" v1 V8 \#menu {padding:20px 20px 0 0}
6 J$ _! ^6 [3 h! d/*利用padding:20px 20px 0 0来固定菜单位置*/0 n# `8 {' _5 c! W5 [
#menu ul {float:right;list-style:none;margin:0px;}# D/ E1 T! @* E6 Y) D: @
/*添加了float:right使得菜单位于页面右侧*/9 U: V! }( w. x) W% M2 O
#menu ul li {float:left;margin:0 10px}
7 z+ q' N9 c$ k+ ]! U7 o" ~+ K! P1 B$ H/ }- M
  这时,位置已经确定了,可是构思图中,菜单选项之间还有一条竖线,怎么办呢?5 E/ Z4 k. F! S. L
  别忘了,我们早就已经留好了一个空的<li class="menuDiv"></li>,要想加入竖线就使用它了。
: P* z$ ^1 r7 u2 \1 n  按照上面说的方法,我们再添加以下代码: 程序代码
! o  x5 T0 X9 i.menuDiv {width:1px;height:28px;background:#999},保存预览一下,竖线是否已经出来了?关于这段代码就不多讲了,应该是很容易理解的。
/ s* y% \; d5 x# g9 F4 M* L+ @" I- D9 w) E( m5 V  q  Q

9 l1 Q5 {, s% _7 I  n- v8 C7 E5 y5 y- e$ R& Y6 l
不过,菜单选项的文字却在顶部,我们再修改成以下代码: 程序代码
! b* X- S( Q9 C8 Q#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}* L: t+ C% H2 N/ U) B8 ]
  关于display:block;line-height:28px大家可以去参阅一下手册,我就不多讲了。$ {) u$ T" M* j3 q2 h0 r

1 X# Z) `& S( K& U6 g& _  效果基本上已经实现了,剩下的就是修改菜单的超链接样式,在css.css中添加以下代码: 程序代码
' L6 E2 V6 T1 W4 r; T3 u/ J( `#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
3 W, ]# o- u  p) P#menu ul li a:hover{}
& ~4 |6 j# g* l# B  这个也不多说了,没什么好说的了,最后的效果如下:
0 b& [( N9 {$ |: r
" i" f7 m7 D6 I0 i" U* I# r
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
返回列表