  
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 3 v, ?# d3 K# h
- P( P# t3 j+ V v 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。
0 E* ?+ D& W7 Z+ J5 Y% ]' Q/ A- |9 n- @: a8 I% I
另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句。 ; w: W4 N; S4 U# @) h* h( B# K7 {
* F; B' {# a# x8 j
当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表,详细列出原来的表现属性用什么CSS来代替。
: d0 L S5 L: Y! W& w# ?: p! |8 R' h% z# Y" E2 C6 j* ?5 O: j( y0 ^
结构化HTML
! A8 a9 g6 t) e6 @: p* Y6 G( p1 M3 @% q, ^1 Z
我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
* {+ ~4 t% @ Q; f# O, v8 \# x* b% o/ T
如果你希望你的HTML页面用CSS布局(是CSS-friendly的),你需要回头重来,先不考虑“外观”,要先思考你的页面内容的语义和结构。
* \4 n: t( r" x' F1 H3 h2 }7 W) f# x& b8 u/ h' h( `6 h7 ]% w
外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来,CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。 + a3 A/ B a L5 e: \ Z
* z! u) p* |3 V8 h) A* P9 J: w& \ HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义,显示在任何地方,任何网络设备上。
5 v$ ]% y- n; @8 D5 `4 N1 C) s5 O! {3 w" T% v& X: h
开始思考 " b! V0 J1 \. D8 k
$ c, O D( ~2 M' `
- P# w6 O3 C' e B1 c4 y
5 ]9 p+ B: m0 T9 k8 O. }! u: U 首先要学习什么是"结构",一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块,以及每块内容服务的目的,然后再根据这些内容目的建立起相应的HTML结构。
! I5 [. T7 q# u/ K: P `9 T* K$ i( u: Q7 V g- S
如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块: ' M4 B) O ~2 n
. \- [1 j( `6 X9 `; T7 M/ Q% d
标志和站点名称 . h, g" }0 _% o, F/ W! L
主页面内容
* y# i3 H; u' w7 E- W: J 站点导航(主菜单) * \8 h& ]0 K; m6 N9 A7 R7 C
子菜单 6 b7 h( k4 C S4 c7 f* z; V
搜索框
7 b: R Z# _! R8 t0 r 功能区(例如购物车、收银台) ; J5 U- ?% ?0 ]. Z6 i
页脚(版权和有关法律声明) + l, c" _0 p( s- o7 p% f$ L" I
1 z5 a' z+ F- l
2 W$ F' F/ P' I! H" j5 U 我们通常采用DIV元素来将这些结构定义出来,类似这样: 0 B a0 _: F. e: W
7 g, T& \# o- _5 X; r P. e" [5 H7 L a$ J9 Z <div id="header"></div>
3 O+ B1 {$ w( J/ m4 H7 o6 X, v
& G/ `9 O7 C/ O) f. ~ <div id="content"></div> 3 l5 i, P$ M2 n& c# w8 F
4 Q; H( l/ ]9 x1 [7 z <div id="globalnav"></div> ( w4 v9 x7 R) ?
( J* u. z, C5 ?2 i( K2 N
<div id="subnav"></div> $ s: L' j& X3 H0 k
' i' ~' Q* ?2 ]; K0 U1 E7 c
<div id="search"></div> 5 X' R/ J+ v7 f+ V9 q
7 z- v5 ?3 i4 b- `3 T
<div id="shop"></div> , R! G4 t$ e) {3 k
; s. r9 @7 U1 D5 D Q <div id="footer"></div>
# o) h, R" _, y3 h+ q, H$ s# T4 D6 p4 w% R
这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块,也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 9 Z' n) B/ ?& J
( a1 ^8 ^9 D f, t1 l
根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
, Y- J8 ^' R# v/ x- l7 r- x0 U. R4 a# r) o! k5 ]
使用选择器是件美妙的事 1 K# Q, d- r1 r/ l
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。 9 L: ^' J9 _! a1 E
4 T' z# w: h3 X4 @ K4 u4 N 另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如,通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。
% `! H$ p1 U0 a4 g: P% ?8 m! e( l! z# d) K
一个仔细结构化的HTML页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用blockquote标签,只要使用p标签,并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签,margin是表现属性,前者属于HTML,后者属于CSS。(这就是结构于表现的 相分离.)
, [7 N/ b* E0 M/ S8 s, s8 O: k# z 良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width="80%" cellpadding="3" border="2" align="left">,现在可以只在HTML中写<table>,所有控制表现的东西都写到CSS中去,在结构化的HTML中, table就是表格,而不是其他什么(比如被用来布局和定位)。 / D X' {# G/ f: w
/ s: ?, o& |& C1 k' e
亲自实践一下结构化 0 y/ N _/ C. q: O! b' r; v
, I. |" T3 f' T& I+ ?1 H
上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到"container"层中又有其它层,结构类似这样:
5 \4 H& T( b# c* \* Y9 Y1 J* ]- m2 E( p
<div id="navcontainer"> 8 K' V* l# F3 m6 h- G
4 ~- ~" c& P* x- J <div id="globalnav">
9 \4 h/ L8 R8 ~: c" H/ _5 J, G4 }% ]/ W
<ul>a list</ul> 4 E) e) l7 i7 m# z$ N
3 v" l% q2 W( z. F" t0 P F
</div>
5 f' i& _$ z8 I, W' w5 w7 ^5 T% k" S
<div id="subnav">
9 W5 [3 Y! P1 W8 @2 z8 O8 E w3 q1 [$ O# ?. o2 H9 W4 s
<ul>another list</ul> 1 {; _$ \! u6 ~* e# X/ p0 G/ v
# `" e. [2 j# d+ a$ x4 O </div> / x4 X& x" k7 [: I8 A; M' g1 H
8 k0 k8 O) v# |3 d8 ` J </div>
) E$ K; u3 e1 {5 Q6 l9 a8 ~& y
) A# }3 a" F; f% W3 _% W# R* x$ V 嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#navcontainer一个规则让列表居右,再给#globalnav一个规则让列表居左,而给#subnav的list另一个完全不同的表现。
+ o4 M1 B2 W) y, x4 w) v: o% N
( g) l7 {# b" a+ W 用CSS替换传统方法
: q; d- X$ @2 ~8 c 下面的列表将帮助你用CSS替换传统方法: , h0 w! N$ _! y1 z$ }: E0 S% h4 |
$ a& o4 H; l" c HTML属性以及相对应的CSS方法
* I( I( O9 Q+ z: g. J HTML属性 ! a( }- t' p- m( W
: s+ e5 H" K7 G: w0 S$ L& b" V W
' m" W! u- B( z4 Y. n( B CSS方法说明
9 ^% V B$ J, D ?5 i align="left" # Z" W# a/ J- y" B2 i
2 e% ^% }# L# X; u6 l% n. W' o align="right" float: left;
% J* S# W) j4 R
& I5 O0 ~( L9 N float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等
* h' [+ B: T& r R. a2 N! I8 f1 b) n+ X7 V
当你使用float属性,必须给这个浮动元素定义一个宽度。
. l5 g7 Z$ I5 W; V4 J' O0 j2 g5 F
; N0 Z4 E; A: Z1 S) p marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的,你可以分别指定元素的top, right, bottom和left的margin值。
4 }4 g% |& ^7 d0 S0 Q% Z2 A& s* w0 d
M) c9 E# c1 d& M0 l vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
* M% t4 O) h6 U- P2 h, @
$ a* x" ?/ b4 k1 H. J+ ~ a:visited: #339;
6 G0 R! G' y1 U1 G+ @: n1 w8 X! K( j4 V. q
a:hover: #999;
3 C7 ]& V* W' K
, x! L7 R5 q0 z" c$ s3 i& t a:active: #00f; & v5 C J2 \# v- _0 {
在HTML中,链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器,页面不同部分的链接样式可以不一样。
$ n8 O6 x: G/ ` f3 { k
# F O) \* I f) }' b bgcolor="#FFFFFF" background-color: #fff; 在CSS中,任何元素都可以定义背景颜色,不仅仅局限于body和table元素。 9 m6 u7 n8 j/ U% U
6 } b: B& E5 x bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder),你可以分别定义top, right, bottom和left
4 A2 ~/ o, R8 p( X4 H9 w! d8 ?) j3 e* L0 ~0 \$ S
border="3" cellspacing="3" border-width: 3px; 用CSS,你可以定义table的边框为统一样式,也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。 $ B' r! W& x: F! ?% O% X
" m+ F0 }! U' g" X/ g, r
你可以使用 table, td or th 这些选择器.
, y4 e) q* t8 R6 }0 z4 Z/ |# ^& N" K( `" t
如果你需要设置无边框效果,可以使用CSS定义: border-collapse: collapse; / H. _ J; t. @5 Y% }8 u
- j2 y1 n+ j: G' K- C% `3 {6 M <br clear="left">
# g* ?3 H0 Z5 O3 @- W f6 B* i ' U0 A% m& X# J; {, p; ~! A
<br clear="right">
9 m: u5 P3 _- L9 k( x) D) c& V* g7 u; v
<br clear="all"> ' B+ F+ G9 J: i: h; F W# Z
" c/ O. l9 M9 e" G) K7 x
clear: left; , }% \6 m2 o+ m# x' L
8 @, b+ U- C: N# s
clear: right;
5 N0 j& h; Y" X4 f8 f- h; a1 u7 i8 P" D2 T! Y
clear: both; 2 L: ]$ h+ v7 v, }
许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片,你可以使用clear属性. 1 f" U6 N, C; |" {2 x1 P
! R# N0 Z; {+ U& C cellpadding="3" # \. K6 R0 a& p1 p9 f- D( }" l: i' r
s% h7 `. _- Z9 B; }. r8 T
vspace="3" $ J. n h! A# Y. `0 h" a
) s# b0 |& r; c& W5 r. c; p
hspace="3" padding: 3px; 用CSS,任何元素都可以设定padding属性,同样,padding可以分别设置top, right, bottom and left。padding是透明的。 $ Z! ` e4 k& l- ^4 E
* v: k2 K9 d, W7 M6 v! E% Q
align="center" text-align: center;
+ S& R% X5 A# p- q
$ r$ @1 o5 a7 r1 ]" y0 j) ~5 s margin-right: auto; margin-left: auto;
6 @# C9 q8 o C. T: ]$ c P" ~% X Text-align 只适用于文本.
- E0 z8 O8 J4 z$ w. o, ?% ?5 M1 Y# \6 W) s$ k. `5 c% c
象div,p这样的块级可以通过margin-right: auto; 和margin-left: auto;来水平居中
+ E3 b9 k, [7 s; P0 Y1 P
8 n0 ]3 `1 ?% D; g 一些令人遗憾的技巧和工作环境 : O" o0 S, E3 M# ^ L% Z9 r( y
; h) m4 U, m$ M* T2 T% i5 V
1 y0 K# c9 u, ~ X( i由于浏览器对CSS支持的不完善,我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效 果。例如块级元素有时侯需要使用水平居中的技巧,盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。& I* i: R9 ^( R9 c( H+ v
另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。 + q, @8 m4 B, r+ O' a" a- ]( U* s8 i
9 h, @2 Y2 u* ]+ j
理解浮动行为
2 M- m h) D7 I4 Q7 c, n' n' D- D; m) R5 x- x5 ~, X
Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear),阅读《How To Clear Floats Without Structural Markup》将非常有帮助。 0 r* L4 e8 }( a3 {) {
7 G; l7 Q5 S- t8 O/ T* a4 H
更多帮助
6 u% @6 U6 W* w) E4 G! n, [* m# E
已有的《CSS Discussion》列表是很好的资源,它收集了一个WiKiA讨论组的信息,其中包括CSS布局总结(css- discuss.incutio.com/?page=CssLayouts),CSS 技巧总结 (css-discuss.incutio.com/?page=CssHack) 以及更多。 |
|