返回列表 回复 发帖

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

一、页面布局与规划3 S0 r# B7 x$ X9 g0 V$ M

" U, {2 [# c1 v+ ?1 S  好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧...7 A! i# ]; w2 m6 [
: i! u/ ?- W3 r
  在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。1 A9 \- S; V* K1 f+ F% r' P" |( o3 m; B

' h9 s( Z4 F- A3 ?5 b1 g1 J. ~  所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。
: H* n& e& W; }, d- E
9 G$ B, J# ?3 e9 V0 M2 d* c2 [! w* j/ m

9 N; Z" N, Z5 E5 a+ y下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:& w! B: |) x' b/ ^- P" J
  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;8 c2 J- f$ x) X1 \
  2、内容部分又可分为侧边栏、主体内容;
. _4 J2 f& m( C/ y+ d) i# y" i  3、底部,包括一些版权信息。
. r$ ]! c" f6 g4 R8 ^! ?, h3 p  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:
4 q. e' w; q4 Y' a8 E( ~" w  A
0 T$ B3 o  G  I

9 C$ d) _( C' S6 J根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。, J, c- v+ T5 a2 x# X# W( v. J
0 Z! a; O- [  \1 U

- Z8 O3 s7 ~+ ^( c: G
4 k" {. ]- X" m3 ]% k) bDIV结构如下:
3 B0 ?) Z; \6 i( P  @: |  │body {} /*这是一个HTML元素,具体我就不说明了*/
) m& m% ^" X4 C, W' \  └#Container {} /*页面层容器*/
5 X& F7 j* M& R* _7 |+ o     ├#Header {} /*页面头部*/
/ u! R3 ~1 ~! l; x5 R; u$ P0 [     ├#PageBody {} /*页面主体*/7 J% b" u" V+ n8 g0 P
     │ ├#Sidebar {} /*侧边栏*/+ a6 F8 U! U* D. P* L
     │ └#MainBody {} /*主体内容*/- C: |5 p$ C2 f4 O0 ~  x5 }
     └#Footer {} /*页面底部*/
; ]7 Z6 d- R$ S5 S- J3 L  至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
藕家看不明白的说。
7 o9 D. `; K. y3 y" l, L
  z4 l/ d/ c9 s! x9 Q& v( g哎,该要学习去唠……
因为你追逐快乐,
又对快乐置之不理,
所以,你是一个5岁的女人!
返回列表