Div+CSS 基础demo_html/css_WEB-ITnose

     今天看到一个div+css 布局的经典教程，奉献给大家，本人一向偏好div+css，
但由于关注seo 和网站运营较多，造成了div+css 做网页模板的技术生疏，为
了培养自己成全才，不得不好好消化一翻，其实很简单滴。这个div+css 布局
教程很不错。
教程共分5 节，其实就一点点内容，不过通过学习，一定能让你领会到div+css
的精髓，不要嫌文字多，一个小时一定能让你学完，当然是针对熟悉网页制作
基础的朋友。
在网页制作中，有许多的术语，例如：css、html、dhtml、xhtml 等等。在下
面的文章中我们将会用到一些有关于html 的基本知识，而在你学习这篇入门教
程之前，请确定你已经具有了一定的html 基础。下面我们就开始一步一步使用
div+css 进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要用photoshop 或
fireworks(以下简称ps 或fw)等图片处理软件将需要制作的界面布局简单的构
画出来，以下是我构思好的界面布局图。

下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU 和一幅Banner 图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理
解起来就会更简单了。

DIV+CSS布局基础经典

DIV+CSS布局基础经典

220

查看详情

Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
DIV 结构如下：
│body {} /*这是一个HTML 元素，具体我就不说明了*/
    └#Container {} /*页面层容器*/
          ├#Header {} /*页面头部*/
          ├#PageBody {} /*页面主体*/
          │    ├#Sidebar {} /*侧边栏*/
          │    └#MainBody {} /*主体内容*/
          └#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML 代码和
CSS。
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS 布局练习”，在文件夹下新
建两个空的记事本文档，输入以下内容：
br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">