谢振华

摘 要：从过去到现在，流行过几种常用的网页布局设计，但现在div+css的布局无疑是最流行的。Div+css之所以流行，是因为具有过去网页布局所不具备的优点，优点体现在：网页的内容与表现形式分离。本文从div+css布局技术的概念和优点开始，后结合具体的例子，展示div+css布局的设计和实施过程。

关键词：div+css；布局设计；网络技术

中图分类号： TP39 文献标识码： A 文章编号： 1673-1069（2016）11-151-2

0 引言

随着web 网络技术的发展，采用di+css布局设计逐渐开始流行起来了。Div+css布局设计将web网页的内容和表现形式进行分离，分离之后的表现形式可以以文件的形式进行保存，而文件又可以让更多的web网页内容进行访问，以此达到表现形式可以在不同的网页内容之间进行共享。去除了表现形式的网页内容，将比以前变得更加精简，这样更利于搜索引擎搜索，提高web网页的语义。

1 div+css介绍

Div是html标记的一个常用标签，表示文档中的一区块，我们可以设置该区块的大小，该块里可以容纳其他的标记和子div区块。Css，是层叠样式表。通过它可以精确的控制html标签的表现形式，包括页面的布局，背景和其他效果。Css可将网页的所有表现形式完全与内容脱离出来，css可以在行内定义，头部中定义，也可以在文件中定义。

2 div+css优点

Div+css优点有很多，这里主要说出几个必要的优点，首先，内容和表现形式分离，在html文件中存放网页内容，在css样式文件中存放了表现形式。其次，提高客户访问web网页的速度，最后，与搜素引擎的关系更加友好，提高搜索引擎对网页的搜索速度。

3 网站布局设计

①网站整体规划。

做网站开发之前，首先要做的是网站外在表现形式的规划，我们称之为整体规划。整体规划是确定网站分为几个部分，一般都分为网页顶部，网页侧边栏，网页中间内容块，网页尾部等。设计如图1所示：

②网页代码设计。

针对上面的网页整体规划，Index.Html文件代码编写如下：

Exp.css文件如下：

* {padding： 0； margin： 0； }

body{width： 900px； margin：0 auto； #header{width： 900px； height： 100px；

#logo{width： 50%； height： 70px； #menu{width： 100%； height： 30px；

#nav{width： 180px； height： 300px； float： left； #main{width： 720px； height： 300px； float： left； #footer{width： 100%； height： 100px； clear： both；

③网页代码设计完成之后，我们把网页更新成模板，审视网站不变的部分和变化的部分，一般情况下，header部分和footer部分都是不变的，其他部分是动态变化的。

先把header部分和footer部分设计为单独文件，分别为header.html和footer.html

header.html 如下：

主要文件改成：

④其他板块设计要素也很重要，导航菜单一般采用div-ul-li 局部布局进行样式设计，图文混排的布局采用div-dd-dt/dd 进行设计，表单等一般采用div-form-table等，菜单设计代码如下：

* { padding： 0；margin： 0； } body { width：900px；margin： 5px auto； } ul{ list-style： none； text-align： center； } ul li{ width： 100px；float： left；} ul li ul{ display： none；position： relative； } ul li：hover > ul { cursor： pointer； display： block； position： absolute； } ul li ul li{ width： 100px； float： none； }

4 小结

本文先介绍了div+css的布局技术，后结合一般情况，进行了网站布局设计，最后升级为模板设计，并给出了相关的代码，该文不仅对网络整体设计进行了布局，而且对局部也进行了设计，该div+css网站设计流程就有很强的通用性，适合动态网站前台设计。现在动态网页技术开发有好几种，能够根据动态网页技术开发的特点，选取合适的静态网站布局技术，模板技术是笔者以后研究的课题。

参 考 文 献

[1] 曾顺.精通div+css网页样式和布局[M].人民邮电出版社，2014.

[2] 刘西杰，夏晨.Div+CSS网页样式与布局从入门到精通[M].人民邮电出版社，2015.

[3] 温谦，周建国，练源.网页设计与布局项目化教程（HTML+CSS+DIV）[M].人民邮电出版社，2013.