返回列表 回复 发帖

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

一、页面布局与规划; v8 u% i6 U$ {6 N
. w, t" \( _, L( `( a
  好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧...
5 P+ p3 [1 ?8 O! z  R; u) @$ j5 s) M% S" ^% V# j
  在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
, t6 e6 e2 h# ^0 j: Q1 y1 F. a1 ~" o; w" U
  所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。
/ W* b. A$ L4 [9 J4 L% U# I4 P  R1 N1 d/ P3 Y, W  g/ ]
, e1 i& D; u- e6 c/ f' a( h3 B3 g

4 e  r0 i! S5 J/ T, ^下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:
/ K% K" m# ^" n/ T0 _. S) g. P  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;) P, \' S/ |, N  a1 q
  2、内容部分又可分为侧边栏、主体内容;1 M8 Y5 d. K9 @; }  {% `9 R* ]
  3、底部,包括一些版权信息。( ~1 g& k6 v: {% M0 P: x
  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:
- N$ @4 l6 a9 @" ]+ a9 n4 Q
/ e" Z1 }6 i3 ~! Q8 w0 n, ^! S
5 E3 f" k( e" K! m) y( Z; P1 c1 H0 Z- p
9 y7 }0 h- O, l/ m$ I& z) v2 V根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。
3 z& _" A: j; j& T
, _. ^+ w5 x9 l' Q/ |2 M* K/ ^+ H. A) l7 b2 ]

! o% n, X/ X" M) n5 z# g: KDIV结构如下:9 {! ^4 f3 U5 R, d
  │body {} /*这是一个HTML元素,具体我就不说明了*/, D7 h' w  u1 e
  └#Container {} /*页面层容器*/
1 ]) h! y* E% D' E  @, |0 O     ├#Header {} /*页面头部*/: X0 M5 m6 _$ e% b. ^4 m, z
     ├#PageBody {} /*页面主体*/
( r: t! I' G6 `* m+ I; `     │ ├#Sidebar {} /*侧边栏*/
4 g( M7 m' D; M8 A1 B% \( i     │ └#MainBody {} /*主体内容*/& g" O6 M1 q  b. G4 n
     └#Footer {} /*页面底部*/
/ r4 ]8 ]. H8 _9 l" w6 q' `( N  至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
藕家看不明白的说。: R8 n  O/ E/ u' n2 q7 w1 I

6 S: G8 a+ x4 h5 R0 Q* @* `哎,该要学习去唠……
因为你追逐快乐,
又对快乐置之不理,
所以,你是一个5岁的女人!
返回列表