HTML结构化：DIV＋CSS网页布局入门指南 样式, 布局, HTML, CSS, 网页制作

admin

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： ! l: }: t( |$ P% j8 J

/ X% Y" t. O- I　　第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。
+ G/ @6 U% n" K4 `& K: K9 V5 |' e( J/ b6 C$ i( y. E+ T& p
　　另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么CSS语句。
) b2 W6 b/ ^/ E) U+ H9 X
/ W+ z$ N1 {% V% P. l当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。 - |) G( J9 ^2 T3 w8 T7 y

  ?7 o: K$ S( ]7 d8 G# H+ l　　结构化HTML
+ Y# z- R- `& _: V& m% M6 E8 [" _  r4 @' ?) k8 L1 G9 m
　　我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。 & x+ ^7 u, S  m# T6 T( x

/ J0 q* J9 P2 ^1 a. b  I　　如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
( s' P2 ?$ M6 j6 g9 J
/ z* j( ?- o' k. S9 m　　外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。
- d& l0 r+ r' B! e, w6 c. ^: g1 P2 }5 _
　　HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。 % X9 Z* N* X6 ?; S3 n3 x
( G- q- [) c+ U
　　开始思考
9 v- q3 `" c8 f- W* D( _3 N' k' c) o1 F+ {" p- C" y, v# g

  u9 e! W& u8 P' ?
7 L. h5 i+ h. x" R% |  q　　首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 $ E. q/ ?; W+ J0 P* s
: V- J5 ~* Y  ~; s" c9 c. Z( |
　　如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：
, {7 n; V* \" ~) e+ L) o! F' y1 V& \5 B; S+ T7 g# a! w
　　标志和站点名称 $ n, k# ~+ X& n3 u3 f' X5 E
　　主页面内容 2 W) z( O' [! W+ H9 e+ W4 [
　　站点导航(主菜单)
, E1 L! y* u% v, K# j1 E& K　　子菜单 6 c/ B3 ?! `8 P0 C9 P0 g3 w3 l$ W
　　搜索框
3 F8 D, R  K2 T4 S' |2 {* q　　功能区(例如购物车、收银台) - l8 w) n0 b6 R8 D
　　页脚(版权和有关法律声明)
2 A8 {1 V; {4 j3 k8 j; D% k! m5 v! L5 D) e6 \  ^

, H5 g, i# ~3 _" O* N$ u4 p　　我们通常采用DIV元素来将这些结构定义出来，类似这样： , F# m# t& H! l8 i

: W% {3 x: c) q0 _4 |# Z　　＜div id="header"＞＜/div＞ 4 S* S6 h3 B1 X2 N; W% `$ H+ W) Z

  I8 f" k4 o: o# E8 {; p+ t; \　　＜div id="content"＞＜/div＞
) S4 K( X2 z  _- U9 W! N6 |0 z" ^' b' c& Y$ O  L4 H0 ^
　　＜div id="globalnav"＞＜/div＞ , `/ A' W/ F6 j

3 ^6 c, N% ^2 X　　＜div id="subnav"＞＜/div＞
  K- c3 V8 b% g+ Y( w7 {/ T* d6 j/ b- g
　　＜div id="search"＞＜/div＞
' G7 O! p5 l. t1 s- r5 K$ D6 r' K5 g( L: R0 Q8 L( }' h
　　＜div id="shop"＞＜/div＞
9 q) y1 y) j$ P3 l: |6 l7 \# O. U& X
　　＜div id="footer"＞＜/div＞
4 [/ M( }/ A( @0 b7 k/ p8 I: t$ S) G- l/ D$ }# m; {: b/ _
　　这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 ' U9 V. X+ B  c: _

. B% j. ^, c2 D& N9 E" u$ f　　根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 ( N8 j, ?- N  c" u6 @8 y
2 @; B2 `7 i# `8 h$ f# g) s
　　使用选择器是件美妙的事 4 N7 y5 F) j7 x4 i! c8 c/ E/ G
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。 1 v! \( O- h6 f) B; C6 b

6 {( J6 s% |0 P$ B# L- t$ z　　另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。   z" v6 s2 Q2 ~

- K6 o. k6 v9 R' f3 X- A　　一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的 相分离.)
2 M$ ?- f6 P* w7 |& B: a* ], J　　良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码＜table width="80%" cellpadding="3" border="2" align="left"＞，现在可以只在HTML中写＜table＞，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么(比如被用来布局和定位)。
8 X: P( p# A& p( L( u; ]$ p6 K0 Z8 a  t5 J: }) ~, \9 a
亲自实践一下结构化
3 g3 H8 y  S: F) s9 ]5 F2 G" B& d' O# Y! D6 J
　　上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样： * g7 F( S9 B, U

4 V0 j; J! e# {& C5 Q+ T( [　　＜div id="navcontainer"＞ - r  G# E, X2 Y* ?$ j( [9 u

. V3 E5 `: O: O6 [　　＜div id="globalnav"＞
$ q" R) w3 r* v' |
' ]2 ?% a( i, u: M　　＜ul＞a list＜/ul＞ % ?2 i# R6 X6 K5 B+ I

. T% }7 y) _! l! F  E　　＜/div＞ & _5 K4 Z2 I( {1 p% m# c) s+ b
  c& o, @: e/ e" n" @* A
　　＜div id="subnav"＞ , F# s) |" d% C, X  z

" P% B, N9 Y3 |' x# e- E) \　　＜ul＞another list＜/ul＞
' Z) m9 ~4 A" d- P9 M. a. Q* K9 W  V) O  U$ K3 Z
　　＜/div＞ 5 F- k+ X' ]# ^- J. R

* T; g( D! K5 l& b　　＜/div＞
* U2 h$ s6 n( }& @+ K3 h7 V' V4 ]1 ?8 s$ Q& j
　　嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。 2 I+ x! L) u' j! f; O& B) W

6 n) [8 }; i) k
* I0 Y) ]) C& p% H1 N　　用CSS替换传统方法
. R* g# A' w! v  F. @　　下面的列表将帮助你用CSS替换传统方法： 6 t' f( J6 k+ f! T% E

- v; h4 ^( K: a- e　　HTML属性以及相对应的CSS方法
+ g/ N7 Z: g1 b% M( }0 m( Z$ }　　HTML属性 1 L# E6 y' s+ n" S
; L4 S. j) k1 \2 |, c

: j. b2 i, s- L0 ~2 r( F1 f　　CSS方法说明
, ~1 c9 i( u0 {5 u- j2 s　　align="left"
$ p- R# ^$ i8 {7 U  O# }; U: L
3 T* s9 Z$ O$ Y1 [0 g　　align="right" float: left; / o+ Z# r. Q' p; s, g' _# F. O

1 H- U, J5 s+ f" b/ R, B7 a　　float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等
) o9 }( O* O5 D3 u& L2 @& {5 `9 E5 q% A! ^2 D4 J+ E' X- L
　　当你使用float属性，必须给这个浮动元素定义一个宽度。 0 ]) @+ H+ `! V. S" J: y& @% J# x

$ o" \; s% w, ?, ]　　marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。 5 y9 I8 d: c" N, p
- q2 a! p: a. n+ ~9 M
　　vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
0 i) @/ D- T5 z, ~5 Q* Z0 b! O
3 T; `" |6 s4 T% f0 {6 g- X$ G　　a:visited: #339;
; N; Y9 A8 D3 ], @7 y- v  b: w
- [/ q6 u5 M# {! S( y$ S2 w& a　　a:hover: #999; 5 w3 i, i, l; x5 K3 y% I5 |

" G: k: L" h2 l& L- s　　a:active: #00f; $ \' i) I3 Z# V
　　在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。
! i* L0 l, [- Z" o; Q. o5 h9 u2 }7 K6 |2 J3 W3 w+ @
　　bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。 ; b5 ]9 |% e8 ~# N! V: \9 ~  `$ x
2 U/ N. U6 h+ z) K  k4 U$ D
　　bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left ' k7 J) N1 [! i5 f$ k6 k6 ~
2 y1 ~+ _/ {7 D1 J! h$ n
　　border="3"　cellspacing="3" border-width: 3px; 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。
' h3 K3 t1 H( U/ Q
& F$ n, l, j$ _3 ?　　你可以使用 table, td or th 这些选择器. 7 X. K2 [  `& [( c5 Y
$ x7 a: Q' s& x
　　如果你需要设置无边框效果，可以使用CSS定义： border-collapse: collapse;
5 M( D4 P) Y% `: d$ S2 \) _
3 W: [" b0 J2 p% [$ [# P( q　　＜br clear="left"＞ 3 |: o& I) Y: c! ]* D* e/ P8 C& y% }
　　
* [1 }' R% W! s1 J( n5 u: F　　＜br clear="right"＞
7 D& y& o7 ^; ~6 ^7 N5 j5 u  K3 J+ S2 H4 e4 ]
　　＜br clear="all"＞ 2 Y0 p" c1 W: ^& o8 ]

* V  q9 H0 J) g4 t6 {　　clear: left;
7 F9 X7 _6 w* C1 ?1 ?0 V6 |& p/ r8 m; v5 v
　　clear: right; & E8 u$ D1 d/ c% B* b3 X

2 W/ x+ ?5 T( e# `$ [　　clear: both; ' L  I4 t0 K! a9 F
　　许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性. 0 Y& W) h- b$ C! @; s7 D' y
. h6 P+ Z% U/ k, Q
　　cellpadding="3"
) e& k' M9 c  E, x0 t& v5 n. X, t4 F) o. Y
　　vspace="3" 8 Y& m0 x. l5 m5 R; \

% T; ~$ w/ [7 S8 _' n, G$ o% ?　　hspace="3" padding: 3px; 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。 + B; D* ?5 s) _
2 x' T5 L& m2 u; u# y- l) `) C- h% I
　　align="center" text-align: center;
  Z! n; T& [% [$ H8 b$ ?3 p0 W8 f$ A7 H9 f+ [" E- d8 r% ]
　　margin-right: auto; margin-left: auto; & Q' E7 s4 i( }( p: p! n/ ]
　　Text-align 只适用于文本. " X7 f9 }' y$ }) S

  m( ]* h3 K" X( r- i　　象div，p这样的块级可以通过margin-right: auto; 和margin-left: auto;来水平居中
4 M% ~0 w, e2 r6 B1 s* L4 D# n" R$ M2 B- w- X' P" D" l/ X* `9 W
　　一些令人遗憾的技巧和工作环境
/ C+ o9 u' p$ o, M
5 f' v7 t- i8 `" J, S$ y$ s3 o4 j7 S# {/ G  ?  a
由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效 果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。
, J: O4 J# K% e　　另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。
* W2 }# [3 y& J; d
( T# L: S7 B, P# j4 D% J1 o- H- L　　理解浮动行为
7 e$ w, [! g( s9 |' V" u0 }  P: O. z% q! c/ U9 n3 ]: ^& a$ |- x  Q
　　Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear)，阅读《How To Clear Floats Without Structural Markup》将非常有帮助。
  n9 ~* j4 o  J' O5 E* b. ~
& j/ o2 t( \+ m2 M0 p　　更多帮助 8 o( @! J/ H9 E% I1 m7 _9 ]: O
* O5 I7 e; x) z9 x' K
　　已有的《CSS Discussion》列表是很好的资源，它收集了一个WiKiA讨论组的信息，其中包括CSS布局总结(css- discuss.incutio.com/?page=CssLayouts)，CSS 技巧总结 (css-discuss.incutio.com/?page=CssHack) 以及更多。

admin

初学者先到 建站交流 版块学习一下吧