返回列表 发帖

HTML结构化:DIV+CSS网页布局入门指南

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:
- j1 r9 i, v7 v8 `5 a' U( w4 |9 r$ k2 g9 {+ u3 h. j
  第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 ) L  I) P- I4 O: w# ]% b* q

1 z7 I6 y/ Y* M1 M' p# G0 s  另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句。
$ z# a' E  R( ~  L& u; [3 A
- T, l: D; A9 h+ I- t5 x当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表,详细列出原来的表现属性用什么CSS来代替。
0 C- _& T! O: Y; I* E3 n2 K, G
$ g2 X! w! H1 E- U" ^! N9 B/ y* |  结构化HTML
$ a  G" R$ ^3 k, P2 j* @
8 _  y* P, n* G0 L( w/ Z  我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
7 y! z* P* a- |; G# N; B% r* t: \7 H& m
  如果你希望你的HTML页面用CSS布局(是CSS-friendly的),你需要回头重来,先不考虑“外观”,要先思考你的页面内容的语义和结构。 ) j& J3 y- a$ |

3 Z' N) |4 L1 Z! L( o7 B4 |7 Z7 E! V& i  外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来,CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。
+ V; L) D& g; z! u( o- ~: e. J  H3 B1 R: U
  HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义,显示在任何地方,任何网络设备上。
* j9 H1 g4 f* t* ~* a8 K+ {' J" w
  开始思考 ! L9 a7 V3 `, e& l/ E

2 Z  H5 g: X1 Y8 [1 f3 M7 A6 t* o' M$ R! A

$ S5 F: ?% `0 s! H4 D  首先要学习什么是"结构",一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块,以及每块内容服务的目的,然后再根据这些内容目的建立起相应的HTML结构。
+ Q" `# g/ o6 W4 V4 ^) Z4 T7 p
: @. x1 f( F; E' Z( a: @  如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块:
8 |9 c4 R6 E; a1 s. N. ~* {; u6 f$ J& m
  标志和站点名称
7 j. k' L" g1 _" s# o+ r1 C  主页面内容
- O0 c$ A$ D2 N& ?) H+ {' {* M' v  站点导航(主菜单)
  _# I3 ?: Z, ?' k7 u  子菜单
% A- ?( {+ u) K- s8 L  搜索框 , T$ ]' M% i1 c$ W- Z% Y! B9 V% ]
  功能区(例如购物车、收银台) 3 l: g. \$ W8 ?" ~) C) l, b
  页脚(版权和有关法律声明) 0 I, O4 z$ D1 n" R1 b

- M+ O, u4 g$ p4 e
8 d8 q. r/ z1 R. F8 p  我们通常采用DIV元素来将这些结构定义出来,类似这样:
6 E1 g+ ~% L/ K* {  _. h; |2 M; y$ m1 I$ p! ^# Z, A
  <div id="header"></div> 4 d1 f  N7 A0 o2 E) p

# I  j5 d! z$ ]$ G( c3 J' w5 ]  <div id="content"></div>
2 D! f) \0 A5 P" c6 {
6 H2 T& c! D+ Z6 v& a4 O& P4 W  <div id="globalnav"></div>
, e6 m3 z* g( S) k7 D
" Z, ~  A) L: W- z& g( G! a. B  <div id="subnav"></div>   `# T) ^! E* n$ J+ }

/ O; y: o; h5 ^1 Z# m1 x6 X  <div id="search"></div>
% V4 v! |" H! Y* Q
4 }8 `* l, V  }4 o% @3 Z  <div id="shop"></div>
2 o( g$ k1 J1 L' Y! t3 e6 o: k/ M) r' q/ ~/ G7 d# l6 \) s
  <div id="footer"></div>
) Z% H  k9 F* g% y$ r- d& _1 H/ `; A- T: m9 h* a* }
  这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块,也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 0 Y4 C. F- v& Z

9 _( S9 v' o9 J. x4 e  根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
3 m1 l0 l) v. y. l; b6 k7 A* N5 R0 ?) w" E8 b: |
  使用选择器是件美妙的事
3 b2 t% _2 R" P+ oid的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。
7 F2 |3 }% A" D; t0 n2 A3 D- M( P7 Y) e& V8 N6 p
  另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如,通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。 2 O/ z& F4 T$ M7 v  O/ Y! s. I

# G. U/ _2 z& ^$ |! {1 [  一个仔细结构化的HTML页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用blockquote标签,只要使用p标签,并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签,margin是表现属性,前者属于HTML,后者属于CSS。(这就是结构于表现的 相分离.)
5 Q6 Z4 k6 i6 r4 f" ^5 u% ^  良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width="80%" cellpadding="3" border="2" align="left">,现在可以只在HTML中写<table>,所有控制表现的东西都写到CSS中去,在结构化的HTML中, table就是表格,而不是其他什么(比如被用来布局和定位)。 4 P% |  O5 Y) |
( y- w& m; |  ?' S( `  g2 E( e
亲自实践一下结构化
. Z8 N% _/ Z; q+ O" \6 c) V8 b. h5 g; t7 }! G
  上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到"container"层中又有其它层,结构类似这样: 2 [' j; X0 f( x, f" z$ v

* S9 k# p/ T7 I, B$ N/ \% }# W8 p  <div id="navcontainer">   k/ k) }$ F) u8 v! ^* j

/ d8 X/ d2 `) Y5 m  <div id="globalnav"> $ f7 o2 `" {5 ~0 i  f  t
% P( X4 f8 i7 z" W
  <ul>a list</ul> 0 i! Y4 ~, L$ r9 O' M! Y- B

2 k! `, k* Y; Q% |* [  </div>
% w. Z  g( n0 U; a! k
6 f* C2 Y- g* T; c% {  <div id="subnav"> : d4 e( Y4 U$ z. l

; l. a$ |/ S# h) N  <ul>another list</ul>
/ X  Q& [, j1 e: s: i
+ c) o$ L  ~) S3 O1 y  </div> ! |0 @+ q; X: t% E

2 g9 \8 i/ |" R  r9 U" `  </div>
& b4 X* k; j5 `: k! ?
; e0 F/ ?% R: h1 z+ p; U  嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#navcontainer一个规则让列表居右,再给#globalnav一个规则让列表居左,而给#subnav的list另一个完全不同的表现。 / L# X; _  l1 o  C/ {; p
2 m, L; U4 k" t& l4 r9 ~4 G. {5 ^
( b- C0 w' S& A# e1 Z8 t
  用CSS替换传统方法 . e, Q9 F. @  S; @8 c% C( X
  下面的列表将帮助你用CSS替换传统方法:
, e" Y+ B( U2 A2 a+ e  R9 m8 F: ~
* u/ A1 V, C& [5 N( }- M3 F  HTML属性以及相对应的CSS方法 # C8 i. o4 V) u+ X- k/ N+ |
  HTML属性
! Q7 ^& V, `! w- t& f9 g* T
7 n; a7 Z+ w7 V8 i2 S3 i% _" p% j+ g4 q& q
  CSS方法说明 0 @5 X% S0 ~" O8 [0 \
  align="left"
: s& z. w) F* g# w3 s- M6 h; K: ?+ C" t9 |" m" K
  align="right" float: left;
# }) n6 C/ }3 Y8 J$ `) G5 I% v/ O. Y  E3 i% Q
  float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等
9 _' l' k3 b) W
, q0 ~/ j4 g! p3 J: F  F  当你使用float属性,必须给这个浮动元素定义一个宽度。 / l# s% W5 B: Y7 x( H9 s% m
6 {# j) O9 Q+ ^1 Q7 j/ u# S
  marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的,你可以分别指定元素的top, right, bottom和left的margin值。 6 g7 g% e7 t% r2 G8 O* Q
( U1 b8 M( B; {, S+ \" F
  vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff; 4 E0 Y/ c5 D+ H/ U- S) a* G! u
3 x! [$ F1 y7 k: h7 ?; L
  a:visited: #339;
" d" s1 d, w, ?+ I. w, A. N% Y$ v0 [  o) G" f
  a:hover: #999; ) f0 b2 q, W+ g4 B2 k

% [# o8 S# y( G, c) C, ~  a:active: #00f; / }# I* n8 q. t, k
  在HTML中,链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器,页面不同部分的链接样式可以不一样。 4 V' z6 u$ R, c+ O

5 b( c6 k3 @3 T  L4 f% `  bgcolor="#FFFFFF" background-color: #fff; 在CSS中,任何元素都可以定义背景颜色,不仅仅局限于body和table元素。
' ]) D+ ^. V% S' l/ W$ Z$ j
+ Q' K2 B+ M! c( k  bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder),你可以分别定义top, right, bottom和left
1 R" M& F, h6 G5 g% y' B$ H6 X, o4 q6 x: K, H
  border="3" cellspacing="3" border-width: 3px; 用CSS,你可以定义table的边框为统一样式,也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。 2 o' @7 y7 h  ~& G8 ^/ h, o  X' V

$ u$ J# |! K; @  l' E* b5 R  你可以使用 table, td or th 这些选择器.
% z6 }2 e6 g+ x0 C7 J2 V& u# p( e$ s# Y. p& W0 ]
  如果你需要设置无边框效果,可以使用CSS定义: border-collapse: collapse; . ?  x+ g6 F/ }0 l( S

" \1 v% q) h" o2 m  <br clear="left">
( ]. P2 ~4 g9 u- [* A  
! x' T6 n" s1 ~  <br clear="right">
! A8 Q$ r" a' _' R' J+ S5 [, P% r) {; W
  <br clear="all">
* Z- |7 c' d2 I$ M. E& l( O0 M7 v, ^
  clear: left;
2 _, Z) z; D3 O7 `% t. P; N1 t  s) x
  clear: right;
8 d) z, K# R3 k4 O& L" C0 z% ]# _0 @7 M' J: v
  clear: both; 4 l* @: \/ W0 t: P4 W$ @
  许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片,你可以使用clear属性. / M: ?' U( T5 m- g
$ H# R% |! _) o3 ?% T6 _! M. e6 X
  cellpadding="3" 8 x# X- _6 N7 z  U

$ @0 s% V& [1 {2 u) B/ w  vspace="3"
9 Q' j# T$ ], Y0 c' H9 y
; p/ B( U1 }1 {) }- l$ A  hspace="3" padding: 3px; 用CSS,任何元素都可以设定padding属性,同样,padding可以分别设置top, right, bottom and left。padding是透明的。 % [2 o0 o$ S  l. x! z9 Y

6 g* K" A! P( s* `  align="center" text-align: center;
' @& K: ]  C" I1 n. {+ f: s0 e
, B. P% e+ A. g1 d  N* a  margin-right: auto; margin-left: auto;
/ A+ t0 n" i' a  Text-align 只适用于文本. " i7 M3 j. |& d9 K8 b
: n: @; T  p6 Y
  象div,p这样的块级可以通过margin-right: auto; 和margin-left: auto;来水平居中
; e6 \# b( m; I( ~3 u( \
( C: m1 R1 b& s4 E  一些令人遗憾的技巧和工作环境
6 K% C! m8 E5 m& y. F% E# g2 C. B$ B! M0 ]' G& U; S2 G
( h+ a0 V5 X1 S) E4 `
由于浏览器对CSS支持的不完善,我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效 果。例如块级元素有时侯需要使用水平居中的技巧,盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。" m# C5 C% h0 D
  另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。 ) x' F# P4 k/ e* N0 g8 @

* P2 m7 C  H  v2 D2 a& o  理解浮动行为
0 L& m+ V7 P: {, P* k$ U- I$ b2 r" b4 ^& o( n
  Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear),阅读《How To Clear Floats Without Structural Markup》将非常有帮助。 ( T% n  @1 w- ?/ D( f
, d- R3 {# E1 P& I6 y4 T
  更多帮助
4 L$ t2 z+ K7 F( w5 R: {8 t/ B; G
  已有的《CSS Discussion》列表是很好的资源,它收集了一个WiKiA讨论组的信息,其中包括CSS布局总结(css- discuss.incutio.com/?page=CssLayouts),CSS 技巧总结 (css-discuss.incutio.com/?page=CssHack) 以及更多。

现在似乎很流行div+css布局哟 + |1 N1 o) l+ t: o1 L* @& n; N
要逐渐的用div取代table布局  好像是table不方便用dom操作

TOP

看了头都大了啊。我是初学,都不知道从哪入手啊

TOP

回复 3# 的帖子

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

TOP

返回列表
【捌玖网络】已经运行: