返回列表 回复 发帖

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

二、写入整体层结构与CSS
/ m2 t" F  L$ O5 ?- n
, o% h3 @, B1 k' B& P  接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:! L" b% I5 p& @% m6 |3 T8 l, [/ J; F
程序代码
4 z% a) c; R) N! X1 v" W# X<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
8 y/ q4 y/ _; C$ S0 c0 a1 N<html xmlns="http://www.w3.org/1999/xhtml">. y! Z2 y/ Y6 u4 h
<head>
1 ?" F/ H. A) F7 Y% H3 W2 ?<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />! J8 a0 z+ w  I; X2 k+ d2 O
<title>无标题文档</title>/ c& f% x. x2 B6 f4 g/ C
<link href="css.css" rel="stylesheet" type="text/css" />/ h! b- z6 I. m- V3 U2 h6 P
</head>
* y3 ~( T; P- P5 e! q4 ]9 h
1 D4 |: }- e1 ]2 U<body>
# l: P8 k% @5 I% K* z</body>
7 r/ y% a3 t; |. o8 E6 e</html>& G" o/ ~9 C% R" [7 r5 g$ W$ h

' }" v+ i$ E. q  Z, j( L. L  这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。- r2 ?9 x% U2 ~  {4 Y; h( t7 b( B
0 n( n% q- r# m* p" V% _% i
  下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:
) u6 L/ d/ w3 l5 s1 i/ ?2 L: _程序代码
; v- @& }8 e8 U1 Q
9 I- K2 t8 X/ I6 c. A  Y: a<div id="container"><!--页面层容器-->
+ x" L. g$ E3 G) ]  <div id="Header"><!--页面头部-->( _) Q/ u* N4 f! x6 D5 ?; L: q
  </div>% F% ^; [* {" X3 F1 Z/ f; H
  <div id="PageBody"><!--页面主体-->2 w* R5 Z9 Z  p# F  ?* p+ Y
    <div id="Sidebar"><!--侧边栏-->/ R8 O! W  @$ a
    </div>- c  a9 o/ Z5 b
    <div id="MainBody"><!--主体内容-->& g; ?! P5 w4 ^) T
    </div>2 m) O# S6 n2 \: J8 x
  </div>
5 y5 }' g9 [8 x0 f2 [  <div id="Footer"><!--页面底部-->, ]1 z% h# M$ Z' }5 b" q
  </div>- Q: l& p6 R6 D' G& L4 f' v3 d- ]9 \
</div>, S: m, B; i5 Y, a

3 \$ L! Z7 d: q- K" q  为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:
/ p4 e! [8 _+ j' [- O+ t- }. k5 k7 f: ^$ A- k  R
程序代码
' |' B5 s7 a6 G2 V( X5 o, _" b: r( L5 `5 T3 n
/*基本信息*/' Y& e! G( G! V  O0 a
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
2 f' S- ?. A% H5 b# C  O
6 |/ U: A. E( P4 Y/*页面层容器*/
: f. g* S' k! C+ A+ `% I" ^; O# G#container {width:100%}6 Y. T9 @2 G6 ]+ f

1 T5 ^; Y4 S* [. d/*页面头部*/% d- C3 l$ ?$ @0 @3 u
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}0 n0 L3 ]& b$ `

( V( a3 @1 z; o7 u2 ^/*页面主体*/
# F  E( N9 G+ \+ X6 |#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
& ?* P7 _: A7 ?% `& I- a+ l9 H) h8 ^/ D6 `' Q# V+ A- w0 `' p* S
/*页面底部*/# \, F1 O. }1 m6 N
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
6 M* M& F9 k+ v6 H. N/ h# O
7 U1 t' H' M3 t, ~2 Y4 v; O" y  把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。; Z! o2 U5 a7 K
  关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):
6 @+ e7 ?0 Q: N/ h3 t8 D9 f( X, @2 l$ |2 L
  1、请养成良好的注释习惯,这是非常重要的;  X- [; {; b7 n( b# U+ c! t

% z) p6 {  \# S  2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;2 y9 w9 Z  e* b( h+ n( F" G$ D* f
; c# {3 E8 U& g+ s1 t6 u. ]
  3、讲解一些常用的CSS代码的含义:; K& G3 T- E, O- S
* y7 B9 S3 ~3 |, ?+ \$ O6 z( Q  n' K
    font:12px Tahoma;
. E8 D) C6 e" x) a6 X$ X' y    这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;; X7 l- D! r7 i6 @! Z/ T
* e* M1 _9 j! g( ^
    margin:0px;
( a7 U8 k, ?1 |5 w& y/ \9 _4 [5 w    也使用了缩写,完整的应该是:
% j2 v2 I& @7 R! M
2 \1 T6 I) x1 b+ _  N    margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
! v8 x/ {4 a+ O" g2 Q    或
- p) }8 K- z0 \    margin:0px 0px 0px 0px! S; J  ?, X; _9 {9 v  f6 h
# H' z* @; i5 r& H
    顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);* Z# ^4 ^' Q8 P8 \, J
    以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,
/ ?' \6 I) m# c1 \# U    另外还有以下几种写法:7 s, i. q/ ^: A$ w* N
    margin:0px auto;$ ^4 G5 U9 S/ p1 `- R  l& ?8 ?2 F. b
    说明上下边距为0px,左右为自动调整;: E# [% ?) Y3 O6 K" S1 D
    我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
7 a9 ~' E( i3 n1 G, o% J    只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。5 S: z. i6 M3 q. C4 W; v9 m4 @5 T

+ I. @  {7 U1 `1 v% O( d    text-align:center
# h$ Z2 N! J2 ]- o    文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。
3 C/ Q, E3 m8 l5 ?$ G6 b; v! W, m8 ?
* [8 \: X4 C* Z/ k* \: t; c# ?    background:#FFF
. X. M1 X1 @4 ^    设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。
+ f. _! X0 ]1 a    background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:
& o" W9 K" x& f7 J/ H    background:#ccc url('bg.gif') top left no-repeat;, O8 w6 x  v8 I& ~# z: e. T& J
    表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,6 Y: G. x0 P+ T* T  k
    top left" c. K4 N3 ~- U& ?9 J
    表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
- \4 n9 i# J# X  M. g" |* w7 [    top/right/left/bottom/center4 w: U7 w2 c: \: w
    用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用
8 N7 S/ T2 A! j( \! [& R' f; u6 s    background:url('bg.gif') 20px 100px;
, G  v; j3 O1 Y( P4 n. g# A    表示X座标为20像素,Y座标为100像素的精确定位;- Z% s5 K1 N9 i9 a
    repeat/no-repeat/repeat-x/repeat-y) ]! U" H% [) E2 G1 q3 S2 }. n
    分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。; C" U; ~( O; k1 V7 q6 S9 j

; Q) q5 m6 {/ m, f7 O& v; {    height / width / color
) r8 @$ e( y- K- v    分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
* }% S% n+ ~, x2 y5 ~; }- P0 m. N2 c, k. A0 O
  4、如何使页面居中?
/ ?, U% W4 K$ F: ?( z# e    大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?- N7 ?# \, e2 u! h
    是因为我们在#container中使用了以下属性:
# }# N( X& }1 r2 I+ h    margin:0 auto;: s* q/ T2 |3 t$ P; d) \+ c8 x
    按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
/ D6 Y* |# K. T: k+ R/ {    如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。# N9 D& D: M# V; q, @, m2 d
    通过margin:auto我们就可以轻易地使层自动居中了。
, D% P0 A+ k9 t  h0 z
! d3 y6 t: s" \# \( A- d* E  5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册。
怨去吹箫,狂来说剑,两样销魂味。
返回列表