返回列表 回复 发帖

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


1 {; n$ G/ L: D8 Z
. n% {- K4 u$ s( u: ^三、页面顶部制作(2)----使用列表<li>制作菜单- K" ~" q0 A5 u5 o
) ^4 r+ e6 W. R& L! I
  开始此节的学习前,请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。
# R$ P# a7 P$ ~; F9 t" \  这一节我将告诉大家如何用列表<li>来制作菜单。 程序代码) v  |/ `% q: P/ L- t% O9 ^% A
        <div id="menu">& X( y* s7 |% {& L( \* R
          <ul>9 J, T: A! N8 I+ [
            <li><a href="#">首页</a></li>( v. |# S  C. H; z
            <li class="menuDiv"></li>
1 F# s: H: B9 i5 w            <li><a href="#">博客</a></li>
4 l; ]! i, |  P3 l            <li class="menuDiv"></li>
- l( @$ Y( S) o9 R9 m            <li><a href="#">设计</a></li>6 c! E, @1 l4 K. F( Z0 O" u
            <li class="menuDiv"></li>: w( U" x( O7 g* u# z/ N% Z
            <li><a href="#">相册</a></li>5 D! N" H+ R2 m' [  D2 P
            <li class="menuDiv"></li>" P, b! G( ~- G  Q# E
            <li><a href="#">论坛</a></li>
% _' D4 `# b) ~2 ~  C: j            <li class="menuDiv"></li>3 r) [6 E) [2 s
            <li><a href="#">关于</a></li>( M, c: [& Z2 t  ]8 n
          </ul>
) M7 y9 n  u# U        </div>* X+ O8 O! P. M; D8 W1 b; ?( h1 G' r
  以上是这部分的结构,有关于<ul></ul>、<li></li>这两个HTML元素大家自己去参考相关的内容吧,它们最主要的作用就是在HTML中以列表的形式来显示一些信息。
" A( b' ?' ^& K$ J# _9 y9 s- Y' r
: |6 R" J% K, U4 X  还有一点需要大家一定要分清楚的,当在HTML中定义为id="divID"时,在CSS对应的设置语法则是#divID{} ,如果在HTML中定义为class="divID"时,则在CSS中对应的设置语法是.divID。/ Z" f  G; D7 d4 Y
  如果id="divID"这个层中包括了一个<img></img>,则这个img在CSS中对应的设置语法应该是#divID img {},同样,如果是包含在class="divID"这个层中时,则设置语法应该是.divID img {},这一点希望大家要分清楚了。; y& x1 L' q8 w' `$ w
  另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。
) ~8 |, O! D# _) E: h" a5 S& \0 a- j
  按照上面的介绍,我们先在css.css中写入以下代码: 程序代码* E5 q9 d, \. A# n4 v; q  ~
#menu ul {list-style:none;margin:0px;}
0 m7 b9 s( g8 P8 @: h% j#menu ul li {float:left;}
4 w7 H( E, o  }1 ^  解释一下:2 K* e- B' Y( `( X& L
  #menu ul {list-style:none;margin:0px;}
" A4 Y) U" S* ]3 W, \3 r8 o% H& B1 A  list-style:none,这一句是取消列表前点,因为我们不需要这些点。
8 M# S! F' W2 {! l1 h  margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。
+ W5 ]5 J. x( U5 Q' z5 E/ U- ?- d, z" ^2 b
  #menu ul li {float:left;}; O+ m0 n$ J# d- D$ z
  这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。0 T" m* R/ X! p
- D2 `- |% G/ W5 d$ o3 N  S
  到这一步,建议大家先保存预览一下效果,我们再添加下面的内容,效果如下:
2 m* f( w0 p/ K$ C* M* h& s9 W2 B5 l+ ?
3 o) d: _5 m! F0 z

6 s: T' q; N8 q# g: U) N+ Z    这时,列表内容是排列在一行,我们在#menu ul li {}再加入代码margin:0 10px: 程序代码" X# h7 b+ g9 N$ u6 W3 P: r% ]& B
#menu ul {list-style:none;margin:0px;}. A$ I' j, K: [
#menu ul li {float:left;margin:0 10px}: v( E, `9 Y  N0 j- l7 }1 F$ C
  margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px),预览的效果如下:- y; q1 o- t$ W* H4 q, a

( a. h1 r! _' c% Q- x# w3 F) q/ F. G' s  C4 K8 Y
- `- ^, @! Q+ G7 G( N5 N
现在,雏形已经出来了,我们再来固定菜单的位置,把代码改成如下: 程序代码$ V' ~. ]: F9 I3 u- [/ J
#menu {padding:20px 20px 0 0}
1 R0 ]( F0 Z. p/*利用padding:20px 20px 0 0来固定菜单位置*/
, q: }, ]9 ?2 @+ L$ W2 t#menu ul {float:right;list-style:none;margin:0px;}1 t/ a; c# F& d! u! v
/*添加了float:right使得菜单位于页面右侧*/' _$ {3 ?1 S5 m8 d2 z
#menu ul li {float:left;margin:0 10px}
! E/ ]4 r% G1 w  h5 [* J; k0 A# U4 A, n/ p% `6 Z3 }7 h
  这时,位置已经确定了,可是构思图中,菜单选项之间还有一条竖线,怎么办呢?
# C& v) u( {& r" x+ f5 F  别忘了,我们早就已经留好了一个空的<li class="menuDiv"></li>,要想加入竖线就使用它了。
& O% ]" W1 ]& ^( O. w7 o  ]  按照上面说的方法,我们再添加以下代码: 程序代码
  v" b( d, s+ i.menuDiv {width:1px;height:28px;background:#999},保存预览一下,竖线是否已经出来了?关于这段代码就不多讲了,应该是很容易理解的。
1 I' z- `; ^  Q) ~9 {1 c3 k! W8 d
3 _- ?  a+ f  j+ Q! z( d& R! }
9 j4 b( I# @/ c
不过,菜单选项的文字却在顶部,我们再修改成以下代码: 程序代码
9 O4 B# \! n) C/ p, q2 v" P& z#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
1 D4 A* R3 `$ k2 v, i2 Z$ O  关于display:block;line-height:28px大家可以去参阅一下手册,我就不多讲了。" d4 k$ L& B9 f$ U& W/ [$ c
& `/ r8 L" z2 A& ^4 k& q! w$ ^
  效果基本上已经实现了,剩下的就是修改菜单的超链接样式,在css.css中添加以下代码: 程序代码. G  ~3 n0 E, E6 j0 Y! }4 R
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
0 P- J. _# K2 R$ n# E& ]5 E#menu ul li a:hover{}- C. x; D; x, ^% ?
  这个也不多说了,没什么好说的了,最后的效果如下:
2 r/ ]6 _4 _' d+ S4 I3 U
. |2 @& }) v: {, I0 f- v
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
返回列表