! R0 ?, m. Y# K+ i c 上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样： ! s+ P6 r" y0 c3 h' U- E 4 A E0 w6 o9 o+ c ＜div id="navcontainer"＞ " r- q1 D6 g& F. G
! w* H3 Q5 d. u ＜div id="globalnav"＞ + m5 k4 H2 W0 }% T- C6 u* h$ G 6 W R7 Z/ w9 L5 _9 M# W ＜ul＞a list＜/ul＞ 3 y R/ B, J# \" H) }$ G5 h) H, e) ?- S$ U8 t
＜/div＞ 2 q3 J( n/ V, g d* L Q8 j' u
$ b" \, v9 n& t; ? ＜div id="subnav"＞ ) d9 z9 T+ Q% w0 q( b- \; d
- u) H! d# f; X# v# N
＜ul＞another list＜/ul＞ % h; S- q6 @7 E. O" d
P5 i2 h# R Y9 ~) z4 `
＜/div＞ 2 D c& ]6 e# K' G9 i9 C& Y
9 G7 T8 L! r6 y1 l1 i+ U
＜/div＞ # Z: j& q) i" Q9 g( X1 X: Q
' [/ ]+ |9 @2 q
嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。 5 y2 H4 @8 N6 A$ X/ d M
' S9 X9 u% `3 G0 |9 P$ R - x5 m. D9 L% f6 ^1 _ 用CSS替换传统方法 * n' m! R y: @) ^0 G 下面的列表将帮助你用CSS替换传统方法： # S( G" ?" _! ?7 G8 L) N$ x$ o
# u) {) S# h" R7 m
HTML属性以及相对应的CSS方法 ( D* F- `2 r6 i0 A1 ]2 {* h& _
HTML属性 # S# l+ I7 X3 c" e8 c# L& S. s; Q7 d
: w" X* |- U4 V* D. {2 U
CSS方法说明 - C( y! l1 i3 |3 L
align="left" & i. f5 a; j0 @6 U& v$ v
, B$ Z, s- a/ k/ a
align="right" float: left; + M; ^, H. _( o r: @# P& k t
" X7 g# s( j& c# l7 L+ f% q$ S* b
float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等 $ ]8 z L$ N2 t6 }
. ^$ \# s' w8 t3 F6 g3 _! y! v ^/ |; Y
当你使用float属性，必须给这个浮动元素定义一个宽度。 * K- o2 o0 `7 G$ m# ^- P7 y; q/ p7 I! T9 `; r/ B, X. M
marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。 5 G4 I6 B7 y7 w 3 ^4 Z! g) m/ x- i7 d vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff; ) k+ F- t/ t. I- |2 L' P0 h8 ] 0 b$ D1 ^, F3 ]$ z' ] a:visited: #339; % z' K* k2 h4 m / a. i! X e8 D: o a:hover: #999; , J+ _8 P. X# ~ ( ]( G+ J5 G$ ~5 P a:active: #00f; ) @0 W; u+ Y$ d* f3 I
在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。 + O( o- R$ P' @7 Y4 w, c9 \! k - J& `; }; l, Z' | bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。 & P1 H; R( F% t ^
0 |. E( K) X* [; p
bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left 5 H2 a+ B, R, @0 B0 P7 V
* B7 j' o9 }4 ?5 w! X
border="3" cellspacing="3" border-width: 3px; 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。 - b8 a4 s& f0 o) }0 u
B5 C0 F; J7 g/ V0 w$ J 你可以使用 table, td or th 这些选择器. ' C& ]6 _$ b1 L' E; U
) K6 V) M0 E; ^: a$ L7 l b1 d 如果你需要设置无边框效果，可以使用CSS定义： border-collapse: collapse; - D* u/ V, i9 U2 u
: Y% }' W, N! U9 q8 a! J$ ]
＜br clear="left"＞ 0 q0 x% A' c: A9 ?3 R" |: b 0 {+ `. T# @0 J7 E
＜br clear="right"＞ ) r' C6 _! I6 N" O+ X " x* @3 V7 r/ @) A3 J ＜br clear="all"＞ 9 S0 g2 K) Y% f# `
6 a0 D- g9 M! L/ ~8 o$ Y8 b
clear: left; ; h3 k8 v: M6 @% }1 N* L0 }( K/ o. \- D F Z
clear: right; # q6 ^- q! g6 B* c) p' y: k" _5 u
8 f i5 h9 ^; S/ c% _" U, x
clear: both; * U! C [0 c/ a 许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性. $ t8 P* Z/ {# j; H2 X1 @+ N' S' H+ U- t6 l/ x7 V) J
cellpadding="3" 2 O' }4 o' I$ G2 p6 p' |
' F6 k/ U* J; \) [; Q7 j* p vspace="3" ( K3 D4 I1 Z1 o & ?) y& x& M6 h% ~ hspace="3" padding: 3px; 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。 6 ]4 j7 ~- c( u: l/ a7 \2 F
; N% m' G( P. @8 x( U5 Y
align="center" text-align: center; 8 a6 c* r7 p# ~, d0 c$ n - g; N6 e7 x W9 U margin-right: auto; margin-left: auto; % o1 z' M* t7 e2 z5 E! p
Text-align 只适用于文本. + w1 n0 @7 y8 u: [! G4 M
: ~ [5 q2 X. c 象div，p这样的块级可以通过margin-right: auto; 和margin-left: auto;来水平居中 & o( ^2 E6 [$ Q( v/ b, L 0 i; T( E, T! Q' w6 z 一些令人遗憾的技巧和工作环境 ) J8 V0 G3 w& j' z* _
% A% w: V, S7 {, p. F( Q2 I6 L! _; Y+ {
由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效 果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。6 S: M* Z4 E( H- f) W
另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。 " g4 Z! u7 n. Z4 x1 Z: `, p ; J9 H" @' W! O* `4 ^: ] 理解浮动行为 8 t/ N/ b$ _" D
, F- d7 G6 d; w# C( l4 n Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear)，阅读《How To Clear Floats Without Structural Markup》将非常有帮助。 + p) i5 V% a, B* X! G
