返回列表 回复 发帖

[转载] Div+CSS布局入门教程(一)

一、页面布局与规划2 c, @; A$ c0 z2 n0 q" \
$ V# [( Z) c+ i  j( y5 G; s
  好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧.... S  X# U! o* ^8 ?3 v

# F& p3 G3 p6 w( ^  在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。! M2 }% c7 Y$ u4 u

4 Q" z8 d8 v7 [: @1 E% G- [  所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。
0 q' s( I- W* R
& h- I& ?& ]! L* O: h( [2 T: F
; }: |9 i( b; c+ `; s2 r
3 `, _9 p9 F! L" }下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:
* G. C2 t  I4 w6 O" I- @! Z6 A3 Q  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;. |0 F/ ]& w0 N' b" \6 v  i( m
  2、内容部分又可分为侧边栏、主体内容;: P3 }5 ~0 T" ~! Q5 H7 F! T+ D7 G. @6 w
  3、底部,包括一些版权信息。
' l# z# S3 ~; m+ j* i" j0 O. A  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:
' H9 D4 o4 w6 n/ B0 I- P4 i+ ~1 W
/ t2 ?' t- G! L/ R2 p8 U6 F) _/ L

0 r( |, z' a" S根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。/ C" N& b+ r) B3 A6 W' B

2 M( V  v, \* s3 i: r
) q9 \4 U# S2 O+ u5 L% [
  l* l8 ?; N9 o" ZDIV结构如下:
3 @9 ~& X7 v. i$ }  │body {} /*这是一个HTML元素,具体我就不说明了*/. w& E) h* Z" r! w7 j- O
  └#Container {} /*页面层容器*/5 w: n+ N( r( T" M3 n7 k& q
     ├#Header {} /*页面头部*/' [- o/ i" f5 e" H
     ├#PageBody {} /*页面主体*/
' p- v& o8 ^. d6 q8 p     │ ├#Sidebar {} /*侧边栏*/# @) c  u3 F) U2 Q% i2 `1 I
     │ └#MainBody {} /*主体内容*// z% e4 x. b! X! @$ v- k. N$ w  |
     └#Footer {} /*页面底部*/" _8 I; R2 z2 W% O
  至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
藕家看不明白的说。
' V! W& r+ q1 ^# {$ g( m
0 u% X5 }( a3 j3 S哎,该要学习去唠……
因为你追逐快乐,
又对快乐置之不理,
所以,你是一个5岁的女人!
返回列表