Div+css网页布局设计实现
2016-05-23谢振华
谢振华
摘 要：从过去到现在，流行过几种常用的网页布局设计，但现在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等，菜单设计代码如下：
Css文件如下：* { 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.
