DIV+CSS在网页设计中的应用
2014-12-09陈翠娥
陈翠娥
摘 要：利用DIV+CSS代替表格进行网页布局是目标比较流行的页面排版方式。使用这样的布局方式实现了网页的表现与内容相分离，增加了代码的可读性，从而使开发和维护都变得简单，增加了信息跨平台的可用性。
关键词：DIV+CSS；网页布局
1 DIV+CSS布局案例解析
本案例通过一个网页首页布局实例（如图1所示）来讲解如何通过DIV+CSS来进行网页布局，并通过详细讲解网页头部的制作来让大家体会使用DIV+CSS来进行网页布局的神奇功效。
1.1 确定布局
图片大致分为以下几个部分：⑴顶部部分，其中包括menu菜单和baaner图片；⑵内容部分包括侧边栏和主体内容；⑶底部包括一些版权信息。根据以上分析，我们可以得出该页面的布局结构，说明一下层的嵌套关系。至此，页面布局规划已经完成，接下来我们需要做的就是开始书写HTML代码和CSS。
1.2 定义语义结构
根据结构规划，在index页面中的
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.3 通过CSS进行定位
首先确定网页的全局样式，然后在写每一块的单独样式，全局样式的代码如下：
body{padding：0； margin：0； background：url（images/body_bg.gif） 0 0 repeat-x #FFFFF2；
color：#676749；}
div， h1， h2， p， form， label， input， textarea， img， span{margin：0； padding：0；}
ul{margin：0； padding：0； list-style-type：none；}
全局样式定义好以后，再定义网页中几大主要板块的样式，其代码如下：
#container{width：768px；margin：0 auto；}
#header{ background：url（../images/header.gif） 0 0 no-repeat； width：768px；height：208px；
margin：0 auto； padding：7px 0 0 0； position：relative；}
#mainbody{width：762px； margin：0 auto； padding：21px 0 29px 10px；}
#leftside{ width：314px； border-right：#F5F5E2 solid 2px； float：left； }
#content{ width：408px； padding：0 0 0 38px； float：left； }
#footer{width：100%；height：50px； margin：0 auto； position：relative； background：url（../images/footer_bg.gif） 0 0 repeat-x #84845F； }
完成页面整体框架的搭建，就可以开始对每个细致的部分进行制作了，接下来开始制作网页的header部分。Header部分包括menu菜单和banner图片部分。本案例中菜单的制作采用li列表制作菜单，首先在header DIV标签对之间插入以下代码：
打开css文件创建header下ul和li的样式，代码如下：
