返回列表 回复 发帖

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

二、写入整体层结构与CSS
- |! x6 D% H4 Q* _  M2 P3 J) S
1 S5 T7 N3 _2 z' x: ?; K0 |  接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:% t' r+ Y$ P9 T* n8 R1 j
程序代码! v9 V7 a; a! V3 R5 Z% b/ @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
, q' X/ n! h  c  N9 L) B# v4 d( N<html xmlns="http://www.w3.org/1999/xhtml">
1 R9 F( z5 V( J8 B<head>  e' K& X& J" ]* ?/ t
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
. p5 S1 B* w& j5 \<title>无标题文档</title>
" v9 j! T- b8 w+ X  k: A- c1 m8 ~<link href="css.css" rel="stylesheet" type="text/css" />
$ H4 F3 J6 Y) w' r</head>6 u3 }8 ?$ G7 q' ?6 {/ o

- r5 S% \. }- n, I1 C% I+ B3 r: D2 `<body>. l" i% s4 Z8 Z9 c7 R
</body>3 X9 B- `) J& E4 b( [
</html>
1 u) [! Y% N7 h% _/ K# l* Z3 _
4 d# h: {8 r8 [8 g7 u  h) a/ |; H' {  这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。( E. O- Q+ R9 B1 [  H( o9 Y% c
' Q: v# d0 X3 l
  下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:
: o+ t5 H: \/ M1 n2 r7 X# ~程序代码
' E1 n+ g2 m; u4 Z4 u" b5 \; G, c) B3 w2 W5 @! a
<div id="container"><!--页面层容器-->8 `+ e% ?- j) l) x8 e7 c: G
  <div id="Header"><!--页面头部-->* h) A/ M4 {& \* P$ D' w1 C
  </div>2 E9 G* O4 o& d3 O- o& {" V2 ?
  <div id="PageBody"><!--页面主体-->, E+ [) h  S! G* ~
    <div id="Sidebar"><!--侧边栏-->
7 g: A3 ~. `7 F% b" H7 f    </div>/ q8 f! Y: Z4 N9 @3 K5 I7 T; D
    <div id="MainBody"><!--主体内容-->
$ F7 }  r+ F# O7 q& C4 K- u; ?7 ~4 F    </div>
; A5 r  u# D& a) \* U0 l$ w  @- G  </div>
- [3 y; F5 A# E" a  <div id="Footer"><!--页面底部-->
  K+ t, U$ C, P2 g  </div>; W( P$ @) R! r0 D% i6 b
</div>
/ A2 D9 D$ w/ M" L' n2 x' n: x4 g4 f( g
  为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:
: H  z! Q7 a! I- g) f" x, S& O
* S2 w, Q  a$ u1 U$ R3 Q4 j8 t程序代码) Z' _7 C# C; g8 K) _
/ @% K/ ^9 e( _/ h* \
/*基本信息*/0 }$ m9 `' l8 h; L$ Y4 r
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}8 |( p, M0 u$ M  G. `

, f/ S% j- Z' Z! K* U/*页面层容器*/
  c$ Z; h+ w$ o2 H/ U#container {width:100%}
; ^" ], R, c; }- a& T& C: A8 J: z1 a$ w: q+ P! H$ ?3 `. S
/*页面头部*/1 v1 Z4 L, e; C$ v2 S
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}3 Q0 u8 H, W" |7 [9 q! ~
# \& k( \; l. ~) h/ Q
/*页面主体*/
- U5 B- F' h$ z- b& ~- U# {#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
, z$ d9 d6 E! g+ |5 d# R
$ w7 _7 x/ r$ u. ^/*页面底部*/% O; _# ~$ z- y# ~5 v$ R! Q" E
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}' X  K0 n4 g! x# }; q

" u( U+ b1 l# C  把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。
9 F4 h' m2 g& W9 `2 E  Z8 I% a6 I  关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):% A' K# Q. g% B0 I8 E

9 c" y& x: U+ m  1、请养成良好的注释习惯,这是非常重要的;
$ f+ D1 s( O/ K! l% j! x' u9 S2 T, `6 F
  2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;
  V! U6 q& b3 A. n; v, u! V; b+ u1 `+ a0 u9 Z1 i; C$ B8 Y& w
  3、讲解一些常用的CSS代码的含义:
! e: v6 d' a5 _, ?/ L6 F- m
; n9 E6 h6 N1 j" N9 I7 R6 s+ ^    font:12px Tahoma;! h7 u# \6 E; ^
    这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;
+ d/ |/ R( Y1 i1 Y' g0 z5 H  g( e  g+ {9 K: `
    margin:0px;1 B1 Q( q) I( k" @6 B4 X9 p* _
    也使用了缩写,完整的应该是:
4 ^( d8 W. p  ^2 g2 r9 r4 D, S5 d/ G* d5 W( V+ ?: E
    margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px, l: i+ |- S' Z0 H, T9 V( {
    或
; I' U2 |. H) P# o) n' c8 L    margin:0px 0px 0px 0px
& B( n1 E" k% }& g( c" U4 v& I/ o% W: q( R9 |
    顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);
5 V3 C. i. @: U. G9 t    以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,) \8 V" x+ a% L8 R7 N1 E" b
    另外还有以下几种写法:, T( Z8 x5 i5 p! y: @6 r; E0 M8 U
    margin:0px auto;
. B  O. C8 w$ d% _; X- @( [7 G    说明上下边距为0px,左右为自动调整;6 }% D3 \  T% d$ X" N
    我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
' Z" R+ M3 O) S    只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。5 g9 Z! `" k4 x) G
& j- q& G: X0 B0 d/ }! S
    text-align:center6 z6 L1 {5 g& F/ r* ^
    文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。
8 n! x1 p" W! o4 r2 B" o) l. e# X5 O; q$ F. {, C; Y
    background:#FFF( Z0 k' Z. T0 I, {; a$ G7 u
    设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。
3 H6 u1 t  U$ k+ A' u    background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:; S( G, d& I# W' @, D, I7 F5 [4 A
    background:#ccc url('bg.gif') top left no-repeat;
. B& R6 Z" o7 m8 x/ g! x9 R    表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
# U2 `' ^2 n* V1 u. B" W7 [  i    top left
9 k( q3 F# I" x* b" g    表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
% i, J; w; L( t! C' T    top/right/left/bottom/center2 O) K% }# W8 b2 S+ o. H2 E0 k
    用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用7 P8 C8 `& b2 v
    background:url('bg.gif') 20px 100px;
  t  G' w6 M! \8 Y5 P1 |9 I    表示X座标为20像素,Y座标为100像素的精确定位;3 Y; Q5 R+ |. p
    repeat/no-repeat/repeat-x/repeat-y: ~+ X" S# W- W( R6 S! m0 U$ Q! g
    分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。2 l  W0 O3 [# P# v2 M& u6 x; a
" j$ Y: x( z! d
    height / width / color   U0 k) J2 k  C, V) b! U! {( T7 z
    分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。6 a' I5 `: f$ `. C& O  k, f% x' v: |: M
- H1 C9 @8 j, e( F3 g5 p) S
  4、如何使页面居中?9 S7 J# i0 V- g! G, q
    大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?; L% \( V' o6 M+ B/ b9 m3 u% Y
    是因为我们在#container中使用了以下属性:$ }% A9 |6 ?6 x" O, @
    margin:0 auto;2 R% R. y  e6 M$ i0 q" n
    按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
: W$ X. |; Z0 c' s% e5 b- k    如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。
" K- n# t! G2 y" C. l1 o3 ^    通过margin:auto我们就可以轻易地使层自动居中了。" C# F  m6 e9 I8 B, f) @0 J8 n
4 f& M3 k2 d7 K0 r8 M; \
  5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册。
怨去吹箫,狂来说剑,两样销魂味。
返回列表