返回列表 回复 发帖

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

  当我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了。
) l. m2 ~% A& @' G3 e/ d. [8 |! I
  在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把css.css中的样式全部清除掉,重新写入以下样式代码:
+ x+ Q& _8 C$ l0 v- k8 D& b程序代码
3 H2 P  L' r5 }# z9 V$ c) s/*基本信息*/: \7 P8 ^1 C7 b" Q$ V4 ^, l+ D
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}# N( L% @# K0 B, a2 d1 b: x2 l
a:link,a:visited {font-size:12px;text-decoration:none;}! I! s! b. z# @% ^
a:hover{}
, g# @# p& t7 s- Z% G7 ?, C0 G, F
/*页面层容器*/
! z  ]3 d5 M5 L& L' T0 E#container {width:800px;margin:10px auto}
$ I! f* p; @- X+ H" s8 n& t  样式说明:
* p6 V) E, J5 a( x& v* h( d. u2 l: K5 O) n
  a:link,a:visited {font-size:12px;text-decoration:none;}  u+ v( C* \7 u1 H& f1 ?
  a:hover {}
* m6 e2 C$ B& x4 f" z1 V2 A% Y( d" V0 \/ @/ G; N
  这两项分别是控制页面中超链接的样式,具体我就不说明了,请大家参阅手册。
" }' P7 }3 {% `& C; u6 C6 t+ A% v' S2 X
  #container {width:800px;margin:10px auto}
' l- |# k& P- @( ]$ P# Y% A
: m% _& `$ ?2 f8 J, _. e4 \  指定整个页面的显示区域。
* e5 X5 x+ W5 J( Q* s  width:800px指定宽度为800像素,这里根据实际所需设定。
  B6 A* }5 X) @7 N, w# K4 ^' D  margin:10px auto,则是页面上、下边距为10个像素,并且居中显示。5 f0 B; W' |- ]- @) ~2 F0 z/ D
  上一章中我们讲过,对层的margin属性的左右边距设置为auto可以让层居中显示。
. H! j/ o9 G1 Y  B/ J
& [/ I  l( V2 o5 |  接下来,我们开始制作TOP部分,TOP部分包括了LOGO、菜单和Banner,首先我们要做的就是对设计好的图片进行切片,以下是在FW下完成的切片:
0 ]6 i2 p& _" T9 Q5 G
" m$ o6 r/ ~) ~7 j& v0 S; M- a8 }3 W7 ?1 z' W
( z* a8 ^* b5 _, n* Y; O
我将TOP部分切片为两部分,第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色,这里我于是将这一部分保存为GIF格式,调色板选择为精确,选择Alpha透明度,色版为白色(此处颜色应与背景色相同),导出为logo.gif,图像宽度为800px。
- X: [0 P: B  n7 `+ O" z/ v
4 G" l; Y; m9 ^5 o$ r4 I  到这里,有的朋友就说了,* 为什么要使用GIF格式?使用JPEG不是更好吗?
$ ?8 j1 y+ r" t6 K, z) _$ l+ a: C! s  因为GIF格式的图片文件更小,这样能使页面载入的速度更快,当然使用此格式之前必须确定图片并没有使用太多的颜色,当我们使用了GIF格式时,从肉眼上并不能看出图片有什么太大的变化,因此这是可行的。
" w- A. K: ]- B9 b/ I! k
' s8 Q8 F. l" S. Y: J* E  * 接下来的Banner部分还能使用GIF格式吗?
* ~; Q% F; k% D# ^( F+ c  }. O  答案是不能,因为Banner部分是一个细致的图片,如果使用GIF格式颜色会有太大的损失,所以必须使用JPEG格式,将文件导出为banner.jpg。" c5 E% X4 w5 N1 `; F, Q
6 `+ Z0 S- b/ r/ g! X7 t1 X
  * 合理的切片是非常之重要的,因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。
0 f4 P9 N+ w/ O1 c5 ~9 |  R8 n
: L) l9 v" L/ M3 M  切好片后,我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下:
- {; x  w# C" X6 k9 |程序代码  I; n% B2 }, z- ?, T# W4 Y1 ]( `# g5 `
  <div id="menu">1 l3 x4 z+ Y" d- E. }0 Q
   <ul>
$ X( P  `7 @6 y7 H    <li><a href="#">首页</a></li>" g6 X1 Y9 l$ c4 R
    <li class="menuDiv"></li>
' A5 y$ p6 {7 m: X) a# @    <li><a href="#">博客</a></li>. Y3 l1 l: ~4 c4 L. w- t/ {! B8 V
    <li class="menuDiv"></li>
2 C6 @( G# Q7 D; Z    <li><a href="#">设计</a></li>+ L% r9 P1 v. L; Y
    <li class="menuDiv"></li>
+ L" T: s5 I* O' v% n    <li><a href="#">相册</a></li>
4 c  `" y5 \: E6 f1 Z    <li class="menuDiv"></li>
; D. e4 C1 Q- y9 c- z6 {    <li><a href="#">论坛</a></li>
$ Z1 w% u  Q6 `8 x7 i0 {    <li class="menuDiv"></li>
) k9 _! E1 K. x    <li><a href="#">关于</a></li>% N4 X# ~7 _; n! n" J
   </ul>) h* s. Z( k8 M& w8 h# p
  </div>) R! C. E# Q1 u9 ^% ]5 p, Y
  <div id="banner">& k* O/ n. e" V" B6 x0 a8 N
  </div>3 h- X5 O$ s- Q
  为什么要这么写呢,因为对菜单使用列表<li>形式,可以在以后方便对菜单定制样式。( b5 f' r, `6 M! t
  ?" i9 H6 v- f$ B1 p2 R
  而为什么要添加以下代码呢?
/ {. y& x; F. D2 v/ G  <li class="menuDiv"></li>
, F$ n% ^* i8 P, a  插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式,例如预览图中的竖线分隔。
6 `/ ]$ n; p) E9 h- H& u. ^0 N) ?2 W3 \, }! p
  然后我们在css.css中再写入以下样式:* ]+ W) ~* u- N: V* g
程序代码+ z  E. W  ~, c) d
/*页面头部*/4 H! _9 x6 z. \1 ?, R, R' ~
#header {background:url(logo.gif) no-repeat}! u5 N; D% R  J8 h; q! m9 u
  样式说明:/ j6 l" F3 ~" P+ ?
  #header {background:url(logo.gif) no-repeat}" S2 M, k3 y. d% Z
  给页面头部分加入一个背景图片LOGO,并且不作填充。
# \# r& Y% b* c' c
+ l( d. x* x6 K  n  D  这里,我们没有指定header层的高度,为什么不指定呢?
$ }' s( G  c' F' U* W% |& ^# c2 m3 M" v3 B" J
  因为header层中还有菜单和banner项,所以层的高度暂时是未知的,而层的属性又可以让层根据内容自动设定调整,因此我们并不需要指定高度。6 {8 b8 Y0 N  p5 y
+ l4 m9 t% u: o  A
  * 接下来,我们开始制作菜单,留到下一章,教程中相关文件请到下一章下载!
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
返回列表