返回列表 回复 发帖

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

  当我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了。
  {. v7 J6 c! V! n4 y5 H7 v% b8 n3 W5 Y  o2 G7 m; P, e) c
  在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把css.css中的样式全部清除掉,重新写入以下样式代码:
# W9 C# e- B0 G7 i4 _$ L; V程序代码8 J/ j6 X7 F6 e4 x9 ?. D7 \
/*基本信息*/% `( k0 e) _& p) [2 v
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}" l& g: n1 V8 Y) `, G: S3 _  o
a:link,a:visited {font-size:12px;text-decoration:none;}) c! _4 G! F; c+ M; {& W
a:hover{}
( h" h) X" x- h- b, ]& H& [8 c
  }( B- g6 K  v2 Q$ ]/*页面层容器*/
4 y' G; K4 O$ C, J, [1 S#container {width:800px;margin:10px auto}+ [+ O  Z" T+ p3 [
  样式说明:
4 e; S& ~* \7 u5 I  e. c% |$ |" u$ n/ J. t
  a:link,a:visited {font-size:12px;text-decoration:none;}  y$ r& i; r8 l3 v9 M
  a:hover {}
& A  k/ Q; T9 \- v/ B: f( j* j1 D# ]4 c. y) \: {# o0 ]
  这两项分别是控制页面中超链接的样式,具体我就不说明了,请大家参阅手册。) D! r/ _! V6 H' {& ^8 ^0 B* }
3 O; H, j% Q2 ]+ N2 X7 [  ~( l
  #container {width:800px;margin:10px auto}
) M% v9 @5 u9 a5 }1 @
1 l. k4 P, q0 u5 w0 l" N; b: G  指定整个页面的显示区域。5 }) Z& b8 N9 v) ]- ^: t( o6 [8 D
  width:800px指定宽度为800像素,这里根据实际所需设定。) H) u  z1 A) e2 E- P0 \
  margin:10px auto,则是页面上、下边距为10个像素,并且居中显示。
( A+ K' J5 n6 e; D( F- m: n  上一章中我们讲过,对层的margin属性的左右边距设置为auto可以让层居中显示。! i2 e! J3 |5 S2 l5 m! n$ C9 h) y: ]
, K  E; I" E" a; j6 w
  接下来,我们开始制作TOP部分,TOP部分包括了LOGO、菜单和Banner,首先我们要做的就是对设计好的图片进行切片,以下是在FW下完成的切片:) w/ S5 y. l. d/ |1 j; ^8 F( s+ I' y
. i3 l6 ?5 M" S; k

4 f* Z8 i! J/ c; @$ Z, d
5 X6 I- r' [; o: {' N+ D3 _2 Z6 A我将TOP部分切片为两部分,第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色,这里我于是将这一部分保存为GIF格式,调色板选择为精确,选择Alpha透明度,色版为白色(此处颜色应与背景色相同),导出为logo.gif,图像宽度为800px。9 m) ]" f2 x" h) v+ d

5 ?; D8 f6 [+ _+ {" _- G5 ^  到这里,有的朋友就说了,* 为什么要使用GIF格式?使用JPEG不是更好吗?+ a/ T) p) v* a0 [4 @( u8 d0 N
  因为GIF格式的图片文件更小,这样能使页面载入的速度更快,当然使用此格式之前必须确定图片并没有使用太多的颜色,当我们使用了GIF格式时,从肉眼上并不能看出图片有什么太大的变化,因此这是可行的。! [1 S( ?) w9 `8 C2 Z
+ z4 |% [7 q) J, ~; ^: i/ t
  * 接下来的Banner部分还能使用GIF格式吗?
! N6 |* K+ P9 }- {1 `5 g; X4 `  答案是不能,因为Banner部分是一个细致的图片,如果使用GIF格式颜色会有太大的损失,所以必须使用JPEG格式,将文件导出为banner.jpg。5 o, g  N' k+ ?7 c

* d  }5 @  |  ~- @$ p  * 合理的切片是非常之重要的,因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。
  B0 }# n' F5 G, m1 B2 _+ i) q: t% h5 _6 e3 t; N7 m/ n
  切好片后,我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下:8 A7 V9 @0 I1 k' D: D
程序代码4 C$ r+ I2 }! C- Z
  <div id="menu">6 W3 C" e) w7 u: L1 v
   <ul>4 e! s0 _+ Z5 r. q# L- d# R8 }
    <li><a href="#">首页</a></li>8 y6 f, t( O1 X8 \; ]1 ~- [" t
    <li class="menuDiv"></li>) o' b+ E  `( i' O
    <li><a href="#">博客</a></li>* [2 e' w% f3 E' @
    <li class="menuDiv"></li>
7 `7 _. d. t/ n8 v7 t; P    <li><a href="#">设计</a></li>3 w) ~8 v+ }0 N% z, K/ X* O
    <li class="menuDiv"></li>
) B2 U( q& i4 b4 R8 ~/ Y    <li><a href="#">相册</a></li>
6 \! |  A7 p$ _5 {    <li class="menuDiv"></li>( b* u; X; @' J# Z5 R+ h9 A
    <li><a href="#">论坛</a></li>
% c4 [! ~- H$ Y& K" l) M5 w    <li class="menuDiv"></li>
$ n* B- y' m/ l1 S    <li><a href="#">关于</a></li>2 y; q) N. }; q: K5 b4 x" D+ \- M
   </ul>
9 O( Q% k7 z: v8 W, r. S' C  </div>6 j# W% h( `* l" K
  <div id="banner">1 }( L, N1 E8 V1 ~5 ^8 h+ l- \. A
  </div>: j6 Y* |- W$ N) E
  为什么要这么写呢,因为对菜单使用列表<li>形式,可以在以后方便对菜单定制样式。8 b+ \  t  G; z% Y! u
$ a5 ?, \8 @0 T+ B* {3 X: I
  而为什么要添加以下代码呢?
0 s1 c0 d+ b' ?! p  <li class="menuDiv"></li>3 y9 y' G$ s3 A0 b+ }$ l- j  s, S
  插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式,例如预览图中的竖线分隔。8 M. ?# u: C+ [& l

; E( l0 d0 I0 y3 I  然后我们在css.css中再写入以下样式:* A8 d( a3 X  |* ^, m
程序代码0 G+ X3 U- V( f1 G/ K
/*页面头部*/
* w6 o) Q- _* ^; U/ o( |- J#header {background:url(logo.gif) no-repeat}( v% e( X( B/ i# x- o/ g1 @+ ?
  样式说明:# Y# C% X2 }9 b6 I* n
  #header {background:url(logo.gif) no-repeat}
' `) c" _7 [9 G  给页面头部分加入一个背景图片LOGO,并且不作填充。8 i6 @+ X! d) V1 }$ n9 C; t

! f2 e) p5 v' [  ^' [  这里,我们没有指定header层的高度,为什么不指定呢?
+ s9 A0 H2 e$ Q; W+ e; w- {% g6 q: U- R- c; z( n
  因为header层中还有菜单和banner项,所以层的高度暂时是未知的,而层的属性又可以让层根据内容自动设定调整,因此我们并不需要指定高度。
( @9 ^0 E9 U/ z$ n$ c7 C) l; ^  r+ I- R' Q$ }6 c. K3 w
  * 接下来,我们开始制作菜单,留到下一章,教程中相关文件请到下一章下载!
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
返回列表