返回列表 回复 发帖

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

二、写入整体层结构与CSS3 f  y6 a% k0 S% U5 l" m

; {2 A1 Y- d5 A2 n4 d; U$ ^  接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:
) T, Z# |/ j8 v$ A' N程序代码. R; L/ N/ V, g4 r- _/ H- L+ ^9 ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">- e1 T5 J. T4 O! A( I
<html xmlns="http://www.w3.org/1999/xhtml">, s% @8 a2 L9 Y9 Z# S
<head>& t! T1 c! l, }$ O$ b
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />% H, G+ l0 |1 }
<title>无标题文档</title>
7 L6 `1 G8 h% K# V( g<link href="css.css" rel="stylesheet" type="text/css" />5 t* Q, G4 b  @! a6 ^
</head>
4 A! T# [% f2 c0 }# M* \. _7 o" k2 u% v+ A; x: H( s
<body>& b  g$ y6 [8 W- g
</body>4 k* _( b! @) F8 t4 K3 Q
</html>% L: E* B! U2 o+ n) S+ N

; v8 n4 I$ E  D  这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。; U+ D, V% b' h: w" A- h2 e

0 g1 j; j5 r: T8 V2 [  下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:1 R7 Q) I1 s' z5 z
程序代码: \0 F5 R( j" s1 o( D

6 l4 \9 k  w# O: {' i9 [% J# U<div id="container"><!--页面层容器-->
" G0 ~6 @+ v) R! Y5 Q  <div id="Header"><!--页面头部-->
0 [2 x4 R  A1 a5 T0 ^; a  </div>
6 z- a6 S( E$ I) s8 ~) g( h% z/ C  <div id="PageBody"><!--页面主体-->! }- f+ d/ G8 J. b6 V$ e
    <div id="Sidebar"><!--侧边栏-->
( f9 d8 B- h( L) O5 s9 Y3 C    </div>
/ F  ?4 Q6 }$ M2 n/ \) h    <div id="MainBody"><!--主体内容-->
+ i# d  B8 Y. e    </div>' U/ A  v( b8 H2 x' B/ m
  </div>
4 i( a0 H9 U% g7 W3 |  <div id="Footer"><!--页面底部-->
% u/ C  O, ^" K4 s5 O& H# l# U  </div>
3 V  L& p6 w) ~6 z- ^" X</div>
3 _3 x. k1 I' i9 ?2 s# A$ W) B) @
, m( I* ]$ G& _6 G  为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:
) v8 a0 X2 Y, C# t" j- n, f; _( i. B+ D" Z, }' _  t4 ]+ q
程序代码
( a5 N' r/ \8 f, u" y5 v: z% U4 t/ F: I1 b3 f" U8 I, H
/*基本信息*/
3 i5 P4 A* C# W9 s  wbody {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}3 Q) f1 y) S/ X6 H1 h) h8 O

. O- L; y: q" U/ h. {/*页面层容器*/8 r0 c' i% f) s7 C" z
#container {width:100%}
5 g) R: t- d, O% `3 `: D
. ]( K1 z/ m5 S  ^6 f/*页面头部*/
+ |7 R7 ^$ {  P' l' x#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}6 q# F) d) y& }1 m# e& t6 `
( ~- j) [" Q$ ~( v' C
/*页面主体*/- |/ a0 z& N! t  V7 ]* f
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
8 I. ?0 }3 z: D! N3 p- \5 I7 d* o8 e, L" k3 E: s0 W$ ^, N
/*页面底部*/
  E& B) F. k. e# y! _! \, _#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
3 ^# T. G. i% t% J/ z1 \+ |' s4 o* Z6 J1 e
  把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。. Z5 t4 N8 m# `  Q) D( b7 w, Z
  关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):6 S4 q2 x. U8 V% j  b# k
9 F9 D7 D# D3 t8 g
  1、请养成良好的注释习惯,这是非常重要的;
) z: o2 \' R5 |; j1 t6 Q( G7 V/ k% [( j) S- }0 V% M9 [1 t- c0 n
  2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;, e: {$ \, z' h4 @8 W3 t, n9 F5 P
" I. T3 f( P( Z& V2 \9 F
  3、讲解一些常用的CSS代码的含义:2 [  U5 i* [2 \& a$ m3 c

4 s# t  p0 W& s5 r+ J    font:12px Tahoma;
  Q- p2 H$ K* X7 q    这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;
1 C# A, i! k- o* b$ M0 o! s& X& x9 z% w
    margin:0px;
$ ~7 s& y8 g" a4 p    也使用了缩写,完整的应该是:. ]" G3 e8 {9 e4 |" n
( o4 D* `- K+ _5 \$ y/ n! Q
    margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
. A3 v6 Y) D  ]/ g  h    或& r: h! C3 A. y- n" N; E0 m
    margin:0px 0px 0px 0px% W' v. O% |/ I) E; C: C% {
) m0 t3 e% ]% I! S& [) C
    顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);
- c: n% J' f0 v/ }, A9 T    以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,
, [8 R& [( l/ s0 a$ s' }    另外还有以下几种写法:3 ~. D, S- O( p* X1 ]) H+ @- O* r0 U6 g
    margin:0px auto;2 Q  x9 E0 u9 y- R* X
    说明上下边距为0px,左右为自动调整;
2 f* E* U4 j+ v, U3 ^7 C+ b    我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
; L1 j5 X2 Z( m* o1 X' D3 E1 s+ i    只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。2 a9 |. U8 C; K) t. m
: R. O6 \- f/ e- J  p
    text-align:center; E: |" H, a+ D) k
    文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。
3 ?! E# i9 t( Q1 J+ N
2 _  a4 F5 W9 ]3 i- c4 S: ^1 h6 j    background:#FFF
8 ^1 T* N. x8 T" Q    设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。
; E; g5 ~! G  F( B+ i    background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:: \( |7 o* m, B2 N
    background:#ccc url('bg.gif') top left no-repeat;' S  J2 o/ q: Z3 Q
    表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
" e, J( \  G6 [5 M$ r4 T6 [    top left- ^9 j2 C0 z! j
    表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
- G! d# E9 x: U" s5 E    top/right/left/bottom/center9 u- Z3 Y" q: `6 ^8 G( Q" ?- z/ {
    用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用: W) A' f3 T/ m4 v# y" A3 b1 y
    background:url('bg.gif') 20px 100px;
, s% n( m$ ]2 N' k    表示X座标为20像素,Y座标为100像素的精确定位;
% o3 b; H5 k& r) {    repeat/no-repeat/repeat-x/repeat-y& G9 D8 s& Z7 \, d
    分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。- U# h0 I% U& G9 G
1 [- c4 E( Q! s* K2 h& `3 S
    height / width / color / p  f. Y. t# b
    分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
5 h0 V/ O# \8 r' s' U- f8 P+ T! [- Y& ~5 r
  4、如何使页面居中?
/ G3 ^+ x( g: S1 C, A    大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?
6 S* i8 ]# Q3 |    是因为我们在#container中使用了以下属性:
3 w7 C- q3 O( i9 N/ m7 E" {! }    margin:0 auto;) j( b- ^8 S) Y. i5 ^2 x! e6 s; w; D
    按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
1 ]" {% K& x* [' D    如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。
* u' m1 T& g; s9 L) w7 d4 k    通过margin:auto我们就可以轻易地使层自动居中了。' m9 X0 o+ R; P1 \  y$ }2 }% @5 y/ a, L

: o2 D+ P. `5 U: z3 A) t3 W5 B  5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册。
怨去吹箫,狂来说剑,两样销魂味。
返回列表