摘 要：从过去到现在，流行过几种常用的网页布局设计，但现在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.
- 新常态下城市科学发展的必然选择
- 崇州农金创新实践带来的启示
- 苍溪猕猴桃产业发展的实践与思考
- 用三大效应壮大集体经济
- 三台农商银行
- 凉山农商行西昌支行
- 安州农商银行
- 岳池县联社1
- 岳池县联社
- 中行泸州分行1
- 中行泸州分行
- 古蔺农商银行
- 隆昌农商银行前锋支行
- 江阳农商银行石岭分理处
- 龙马潭农商银行
- 兴文农商银行
- 叙永农商银行
- 大竹农商行网点转型“小清新”
- 发展与风控并重促成长
- 金融知识进校园、社区、乡村
- 一个农信客户经理的工作日记
- 石棉联社：党建+让金融扶贫与基层党建“双推进”
- 农信社资金业务发展策略
- 资金业务风险防控管理建议
- 农商行资产负债结构优化之策
- angler
- anglers
- angles
- anglewise
- angle²
- angle¹
- anglican
- anglicanism
- anglicanisms
- anglicanize
- anglicanly
- anglicans
- anglicise
- anglicised
- anglicises
- anglicising
- anglicism
- anglicisms
- anglicization
- anglicizations
- anglicize
- anglicized
- anglicizes
- anglicizing
- angling
- 半夜过独木桥
- 半夜里下雪——下落不明
- 半夜里下饭馆——有么儿算么儿
- 半夜里不见了
- 半夜里不见了枪头子——攮到贼肚里
- 半夜里偷桃吃——找软的捏
- 半夜里叫城门——找着碰钉子
- 半夜里吃黄瓜
- 半夜里尿床——想流到哪儿就流到哪儿
- 半夜里扯脚布——想起一条是一条
- 半夜里拾金宝
- 半夜里掘墓——捣鬼
- 半夜里撕裹脚布——提起一条撕一条
- 半夜里杀出个程咬金。
- 半夜里梦见做皇帝
- 半夜里的被窝（新郎新娘喝喜酒）——正在热乎劲上
- 半夜里肥猪拱门
- 半夜里起来摸帽子——找到头上来了
- 半夜里跑进城隍庙——见神见鬼
- 半大
- 半大不小
- 半大人
- 半大小伙子
- 半大小子
- 半大小子，吃穷老子