返回列表 回复 发帖

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

  当我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了。
3 v! y8 x6 F" `; |( ]& ^! n) [& |, q- ?- L
  在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把css.css中的样式全部清除掉,重新写入以下样式代码:
; d5 x2 s4 L) k+ K& o& _3 P* [( X程序代码
/ @: W7 C5 I( s6 C3 k% u8 c/*基本信息*/
0 F; c0 b7 _1 ?- Ybody {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}  V) l* K1 V7 n, D2 T( N
a:link,a:visited {font-size:12px;text-decoration:none;}) K9 d  \- H2 ]7 ]& Y% p, u# y
a:hover{}
+ p  v# e- ?' s& |3 l: n3 o
) v3 d! ?+ R9 V6 _- }9 }/*页面层容器*/: v  @3 F' z, u
#container {width:800px;margin:10px auto}
  o$ [/ O/ N4 R' S$ F0 j' |  样式说明:
7 S+ v6 g  g4 v' U  |. _
# N% P; R$ m/ n/ F% ^& }  a:link,a:visited {font-size:12px;text-decoration:none;}1 ^* R, N: s; M' \' C
  a:hover {}' C' ]' O  f7 {/ `

& B% u6 t+ z* n1 d6 x( o! ^2 m  这两项分别是控制页面中超链接的样式,具体我就不说明了,请大家参阅手册。
; b7 C& m, [+ }- \6 Z% f0 ?' f
" |1 j. c0 N6 {$ a  #container {width:800px;margin:10px auto}' `/ \, A# q2 l9 p6 W8 C1 k( h
# ^3 [& ]# h' Y
  指定整个页面的显示区域。
  e; F# N1 ]8 O3 _  width:800px指定宽度为800像素,这里根据实际所需设定。8 I, J1 J) i" p* s/ W4 Q& X
  margin:10px auto,则是页面上、下边距为10个像素,并且居中显示。" Q2 g5 B, J" h3 p5 p" i+ u4 m& \9 l5 K
  上一章中我们讲过,对层的margin属性的左右边距设置为auto可以让层居中显示。" f0 ?& t, {$ T8 }: p  H# I( _

  a( c% s7 s& P- q) P8 z* R  接下来,我们开始制作TOP部分,TOP部分包括了LOGO、菜单和Banner,首先我们要做的就是对设计好的图片进行切片,以下是在FW下完成的切片:
: m0 q) h) ]' j6 Y9 Y
$ B6 j; I8 G; E5 v$ W& D- I7 g. C" [7 D
0 Z2 D5 L& E8 M$ [
我将TOP部分切片为两部分,第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色,这里我于是将这一部分保存为GIF格式,调色板选择为精确,选择Alpha透明度,色版为白色(此处颜色应与背景色相同),导出为logo.gif,图像宽度为800px。5 F* R3 V( q/ h

, s2 B0 Q- x  Q. C, m( ?  到这里,有的朋友就说了,* 为什么要使用GIF格式?使用JPEG不是更好吗?
8 D, g( S2 z  B) n  因为GIF格式的图片文件更小,这样能使页面载入的速度更快,当然使用此格式之前必须确定图片并没有使用太多的颜色,当我们使用了GIF格式时,从肉眼上并不能看出图片有什么太大的变化,因此这是可行的。/ `# r# P( f: ]0 U! v
$ O. h3 {9 H* {4 o' n/ x2 q
  * 接下来的Banner部分还能使用GIF格式吗?
1 k/ k4 }2 J( _6 l  答案是不能,因为Banner部分是一个细致的图片,如果使用GIF格式颜色会有太大的损失,所以必须使用JPEG格式,将文件导出为banner.jpg。
+ Z* {* w( F( n) w, }5 |- V. q) T5 r
5 T! _5 L4 z+ i8 y3 k, `- y0 R  * 合理的切片是非常之重要的,因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。  f4 ^2 P* w( H; B* \& d: I3 {* G
& r: ?7 \# i8 Z9 \
  切好片后,我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下:
, i5 T7 Y9 Y3 N程序代码
1 D  s' S6 `& ~% F9 V$ O* B  <div id="menu">% v7 Q" Q7 D: u) G
   <ul>
- g6 N7 n7 `( X0 u0 h  _    <li><a href="#">首页</a></li>0 d1 d2 j# a% N) C: k6 y5 G6 E9 h
    <li class="menuDiv"></li>
2 x4 z7 K$ U* ?    <li><a href="#">博客</a></li>
% `  c, a8 ?3 H( z1 g    <li class="menuDiv"></li>0 Q6 T- M( g6 d! i6 N, x- i9 ?
    <li><a href="#">设计</a></li>
; m0 e* t0 Q" d" ^$ r3 G    <li class="menuDiv"></li>
! s3 r( [- \) l9 c  |, b, F' o3 |; n    <li><a href="#">相册</a></li>; P9 Y4 _+ R; B; F: i8 p8 z* W
    <li class="menuDiv"></li>2 U4 h1 D4 R3 n. X
    <li><a href="#">论坛</a></li>
$ H% _$ t# v  J# d3 d. `    <li class="menuDiv"></li>9 M9 d% d. _+ U
    <li><a href="#">关于</a></li>
" ~( c/ t! h. \8 m, y' h   </ul>
/ ]  X( o3 C: S5 f  </div>* `+ g0 K' e* X, n- d2 `" @1 L) L
  <div id="banner">( n* _/ Y0 E) _( H7 C* S/ f- Q, g
  </div>" D% y* h2 z- A: a% l2 {7 C
  为什么要这么写呢,因为对菜单使用列表<li>形式,可以在以后方便对菜单定制样式。1 O$ o( E; V% B5 G; R% A- H
  a! L0 Q6 X! d9 v5 m
  而为什么要添加以下代码呢?# d+ G; x$ x# \: D7 \
  <li class="menuDiv"></li>) G" a7 R+ H+ c  D2 ~4 I3 H, x. B
  插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式,例如预览图中的竖线分隔。
- _9 N$ e3 X" |7 U" G! Z' m3 w" b1 g% Y: U7 G: v; a1 |0 I8 F
  然后我们在css.css中再写入以下样式:9 ]8 D1 C6 J# L! k% `# T
程序代码4 `" K* J) D$ V& w5 p. T
/*页面头部*/5 W" f' o1 \0 }5 E; m- }2 z
#header {background:url(logo.gif) no-repeat}, T6 c. |) |( Y# ~' b9 g6 }7 E
  样式说明:
: |0 T( O) z3 N. v% v  #header {background:url(logo.gif) no-repeat}
9 T0 n; W  N0 ~* E% [  给页面头部分加入一个背景图片LOGO,并且不作填充。
2 n: S/ z: \3 I3 e0 h" Y. j; p# T" P2 i! y
  这里,我们没有指定header层的高度,为什么不指定呢?
) V3 ?  m1 a8 j) X$ {1 C
1 n5 R8 I2 x3 ?  ^  因为header层中还有菜单和banner项,所以层的高度暂时是未知的,而层的属性又可以让层根据内容自动设定调整,因此我们并不需要指定高度。# M( N9 U5 _5 u0 @; U
% ~+ J/ c. e' {# _9 Y
  * 接下来,我们开始制作菜单,留到下一章,教程中相关文件请到下一章下载!
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
返回列表