你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： % [" b+ t# @/ _3 }& S* w' l
$ ]! P- r3 M; |) ^( M
第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 5 B& G B" o+ N2 I9 f0 I
0 f- M: k3 K$ y6 q; Q3 p
另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么CSS语句。 # Z- z* u, I# b- z8 G Z . P$ Z+ B* b3 n- ~当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。 ) G: Z& ^+ t# Z' Q" p& @
3 W3 T8 E5 X9 Z. L' M 结构化HTML " S+ i' w2 ]' D0 P3 P h" T, H, ^
# J E$ l% K1 J# F 我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。 . g. h6 h4 T7 b
5 V3 H, r# U+ ^6 M- o 如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。 : t! q% a6 ^" x x8 g. X/ \
# G- s. b2 \$ T7 Z0 N, M, X
外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。 8 ]2 g- j' e# A! f6 V" J4 h
; ^6 C. \) K% q; z$ G5 P+ k3 N, S
HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。 % b4 V+ W1 p. r* H9 D0 U: G" g1 c0 c
6 s8 K) H0 S% P4 b 开始思考 : W- L: r/ e0 C. k / s8 z; z6 f( B; E7 d+ w$ ?+ S3 C* N8 O
+ F1 D/ S7 u. l8 N/ g& b0 Z2 U- C
首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 ) P& b1 J" Z6 p: |# V6 V5 U# R( i% b& L0 w
如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块： " Z+ `: f& c9 G9 B& h) @
6 T6 [+ r7 } H+ Y5 t; M6 k3 s+ E: a 标志和站点名称 + U, d. r( ~! [3 z7 V3 B6 a 主页面内容 5 y( ?2 A, l1 X9 r8 ]
站点导航(主菜单) / p$ m. r/ ~* g4 ^ 子菜单 * T; _4 P7 j+ m3 e) v% X
搜索框 8 s" O& b- [* {& _' Q6 H' {( q
功能区(例如购物车、收银台) % g/ M. N T# |! S
页脚(版权和有关法律声明) ; I+ y9 X8 U6 W7 d8 z1 O0 _/ X
4 d/ p1 r4 i- H B2 y5 c ) X. u- j* ?! z4 f5 K9 N- @ 我们通常采用DIV元素来将这些结构定义出来，类似这样： % \; G) z- E# t( O
" J5 J; L1 \" ] ＜div id="header"＞＜/div＞ 2 \: r0 o/ M% V% g: I( O - B* X+ l- [# S& \: O/ ]) P0 G ＜div id="content"＞＜/div＞ R {( j% v# Q/ j6 o
9 c# m! o0 b4 w' t ＜div id="globalnav"＞＜/div＞ 4 C' K2 p" ^# u A- }, b" m* l ' j# y, z1 a9 K3 J ＜div id="subnav"＞＜/div＞ ! o. J! _ j, f3 t0 d2 S( S6 ~ ! s J2 p. ^5 R$ Z+ T ＜div id="search"＞＜/div＞ & e# a6 x, C m9 O% p+ X
& c) c# m1 ^$ E" x5 f% p ＜div id="shop"＞＜/div＞ . o& q& C+ Q+ Z/ j- ~2 b* |1 R
( J: I! W! _0 Q ＜div id="footer"＞＜/div＞ 2 u: B* A& x- K6 n' w: N" ` ( p6 L2 c4 A n. r+ d- D 这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 0 s* J' L) d* Z& i" @ + p2 r, }3 h( q: q$ `' e: u 根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 5 R Z0 A' k0 D0 U* t* t
3 _( l" X4 ]. \; D" K. Z$ @ 使用选择器是件美妙的事 9 d8 ?" g( o: A9 @+ D! R* C
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。 * a$ V9 \$ [+ x: _, P& {& h( f# A+ W ' u2 v0 a7 l; D e0 w 另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。 9 z% m2 }8 K# H8 s, u4 g- Y/ Y
& b4 Q7 I5 Y6 L" N3 A 一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的 相分离.) & i1 q" X: P# W1 Z, B. y% e1 m 良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码＜table width="80%" cellpadding="3" border="2" align="left"＞，现在可以只在HTML中写＜table＞，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么(比如被用来布局和定位)。 $ z: B2 I' @: R( D h3 a# ?. e% \
7 e/ u( s: l7 ?3 I7 ?# g0 W- h
亲自实践一下结构化 t5 F. z$ U& E. _; N
`4 x6 |! W& h) _- H
上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样： ! M; p# [0 b' n7 g& _ a5 |% `: L5 B5 `
＜div id="navcontainer"＞ . M7 F ]! E( F& W' ?: m
1 S5 T% q) ]8 P! S. m6 q
＜div id="globalnav"＞ 2 ~, `2 v+ N, l% ~
" ]" o" J h# k2 ]6 T- u; T& f0 ]$ D
＜ul＞a list＜/ul＞ ( `! a0 a; a* N- v3 _& h: d; Y/ i2 O 2 Y' [- v& N k x' G ＜/div＞ # E& o% @$ h e z ' j! R3 z& ]4 H* c# r ＜div id="subnav"＞ " {! Z: o" y' r! \! O ) E( i2 K6 x+ T4 [- e) x ＜ul＞another list＜/ul＞ E7 }4 _- u; [3 X) X, G7 N! ?3 _0 O/ S+ L
＜/div＞ 6 e P1 {1 N5 ~8 G: @
# L, D" a$ U9 P' @2 x6 ^, x+ j- c
＜/div＞ % [! r2 C! E1 [. @( U8 O9 j ' q0 N* X& }/ l9 F. ] 嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。 . _$ g o/ X# M# D+ s* g6 E% B8 O7 B* X0 o) z
, `0 C1 @3 k1 b( I; p, z% Z 用CSS替换传统方法 ( Z# b6 Z, G Z% ~! n7 [ 下面的列表将帮助你用CSS替换传统方法： " Y Z5 u8 b7 y- U
9 j. Y" T, j: P b HTML属性以及相对应的CSS方法 5 M' L+ h+ u4 H# }% G HTML属性 9 K* n3 S8 i& {0 w7 U
9 A2 _1 |( ?$ [
' I# o# J. p; p CSS方法说明 / X6 l# r- T- K6 b3 o
align="left" 4 r% K, B- [9 d* p 8 @! u& R: W4 F- e* L$ y$ n align="right" float: left; # U! m% Y0 }* [* y3 _ 7 u" p) R0 L& w float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等 , m* E& v/ Q3 M% g4 W$ F { 0 x5 d# }" A% `9 `% w" E' O. x, i' i 当你使用float属性，必须给这个浮动元素定义一个宽度。 % V- w: C1 F) ?7 [6 f8 \; }
9 }& o2 o! u+ K2 c4 a
marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。 5 y; A: W" b' q I( M+ u0 n3 r) F! O; T( U! l7 o
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff; # w3 v( o5 U% d" Q- z# d
2 i" s5 N1 {) {1 G
a:visited: #339; 1 Y' B1 I) p' K
1 l6 q2 z. w4 E3 {8 W
a:hover: #999; " T9 r" u, g; h* ~: }& D9 [- z" K- E+ J
a:active: #00f; 9 b9 j6 B' ~ F8 P+ a) ~6 t- H 在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。 % O5 _: V- v7 @0 ]) d- Y
- L) M4 X8 |. D5 z
bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。 ) K' Q6 B+ E% l: m# D6 r5 g. P! f! d& O- p1 n) i) N
bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left ; M5 J) K/ w8 ]/ d* t5 T- |8 T
7 l3 B2 U" J4 h% v
border="3" cellspacing="3" border-width: 3px; 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。 * I7 l7 ]/ S4 t& h9 Q9 T$ S# y
