2021.5
1概述
DIV 和CSS 目前在网页布局设计中具有不同寻常的
含义，是一个非常关键的网页布局技术组合。DIV 可以完成网页整体布局和框架结构设计，也可以运用网页标记和语言等关键元素，为网页设计提供一个系统化和结构化的背景，并且形成一个整体的网页定位技术,DIV 技术可以为网页设计提供约束配置和控制功能，有效地保护网页设计文档[1]。CSS 技术可以为网页设计提供层
叠样式表，为网页设计提供信息标记语言，准确地控制网页版面的布局、颜、背景，提高了网页版面的丰富多彩性，也可以触发网页设计者的灵感，确保用户的体验更加简易，增强人们浏览互联网的兴趣[2]。
以某网页布局设计为研究实例，详细地描述DIV
和CSS 技术在网页布局模型、CSS 样式定义和页面DIV 布局代码3个方面的内容，进而可以分析DIV 和CSS 有效地集成在一起的应用效果，可以更好地满足网页设计师的工作需求，提高了网页设计的规范性，通过元素分离可以让网页设计样式和内容单独呈现，实现网页操作的灵活性，保证网页操作的美观性、易操作性和便捷性。
2
基于DIV 和CSS 的网页布局应用实例
2.1网页布局模型分析
以某学校门户网为设计案例，在网页设计之前，设
计师需要构建一个整体的框架布局，实现全局管理网页空间，明确网页的DIV 层的嵌套关系，通常情况下，网页布局的空间结构包括4个部分，分别是标题区、导航区、主功能区和页脚。标题区位于网页的顶部，可以显示网站的名称和Logo [3]。导航区位于标题区的下方，可以显示网站的索引关系，能够为网页提供工具栏或站点主菜单等交互链接。主功能区位于网页的中间，能够
显示网站的主要内容，比如学校的通知信息等。页脚位于网页的底部，可以显示学校网站的地址信息、信息、版权信息、备案声明。网页布局设计时利用<div>标记可以定义空间结构，构建一个网页的基本结构。
2.2CSS 样式定义
CSS 技术可以能够确保门户网大小自适应，利用边
距的auto 功能，可以根据不同的应用设备屏幕尺寸，实现网站的自适应伸缩[4]。学校门户网采用CSS 样式定义后，其可以更好地实现整体规划和操作，进一步实现门户网的操作和服务，提高学校门户网的自适应操作。网页空间结构布局完成后，可以针对每一个DIV 模块的CSS 样式进行定义，开发和实现网页空间结构的内容填充和形式定义，建立CSS 样式表文件，比如可以确定DIV 层的大小和位置，比如对学校网站的头部进行定位，位置position 设置为relative，这样就可以根据屏幕大小进行自适应移动，宽度width 设置为1000px，上边距margin-top 设置为10px，下边距margin-bottom 设置为20px，左边距margin-left 和右边距margin-right 设置为auto，相关的CSS 样式结构代码如下所述:
#header
{
position:relative;width:1000px;margin-top:10px;margin-bottom:20px;margin-left:auto;margin-right:auto;
作者简介：李英(1969-)，硕士，高级讲师，研究方向：计算机技术。
基于DIV 和CSS 的网页布局技术应用与研究
李英
（鞍山市广播电视学校，辽宁鞍山114200）
摘
要：目前，社会已经进入到了“互联网+”时代，门户网不仅布局于PC 电脑，同时还需要布局于智能手机等移动设备，为人们提供了强大的数据共享、网络服务能力。网页布局也需要改进和提升，不仅诞生了HTML5技术，还引入了DIV 和CSS 技术，以便能够实现PC 浏览器和智能移动设备的双部署。以学校门户网设计为案例，详细地分析DIV 技术和CSS 技术的应用实现，构建一个整体的网页布局模型，实现网页内容的合理规划，还可以基于CSS 实现网页布局的自动适应，适应于不同大小的屏幕尺寸，进一步提高网页服务水平。
关键词：网页布局；DIV 技术；CSS
技术；门户网
17
2021.5
}
2.3页面DIV 布局代码
学校网站可以根据DIV 的规划的空间结构和CSS
样式代码，在每一个页面中插入DIV 标签，完成学校网站页面内容的填充，同时可以将CSS 样式代码附加到主页中，完成DIV 布局代码,DIV 在网页布局中的定义结构代码如下所述:
<body>
<div id="wrapper">显示网站的页头内容</div><div id="header">显示网站的标题内容</div>
<div id="container">显示网站的页面层容器内容</
div>
<div id="sidebar">显示网站的工具栏内容</div><div id="maincontent">显示网站的主功能区内容</div>
<div id="footer">显示网站的页脚的内容</div></body>
其中,wrapper 表示门户网的主体，以便能够与页脚进行区别,header 表示门户网页头,container 表示门户网的内容;sidebar 表示侧边导航工具栏;maincontent 表示门户网的主要功能区，可以划分为左边栏、右边栏、上边栏和下边栏，使用DIV 可以针对主功能区进行更加细化的、嵌套的分割，从而可以美化门户网页面布局;footer 表示门户网的页脚，可以利用DIV 设置页脚的开始位置和结束位置。
3基于DIV 和CSS 的网页布局应用优势
目前，网页布局设计已经成为门户网吸引用户、保
持网站流量大增的重要工具，因此采用先进的网页设计工具，可以大幅度提高网络的浏览效果，也可以充分地利用DIV 或CSS 等工具整合网页元素，实现网页颜、大小、版式的规范化，提高网页数据和交互效能。另外，网页布局采用DIV 和CSS 技术，可以有效地简化网页维护工作量，提升网页的数据传输效率，增强网页的界面渲染效果，为用户提供一个友好性较强的操作服务。3.1简化网页维护工作量
采用DIV 技术和CSS 技术之后，设计师不需要更
改全部代码，只需要对部分关键代码进行维护和更新即可，提高了网站升级维护的工作效率，为网站的升级打下坚实基础。
3.2提升网站数据传输效率
互联网操作友好性不仅是网站友好性，更重要的是
网站数据信息的传输效率，以便能够提高网站页面的响应速度和并发承载量，采用DIV 和CSS 技术，可以将网页中的代码、数字和文字高效传输，并且可以过滤无
效的和不合规范的数据信息，进一步提高网站的响应速度，从而可以让人们等待更短的时间，提高网站页面的层次感和快捷化。
3.3增强网页的视觉交互效果
采用DIV 和CSS 技术可以为学校网站提供一个更
加合理的网页空间布局,DIV 可以封装网页布局子模块的内容，这些内容包括视频、图片、文字和表格,CSS 是一个层叠式的样表，可以精确地控制网页的布局、背景和其他可视化效果。因此可以结合学校的实际需求，设计一个风格独特的网站界面，提高网页的视觉效果，也可以带来积极性的推广效果。
3.4自适应的改变网页大小适应不同尺寸屏幕
DIV 和CSS 技术可以增强网页的自适应水平，方便
常用css布局门户网适应不同尺寸的设备，比如PC 电脑屏幕大，可以根据浏览器的大小进行自适应智能手机或平板电脑的屏幕尺寸小，合理优化大小屏幕版式和内容，这样就可以保证网页大小合理化，不会产生严重的网页渲染效果变形等问题，方便用户浏览和查看，提高网页开发的可靠性、稳定性，更好地利于网站的推广。
4结语
网页布局设计是一个复杂的、系统的工作，其需要
结合网站设计的实际需求，引入更加先进的网页布局设计技术，比如DIV 和CSS 等，有效地探索网页布局，利用DIV 实现网页整体架构的规划，实现内容与形式分离，精简网页设计的代码，促使网页空间结构更加简单和清晰，提高网站搜索引擎的索引效率，也可以利用CSS 技术提高网页开发效率，并且可以为未来网站升级提供契机，降低网页开发的工作量，提高网站维护的效率。
参考文献
[1]李彦.DIV+CSS 技术在网页设计布局中的应用研究[J].微型电脑应用,2020,036(003):19-21.
[2]申永芳.高校门户网站设计中DIV 与CSS 布局技术的应用研究[J].宿州教育学院学报,2019,022
(004):87-89.
[3]高葵，付晓翠，李蔚妍.基于CSS +DIV 的固定宽度与变宽度网页布局剖析[J].计算机科学与应用,
2020,10(2):9-10.[4]赵菁.采用DIV+CSS 技术的内网门户的设计和制
作--以大庆油田第四采油厂为例[J].信息系统工
程,2019,303(03):51-51.18

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。