返回列表 回复 发帖

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

二、写入整体层结构与CSS
/ u& z" @7 k$ P# R/ C5 R. O6 W6 L* E
  接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:
$ @& U; U8 `+ I" U程序代码. j* d& r# q3 l3 @* o, T: w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">/ A" r1 e+ Y/ A# Q& v1 T1 @5 j
<html xmlns="http://www.w3.org/1999/xhtml">
4 i* o. B0 |6 M# c" `; e5 n; n9 L<head>
0 K, j  d1 }" V4 K; h# ?<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />8 k7 s3 M9 t- S: l7 C/ @
<title>无标题文档</title>
; I5 o# s6 s; R2 p. C, r$ {6 x0 {0 e- S<link href="css.css" rel="stylesheet" type="text/css" />- t) I7 w% m2 g
</head>
- o% ^" B' Y3 @
  Y& P. N/ N  t/ N( P<body>
/ }6 R' k7 ?% f</body>/ G9 |! U" r0 w! K
</html>
: k! Y, \. ^: s2 ?1 }/ J8 J7 z2 u! e5 b0 C5 r6 A# o3 w5 D4 ^
  这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。
* J& `' t* {" C# d
+ T+ W' _& ~# n2 l# y! z  下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:
  e' F$ S5 c( O; f  n4 O程序代码( w7 X! W, s" o3 B& q9 D
" \  G0 J1 y9 D
<div id="container"><!--页面层容器-->
6 l, d" q7 ^+ j  <div id="Header"><!--页面头部-->
- r# |* I, q, a* q; V  </div>& d2 J. [( ?" _" C
  <div id="PageBody"><!--页面主体-->
0 B0 e& k* p; P8 ?1 _) j7 G6 P    <div id="Sidebar"><!--侧边栏-->
3 S( h* c* k* C2 L2 `4 l    </div>
% Z. k4 T8 Q( o) Z    <div id="MainBody"><!--主体内容-->
0 l' c# Z" k+ H# d    </div>& _9 k0 U$ t& Y3 C
  </div>
7 z- m  E9 f, T  D+ T. M  <div id="Footer"><!--页面底部-->, K* n& T* H( O+ L
  </div>
& H5 x* w9 B7 u0 ?</div>
6 x! d! Y* t+ [  I9 f5 Q5 B& B9 z) J# M9 W
  为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:# }1 v; e& o& T
/ D9 Q* o7 h, S4 u$ |5 v
程序代码7 j7 x8 o& k5 m' @! G9 @

8 P5 X" U4 A" V/ {: y6 P/*基本信息*/, }/ w( r& P8 }' i
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
7 @5 }6 a6 B# U
4 G/ n0 b$ [. p& l! D/*页面层容器*/
) N$ W4 u* v4 `: S#container {width:100%}+ v2 I( b7 b/ r. ]) d
% j# Y5 r+ }* {
/*页面头部*/
+ O, O  R: x6 k' D' A#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
$ U. p. S1 T( u" t
' F9 }0 W9 x$ Y  y- L; X( e/*页面主体*/
: G9 _& M) I- U  t#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}3 P) q7 `. D0 a

! x$ K1 X/ q  u, ^/*页面底部*/
2 F! w( V4 y6 i, m7 f#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
0 y* w: k3 E/ \1 r
& P' x: T- d4 H$ j. {  r  把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。" F* B: v; q1 O0 @7 F! b( g
  关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):
& p3 e! f% s4 R# d* F2 r
0 x0 y  {' t2 w( |- a  1、请养成良好的注释习惯,这是非常重要的;8 G1 s  W) {0 |6 T

- {+ w1 R" a# R  2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;8 e. f0 m$ p! W# \% I& t

6 b2 v- U! _' G/ c  3、讲解一些常用的CSS代码的含义:
1 J3 }4 `- ]" x; C. g( j/ N3 }+ P8 y  U# e! k
    font:12px Tahoma;; e7 _9 `) h- I) K# M' Y
    这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;# t! c1 K; A4 ~# t
4 J- k( W; y$ U6 n, `, M
    margin:0px;5 Q6 L( z+ I/ H/ C* Z; C. y
    也使用了缩写,完整的应该是:' u$ ^! W' v) m" N, D7 E4 J
5 q: r$ U. H3 I0 q
    margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px; T# n) W; F7 v& n
    或$ G+ K  z5 v6 s7 D4 r
    margin:0px 0px 0px 0px2 c2 w# r9 F0 o( e8 o$ |
/ p# A# n8 D/ C
    顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);1 @' z1 _& I" C6 s
    以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,
7 V0 V7 v6 G3 t  O7 q2 S    另外还有以下几种写法:
5 V/ v8 v, i+ T/ E    margin:0px auto;
& ~( B. {: R9 P/ z    说明上下边距为0px,左右为自动调整;* S' d6 J: s+ C! V! ?
    我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
0 b5 ^9 D$ W9 j7 C    只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。
9 H8 M, T2 N0 o5 H
' O( J+ k7 L6 M, J! k. S    text-align:center0 H9 A' F) j- S  f' C% s6 T
    文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。
+ v; g, @& y, i& X4 E! i3 O0 V3 r4 {& |; k$ \. w
    background:#FFF
8 d! @. p, |- f) I    设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。
0 z5 G3 J4 T7 T+ a, U    background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:
" z, f7 T# s% p8 q    background:#ccc url('bg.gif') top left no-repeat;
+ B9 P# H& T" u! G% Q    表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
/ H/ ?! v: A& n4 l+ z; N7 A) D    top left
5 H3 `  L8 T8 |' S) I. q    表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。2 j/ U7 }( q* `
    top/right/left/bottom/center
3 a3 ^; {. r$ q' O    用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用4 J! F! i& I5 V( s
    background:url('bg.gif') 20px 100px;; a$ J- z. v4 ^& d# v8 l
    表示X座标为20像素,Y座标为100像素的精确定位;" M) K- ~: d0 ^! t# A4 B" M  I  X
    repeat/no-repeat/repeat-x/repeat-y
7 d& H- ~- }; w; y6 z# k    分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
, q8 _0 `* e0 R! V
: y9 h2 ^: A8 ]; U% f    height / width / color ( H& ]* _3 |3 }1 Z; c: N
    分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
! X0 f: y3 x0 c" ?. b
2 |1 R2 ?6 c" p8 m. G  4、如何使页面居中?9 d" M5 f# ?. u+ p$ b
    大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?
( `6 E6 ~: A( D% P, v" g    是因为我们在#container中使用了以下属性:
: V% v, J- ]8 A    margin:0 auto;
: i8 v3 B" S) b1 K1 T/ z& J" ~- l# w    按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
( H0 @+ \! j$ \: t. u7 u: P' ~    如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。8 o/ s+ K# E. K6 g4 @9 W
    通过margin:auto我们就可以轻易地使层自动居中了。
5 k3 t$ Z1 D0 L$ G6 R6 R6 h$ g
; B/ M0 ]+ q2 b1 @, W2 g* Z  5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册。
怨去吹箫,狂来说剑,两样销魂味。
返回列表