返回列表 回复 发帖

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

二、写入整体层结构与CSS% ~( W6 \5 ^( M: P' V# H. [
9 |( U& D2 D; C3 a
  接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:+ x4 K! r% D" q( E8 E
程序代码& m9 N* _# O0 J, N9 E4 \- o1 C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* F; O: n$ P8 L4 i: [<html xmlns="http://www.w3.org/1999/xhtml">
5 u1 ~" U: ?7 f3 f+ s. Y  h. F$ }<head>) a7 r/ x# B1 H4 M7 _6 e, Z
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
, @; t' R. ~9 g' a<title>无标题文档</title>1 A: o* |+ S9 Y, k% j: M* ?7 r- y
<link href="css.css" rel="stylesheet" type="text/css" />& {& i; D9 x1 g3 @" v
</head>. J* [* m7 h. [9 Z+ e, j) y+ o/ U
" E2 l- k6 c+ B9 C# ^* n4 _& k- L
<body>+ _# F! Y) Z: e" o9 O
</body>3 U, n9 O) `- b* Y1 {7 F
</html>
5 t) E( \  m" y7 o
4 E4 {, Z3 P) x% L5 j7 D  这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。
% ~& }# o0 d* _' I' D. I; e. ~
* i0 @. r$ Q1 O2 l- ?  下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:; ^& k$ ^* [. I& K/ c) D1 c
程序代码
" r! A# d9 S& Y1 b( W9 j
# N* ~- V0 n. G/ F% K# C+ h<div id="container"><!--页面层容器-->
! l! ^9 A3 v3 A1 u* K  <div id="Header"><!--页面头部-->7 X% ~9 F4 R9 X. ~4 S6 L* O
  </div>
4 x# \; j+ k6 `( _0 G. Z0 @' ]  <div id="PageBody"><!--页面主体-->' }& Z% y, y' p
    <div id="Sidebar"><!--侧边栏-->8 e8 ^8 J' {* |) N; _  o1 n+ F+ F* z
    </div>
* {$ \3 R6 U, b9 J' a    <div id="MainBody"><!--主体内容-->
" p' B8 J$ M6 Z, q8 v# j    </div>1 i( R3 e  o8 c7 m
  </div>
. ^5 p+ z, L* W/ B* i  <div id="Footer"><!--页面底部-->
8 ]2 o" H- P( k& S0 b1 F$ w  </div>
  d4 G9 e0 j7 s5 R) G</div>8 J6 N0 Q" y. Q6 `+ T% b

$ j' a* V# R, @3 H  为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:8 C( H( G: o! h" |: \) N
% N/ C0 Y/ U' U4 k* [  o1 p, w4 U
程序代码
8 t; T9 A, s# q) u' h& ]# T
& j, S8 P* G7 B3 A# ^1 ~/*基本信息*/
8 H: r; q# _5 [% ~2 Ibody {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
' t5 u4 ^0 \2 E* F& i7 k! U' p) F# g
9 a% a2 G, ^+ |) ?/*页面层容器*/
( M$ t! m8 j/ q$ J  [#container {width:100%}& S! S3 B) G' H/ Q+ x
: Q9 Y7 O- |* V6 L4 [- Y' ?0 _% d
/*页面头部*/% t: i1 I+ s1 R* H$ _/ f9 v0 F
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
$ M4 `) D5 y0 [' x
7 z8 S" R8 s; @* _/*页面主体*/
: l, H$ a& ?9 J) C5 `#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}, }8 S! c' L7 r9 Z7 Z2 m4 D

( U% T9 ~! D/ g& S8 r$ J' B2 D/*页面底部*/
: G, [/ J9 c* y) n2 a/ v' l#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}7 F' {3 u  D/ T3 l# ~9 f% R3 p9 h$ W
+ q, @1 |* `& |  o. c- a# m+ h
  把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。
& P7 b( G2 v5 b, ]: T* J  关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):+ U9 o! p% Z+ L  C' R. S3 C+ ]# o
% }; ^2 k9 s2 d( {) L
  1、请养成良好的注释习惯,这是非常重要的;  X, e: k; ]* B) P- i: R3 k
: G3 Z' x9 n3 b2 u7 B: F
  2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;
7 S, Q, R' |; m$ |5 ~) Y. r. Y3 h5 A( m3 H
  3、讲解一些常用的CSS代码的含义:1 I/ L( s$ U& x6 h' o
* M! u, B8 L8 T1 f& R/ S3 s
    font:12px Tahoma;
5 E0 |' V5 u. a/ o4 P/ p3 G1 g    这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;, Q3 T4 f% r" C0 [: H6 W

4 z6 Z9 p# ]* T% [3 Z6 }    margin:0px;
2 D( Z: w+ g# F# K! `. K    也使用了缩写,完整的应该是:
+ ~/ {7 a3 y+ _
. _# X4 M) U7 A4 L( A- L9 P    margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
" M! w  ^' _/ c, U& z2 _: [4 c    或
* K: ~. D$ X  w, c9 B2 w    margin:0px 0px 0px 0px
4 Y' g( Q6 K- [( t! \3 m( \5 _! h3 j+ H& Z
    顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);. e* `" Z9 C+ E% x
    以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,0 H8 @5 s# O9 x
    另外还有以下几种写法:7 E' I) ^9 z" i( }1 l
    margin:0px auto;& v0 ~; M$ G! k) V1 b
    说明上下边距为0px,左右为自动调整;
5 u; k1 c) w0 v- N. F5 J- f    我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
. @- G4 [# F: L8 ~    只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。# d: ~/ I: O- {" X7 z  w
! v& q- a. c6 m! b7 m% B- f# n
    text-align:center
  S) M+ |. [8 i    文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。* g' @) k8 c( X( D
8 p+ G+ s7 v9 c5 l
    background:#FFF4 B- R  W( ^5 [0 c/ J4 R
    设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。& M3 G) m4 d' P( B
    background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:
  T& X' y4 i4 \9 P    background:#ccc url('bg.gif') top left no-repeat;5 K9 N$ c! V# h3 W- ^/ `9 j7 c5 V
    表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,$ s7 f3 B. ]( i; ^& o
    top left' o7 t) I$ y# j5 Q9 f5 q1 `! b' u
    表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
) w; f  W7 |; A, e  M. a    top/right/left/bottom/center5 l# E* e# W7 D- ~, r+ \/ ]
    用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用
1 [. V3 q, M) w    background:url('bg.gif') 20px 100px;
5 F+ F1 X0 g/ G    表示X座标为20像素,Y座标为100像素的精确定位;
. o! A$ U/ T  V' s! g$ i$ J2 O0 B& d+ I    repeat/no-repeat/repeat-x/repeat-y
2 {# X: M2 u2 l% S7 `    分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
! }) J5 K  l" M- S7 W
. v4 o/ |- E# p4 K5 H2 E4 W4 K5 k  U) K    height / width / color + k/ ?2 K: ]4 }6 u3 K% k
    分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。' N1 W0 M/ v8 N! `/ f

: N1 O: [1 i; ]7 X5 E0 o  4、如何使页面居中?
3 k! {, b7 _' s7 r0 ~3 H' z; k    大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?
# `7 {$ l: _2 {9 {# n    是因为我们在#container中使用了以下属性:) @2 H" d: Q9 C9 A& \
    margin:0 auto;
% v1 ^( ~3 m" e, V    按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
+ i+ v2 ?6 Q: J8 O/ N- C# \/ q    如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。' ]$ \. w8 f3 W5 s
    通过margin:auto我们就可以轻易地使层自动居中了。
4 `8 `+ I: {) s6 |  [
( _2 T1 V7 v6 I8 t; }$ c+ r  5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册。
怨去吹箫,狂来说剑,两样销魂味。
返回列表