返回列表 回复 发帖

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

  当我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了。/ [: [* r& L% I) v9 e
) V# R( E4 ?4 c9 q" W
  在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把css.css中的样式全部清除掉,重新写入以下样式代码:+ W! V0 V5 Q2 m0 e$ H9 u( q5 g0 J
程序代码
0 v7 p7 F5 B4 h/*基本信息*/, c7 g, C4 [" K+ e) L
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}* g# q) f, q7 T, j
a:link,a:visited {font-size:12px;text-decoration:none;}
- C4 E& M; l3 Y0 @$ ~a:hover{}
4 u/ i, Q- H' Q# z# J
  \9 q' Z" d% y3 S. f8 i/*页面层容器*/
% q, h) N1 W( Y0 g! B( b4 x#container {width:800px;margin:10px auto}
3 \3 p$ H5 ?* j7 e) F- y2 q  样式说明:, R: L, A5 c+ W4 r* A
) b2 k! f9 O" D2 W& Y
  a:link,a:visited {font-size:12px;text-decoration:none;}/ Y' `2 j6 K3 y/ w
  a:hover {}1 l1 q/ y, B0 u/ h& L$ H

4 }' I6 ~% l- p8 i* v3 m  这两项分别是控制页面中超链接的样式,具体我就不说明了,请大家参阅手册。
5 B- k9 e6 P1 ^2 N1 X2 ?3 |/ x; Z7 P% A4 {/ \" M+ |/ C
  #container {width:800px;margin:10px auto}0 P1 P6 ^% Y6 L1 b8 P: R2 z
& Q+ L2 y& c% V2 ~2 G  L2 `0 T
  指定整个页面的显示区域。4 G8 N- {& f; g5 R) `
  width:800px指定宽度为800像素,这里根据实际所需设定。$ H% j* p5 a5 _) R5 O* v7 M, j
  margin:10px auto,则是页面上、下边距为10个像素,并且居中显示。# O1 r) \" k- z9 \  F
  上一章中我们讲过,对层的margin属性的左右边距设置为auto可以让层居中显示。
4 {& ]( a5 P. f% J6 R; y- w6 B
2 T' l0 n1 Y1 a! t! B  接下来,我们开始制作TOP部分,TOP部分包括了LOGO、菜单和Banner,首先我们要做的就是对设计好的图片进行切片,以下是在FW下完成的切片:
( W+ D4 Q! }" g  J7 |$ T4 b2 w0 D# m' Q0 q/ ?3 g' Z" o

( i  v1 X4 ]0 K* p. s& [) n, C5 I# v' X
我将TOP部分切片为两部分,第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色,这里我于是将这一部分保存为GIF格式,调色板选择为精确,选择Alpha透明度,色版为白色(此处颜色应与背景色相同),导出为logo.gif,图像宽度为800px。( n; j3 O, N8 b& G$ q6 R

' w3 u2 |; q3 h6 c$ F  到这里,有的朋友就说了,* 为什么要使用GIF格式?使用JPEG不是更好吗?7 y& r# Q' }* D. Z
  因为GIF格式的图片文件更小,这样能使页面载入的速度更快,当然使用此格式之前必须确定图片并没有使用太多的颜色,当我们使用了GIF格式时,从肉眼上并不能看出图片有什么太大的变化,因此这是可行的。
. |% k8 S4 B: ]* I2 n' U
9 ?( I; m/ }$ ]% x8 ^& u  * 接下来的Banner部分还能使用GIF格式吗?, K+ ^2 Q( t) W$ B" e
  答案是不能,因为Banner部分是一个细致的图片,如果使用GIF格式颜色会有太大的损失,所以必须使用JPEG格式,将文件导出为banner.jpg。
$ x% X# d8 ]$ {. v8 ]5 ], x
3 \* ]0 s# S/ r7 E! V! Y$ y  * 合理的切片是非常之重要的,因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。
9 u5 T0 z/ S" ]; v2 G% c; u! ?, X8 f; L
  切好片后,我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下:* @  s8 L$ }6 U! z4 a% b/ N% @1 ]
程序代码( R  q  m9 P1 K2 q# ~! Q2 A& p
  <div id="menu">3 s5 A- s/ T4 i9 t
   <ul>& m! v  g, c; l
    <li><a href="#">首页</a></li>1 D; F0 v" A! D
    <li class="menuDiv"></li>) [2 z9 o* E( O& g, F1 B: ~
    <li><a href="#">博客</a></li>
9 J) d* n- V) E8 Y% e2 D* [    <li class="menuDiv"></li>* _, c, w4 r- W1 Q/ N9 R
    <li><a href="#">设计</a></li>: V$ @$ D+ C# a; b+ G. n
    <li class="menuDiv"></li>
4 f8 x" I. a1 d/ \  |1 d7 s    <li><a href="#">相册</a></li># l2 i% \* u2 S& G% K8 y- f- j
    <li class="menuDiv"></li>+ w5 V5 d. `+ |" ?. v2 Y: X
    <li><a href="#">论坛</a></li>
9 f% w$ b. @1 F/ a  _    <li class="menuDiv"></li>
/ s' N4 o6 C9 v% F7 V    <li><a href="#">关于</a></li>- @7 x- [3 @8 q0 @" w3 U3 e
   </ul>/ T8 u- p  b( h( I) C' ]
  </div>; C2 c4 Z3 j# @  q, X! N
  <div id="banner">
5 T8 P9 ^* q  s4 M0 B9 b/ t9 C  </div>
5 O0 ]% i9 L' N/ T' a# |8 N  为什么要这么写呢,因为对菜单使用列表<li>形式,可以在以后方便对菜单定制样式。* X. X, ^; z" J8 ^: j% x/ `( g
# b& L+ W$ u5 F' A% c* o" ^& f
  而为什么要添加以下代码呢?' p0 \9 d* X  d) Z0 `2 M1 A) B
  <li class="menuDiv"></li>9 [( K9 u6 m  c1 Q2 \4 T
  插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式,例如预览图中的竖线分隔。" {; [7 ]) k3 o( k/ i
0 {; [! P, C, s$ i9 W9 Q
  然后我们在css.css中再写入以下样式:& v$ H& s8 \0 @7 e! q+ b( _0 c
程序代码; X- v* b1 `1 |4 y$ X- }, o( g
/*页面头部*/# L/ }4 K- Z( e. J2 X* |
#header {background:url(logo.gif) no-repeat}
7 P0 B4 E% ]3 L9 w: e9 P  样式说明:) g% i( F6 R, h0 G" a
  #header {background:url(logo.gif) no-repeat}! U) U: @5 Z2 `& T( d
  给页面头部分加入一个背景图片LOGO,并且不作填充。& {- r! k% `+ {

3 t1 P* e( z) V+ G  这里,我们没有指定header层的高度,为什么不指定呢?# m6 R$ `* j5 u3 j* O: `0 H

  \# ~8 P" U5 f) V# S3 U/ L" K- I  因为header层中还有菜单和banner项,所以层的高度暂时是未知的,而层的属性又可以让层根据内容自动设定调整,因此我们并不需要指定高度。
; i$ \" J6 ?6 _% M/ b+ S0 E( I% _" H- \$ t1 x( U$ K) D
  * 接下来,我们开始制作菜单,留到下一章,教程中相关文件请到下一章下载!
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
返回列表