DIV+CSS在网页设计中的应用

2014-12-09 23:38陈翠娥

无线互联科技 2014年11期

陈翠娥

摘要：利用DIV+CSS代替表格进行网页布局是目标比较流行的页面排版方式。使用这样的布局方式实现了网页的表现与内容相分离，增加了代码的可读性，从而使开发和维护都变得简单，增加了信息跨平台的可用性。

关键词：DIV+CSS；网页布局

1 DIV+CSS布局案例解析

本案例通过一个网页首页布局实例（如图1所示）来讲解如何通过DIV+CSS来进行网页布局，并通过详细讲解网页头部的制作来让大家体会使用DIV+CSS来进行网页布局的神奇功效。

1.1 确定布局

图片大致分为以下几个部分：⑴顶部部分，其中包括menu菜单和baaner图片；⑵内容部分包括侧边栏和主体内容；⑶底部包括一些版权信息。根据以上分析，我们可以得出该页面的布局结构，说明一下层的嵌套关系。至此，页面布局规划已经完成，接下来我们需要做的就是开始书写HTML代码和CSS。

1.2 定义语义结构

根据结构规划，在index页面中的标签对中采用DIV将这些结构定义下来，代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DIV+CSS网页布局

<！--页面层容器-->

<！--页面头部-->

<！--页面主体-->

<！--侧边栏-->

<！--主体内容-->

<！--页面底部-->

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标签对之间插入以下代码：

contact

打开css文件创建header下ul和li的样式，代码如下：

#header ul{width：601px； height：38px； margin：0 auto； padding：0； }

#header ul li{ float：left； }

#header ul li a{display：block； padding：0 16px 0 16px； font：bold 10px/38px "Trebuchet MS"， Arial， Helvetica， sans-serif； color：#fff； background-color：#2A2A2A； text-decoration：none； text-transform：uppercase； float：left； }

#header ul li a：hover{background：url（images/nav_hover.gif） 0 0 repeat-x #330A0A； padding：0 15px 0 15px； border-left：#D63030 solid 1px； border-right：#D63030 solid 1px； color：#ECE8C3； }

#header ul li.home{ float：left； font：bold 10px/38px "Trebuchet MS"， Arial， Helvetica， sans-serif； color：#ECE8C3； text-decoration：none； text-transform：uppercase； background：url（images/nav_hover.gif） 0 0 repeat-x #330A0A； padding：0 15px 0 15px； border-left：#D63030 solid 1px； border-right：#D63030 solid 1px； }

接下来是banner部分的制作，包括logo和标题说明，在ul后面插入一下代码：

the best outputs for you Aliquam commodo purus sed orci.

打开css文件，写入图片、标题和超链接css样式，代码：

#header img{ background：url（../images/logo.gif） 0 0 no-repeat； position：absolute； left：39px； top：77px；}

#header h1{display：block； width：215px； height：39px；background：url（../images/slogan.gif） 0 0 no-repeat； text-indent：-10000px； position：absolute； top：120px； left：45px；}

#header a.click{display：block； background：url（../images/click_nor.gif） 0 0 no-repeat； width：107px； height：85px； position：absolute； left：618px； top：121px； padding：0； margin：0； }

#header a.click：hover{ background：url（../images/click_hover.gif） 0 0 no-repeat； }

2 结语

采用Div+CSS技术进行页面布局是当前比较流行的布局方式。它最大的优势是实现结构与设计分离，并且摆脱了传统表格布局的局限性。当对页面进行更新时，只需调整相应需要修改的代码。这样既减轻了维护者的工作量，又提高了网页开发的效率和页面下载的速度，提高了网站维护和修改的效率。

[参考文献]

[1]曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社.

[2]郑宁宁.浅析DIV+CSS网页设计技术.山东省农业管理干部学院学报.

[3]王俭敏，等.CSS+DIV网页样式与布局案例指导[M].北京：电子工业出版社.

contact

打开css文件创建header下ul和li的样式，代码如下：

#header ul{width：601px； height：38px； margin：0 auto； padding：0； }

#header ul li{ float：left； }

接下来是banner部分的制作，包括logo和标题说明，在ul后面插入一下代码：

the best outputs for you Aliquam commodo purus sed orci.

打开css文件，写入图片、标题和超链接css样式，代码：

#header img{ background：url（../images/logo.gif） 0 0 no-repeat； position：absolute； left：39px； top：77px；}

#header a.click：hover{ background：url（../images/click_hover.gif） 0 0 no-repeat； }

2 结语

[参考文献]

[1]曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社.

[2]郑宁宁.浅析DIV+CSS网页设计技术.山东省农业管理干部学院学报.

[3]王俭敏，等.CSS+DIV网页样式与布局案例指导[M].北京：电子工业出版社.

contact

打开css文件创建header下ul和li的样式，代码如下：

#header ul{width：601px； height：38px； margin：0 auto； padding：0； }

#header ul li{ float：left； }

接下来是banner部分的制作，包括logo和标题说明，在ul后面插入一下代码：

the best outputs for you Aliquam commodo purus sed orci.

打开css文件，写入图片、标题和超链接css样式，代码：

#header img{ background：url（../images/logo.gif） 0 0 no-repeat； position：absolute； left：39px； top：77px；}

#header a.click：hover{ background：url（../images/click_hover.gif） 0 0 no-repeat； }

2 结语

[参考文献]

[1]曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社.

[2]郑宁宁.浅析DIV+CSS网页设计技术.山东省农业管理干部学院学报.

[3]王俭敏，等.CSS+DIV网页样式与布局案例指导[M].北京：电子工业出版社.

无线互联科技2014年11期

无线互联科技的其它文章: 校园网的规划与设计; 基于3G网络的远程视频监控系统在电力施工现场的应用; 如何部署Web Service（Web服务）; 基于云存储的特殊教育资源库建设的思考; 物联网技术发展及应用展望; 试分析网站安全管理的技术性内容