科学技术创新
基于“D i v+C SS 盒模式”的分屏式网页设计与实现
——
—以电商购物网站为例黄杰
(常德职业技术学院，湖南常德415000)
信息全球化时代背景下，互联网已经融入到社会各个领域，深刻影响着人们生活的方方面面。网站作为互联网的信息交互窗口，页面布局的表现方式对访客接收信息具有决定作用。作为当前网页设计主流技术的“Div+CSS 盒模式”，在外观样式、网页布局、模块搭建等方面展现了强大的工作特性，通过“Div+CSS 盒模式”实现分屏式网页布局，能够大大提升网页设计效率，同时引领了一种新的网页布局理念。
1D I V +C S S 技术概述
“Div+CSS 盒模式”作为目前互联网市场主流的网页布局技术，引领了一股新的网页设计趋势。打破了以往采用表格、框架、模板等手段进行网页布局的观念，将网页内容和外观样式进行独立编辑。DIV 是网
页编辑语言中的一个盒标签，具有搭建网页模块的作用，形成一个独立的网页容器，存放不同的网页内容;CSS 是层叠样式标签，能够改变网页元素的基本属性以及定义元素规则，通过嵌入代码、内联标签、外部链接等方式添加网页外观样式;Div+CSS 盒模式融合了二者的功能特性，建立一个相对灵活的盒子模型作为页面容器，通过在容器中填充网页内容，确定层级关系之后借助CSS 层叠样式表为目标元素定义规则属性，并实现网页元素准确定位，能够有效提升网页布局效果。除此之外,“Div+CSS 盒模式”更是一种促进数据交互的手段，对于分屏式网页设计具有重要意义。
2“D i v+C S S 盒模式”对于网页分屏设计的优势2.1减少代码重复编写，简化结构体系
网页设计的繁复性造成了大量冗长的代码结构出现，对于分屏式网页来说，无可避免会产生重复性代码，在技术要求上必须保证页面访问的流畅性和模块的独立性。运用“Div+CSS 盒模式”将网页源代码划归为块级结构，一方面，大幅减少了网页代码的重复编写，保持代码结构清晰、工整，有利于提高
工作效率；另一方面，便于快速查编写错误，及时修改代码，压缩了后期网页运维过程中成本消耗。与此同时，结构简化后的网页界面的运载速度增强，用户操作响应及时，尤其是图片、视频等大存储文件的缓存无需用户长时间等待，有利于提升用户浏览体验感。
2.2分层级嵌套，统一样式管理
分屏式网页设计拓宽了信息传递渠道，同时也加大了网页代码编写的工作量，造成众多网页元素的管理工作较为复杂。“Div+CSS 盒模式”把同类型或同样式的网页元素划分为块级单
数据库是什么的简称位，建立一种CSS 样式表可供多个块级单位同时调用，省略了很多不必要的代码写入环节。在遇到修改问题时，如背景、文字、彩等参数设置，即可在CSS 样式表中进行修改，调用该样式表的块级单位则会自动检测新指令并完成网页元素的更新。由此可见,“Div+CSS 盒模式”将网页元素统一规划管理，很大程度上促进了分屏式网页布局的有序性和系统性。
2.3灵活构建模块，表现形式多样化
五阶魔方教程一步一步图解“Div+CSS 盒模式”在网页布局方面表现出灵活性和多样性的特点，将内容和样式从以往的编写公式中划分出来。在分屏式网页布局中，页面划分为不同的区域，每个区域显示不同的界面，界面之间可以同步运行浏览器窗口。依靠“Div+CSS 盒模式”搭建页面模块，模块中可填充多种形式内容，并且可变
换多种表现样式。配合CSS 样式表对模块的外观及位置进行参数设置，例如自定义大小、颜、边框粗细等属性，以及自由调整模块位置与间距。进一步缩小了分屏式网页设计排版的局限性，网页的交互性空间大幅提升。
3“D i v+C S S 盒模式”在电子商务网站的应用3.1确定网站主题合理布局页面
电子商务网站的定位应该是为用户提供商品销售服务，那么网页设计始终围绕两个深层内涵，一是让用户能够了解网站销售的商品，二是让用户购买商品。如图1所示,“Div+CSS 盒模式”应用于在百货商城网站中，根据主题需要，商城页面由两个分屏板块构成，为左右并列布局。左边为商城主页，包含导航栏、菜单栏、活动banner 以及部分商品陈列等基本内容；右边为店铺子页，主要是商品详情展示，包含价格、细节图片、参数以及评价详情等内容。
图1百货商城网站
摘要：伴随互联网在社会各领域的广泛应用，网页设计技术研究开始为人们所关注。作为当前网页设计主流技术的“Div+CSS 盒模式”，被广泛应用于不同形式的页面布局和外观设计，并且技术逐渐成熟。分屏式网页布局成为网页设计新的发展趋势。本文以“Div+CSS 盒模式”为技术基础，对该技术在分屏式网页设计中的应用展开系统研究，并且以电商购物网站为案例，进行实践操作演练，以为后期理论成果提供参考依据。
关键词:“Div+CSS 盒模式”；分屏式网页；设计中图分类号:TP311.5文献标识码:A 文章编号:2096-4390(2021)
16-0074-02项目来源:2019年常德职业技术学院重点课题“基于Div+CSS 盒模式的分屏式网页设计与实现”，课题编号ZY1905。作者简介：黄杰(1991,1-)，男，回族，籍贯：湖南常德，学历：研究生，硕士学位，讲师，研究方向：电子商务。
74--
2021.16科学技术创新html个人网页完整代码div+css
3.2DIV+CSS技术在网站首页的框架设计
创建商城网站的分屏式网页布局，首先应对商城首页框架结构设计，利用“Div+CSS盒模式”能够快速、有效地建立网站框架体系并进行框架结构调整。以百货商城网站为例，左右分屏均采用“三”字型布局结构对页面内容进行<Div>块级分区，如图2所示的百货商城框架结构图。
图2百货商城框架结构图
3.3利用“Div+CSS盒模式”划分页面区块
百货商城网页设计完成分级嵌套容器后，用<Div>标签对最后一级内容页面划分区块，并借助CSS样式表空间定位，以保证内容填充后不影响网页整体的布局结构，如图3所示的页面结构区域图。
图3页面结构区域图
第一，顶部为商城标志区域，展示商城名称及品牌标志；第二，顶部下方建立网页导航栏区域，设置页面主菜单等；第三，中间部分建立商城主体区域，展示商品分类条目和部分商品图片；第四，尾部为网站版权信息以及合作方链接等。
<Div>标签代码结构如下:
#top
search
{
width:350px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
}
#middle
{
width:280px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;}
新闻后台管理系统模板
#bottom
{
width:350px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
}
<body>
<div id=“top”>名称、logo</div>
linux上编程
<div id=“middle”>主体内容</div>
<div id=“bottom”>版权、合作商</div>
</body>
以上代码标签是对页面布局结构的基本描述，详细区块的划分需要建立多个相应的<Div>标签，并且嵌入CSS样式表定义参数值，最终填充内容完成分屏式网页布局。
结束语
分屏式网页设计的初衷是拓宽信息传递途径和方式，致使网页信息呈现多样化的表现形式，有效增强用户体验感。采用“Div+CSS盒模式”能够灵活划分页面区块，构建分屏式网页布局整体结构，同时“Div+CSS盒模式”将标签和样式表相分离，简化网页代码编写过程与组成公式。总体来看，分屏式网页中采用“Div+CSS盒模式”缩短了页面浏览过程中网页元素的加载时间，有效提高信息传输效率，网页可读性大幅增强，为网站运营提供了诸多便利。虽然“Div+CSS盒模式”在页面布局中具有明显优势，但是对于分屏式网页布局而言不能一概而论，更应该不断更新和完善技术理论体系，促进网页设计领域迈向更高的水平。
参考文献
[1]武海丽，李彩玲.DIV+CSS技术在网页制作与设计中的应用研究[J].无线互联科技,2016(3):69-70.
[2]杨瑞梅.浅谈DIV+CSS布局技术在网页设计与制作中的应用[J].信息记录材料,2017(7):118-120.
[3]钟艳华，毛敏莉.CSS+DIV布局方法用于网页制作的实践探究[J].电脑迷,2016(6):51-53.
[4]杨瑞梅.浅谈DIV+CSS布局技术在网页设计与制作中的应用[J].信息记录材料,2017(07):22-23.
[5]程序.基于DIV+CSS布局技术的网页设计实现与优化[J].信息记录材料,
2018(05):75-76.
75 --

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