*
®
实用第一/智慧密集
试谈W eb页面宽度自适应的布局设置技术
甘卫民
(广州大学华软软件学院网络技术系，广州510990)
摘要：在网页设计中，Div+C ss布局已成为网页版面设计的主要技术，简述了网页布局常用的方法，结合具体的代码实现，以简单页面的左右布局展开说明，重点论述了 DIV+C SS的自适应宽度的实现方 法。测试证明，此方法在网页运行中能更加灵活、清晰、简捷，能兼容多种不同的浏览器类型，在现代 化的多功能智能设备中更具可移植性。
关键词：页面布局；Div+CSS方法；宽度自适应
1DIV+CSS概述对网页的布局做整体的框架划分，DIV布局结构如图1
DIV是HTML的一个标签，<DIV></DIV>#签可以把网页文档分割为不同的独立部分，能支持不同类型的 主流浏览器'
CSS是用于控制网页样式并允许将样式信息与网页 内容分离的一种标记性语言。具体说，CSS是一组样式, 样式中的属性在HTML元素中依次出现，并且显示在浏 览器中。样式可以定义在HTML文档的标志（TAG)里，也可以在外部附加文档作为外加文档，此时，一个 样式表可以用于多个页面，甚至整个站点，因此，具有 更好的易用性和扩展性。CSS对网页中元素位置的排版 分布能够做到像素级的精确控制，页面内容所涉及的字 体样式、字号样式、颜样式几乎都能实现[1]。
DIV+CSS是一种网页的布局方法，也是Web设计 的一种标准，它在网页布局中内容和样式的分离，使页 面和样式的调整变得更加方便，在团队开发中更容易分 工合作而减少相互关联性，简洁的代码能提高网页的访 问速度，有利于搜索引擎优化、收录。最终能支持浏览 器的向后兼容，符合W3C标准保证技术不会因为网络 应用的升级而被淘汰[2]。
目前，在DIV+CSS的布局方式上大多数介绍的是固 定宽度的布局，这种布局方式在实际的网页布局应用中并 不广泛。为了能使网页在不同屏幕分辨率的终端设备上自 适应地显示，也能根据浏览器窗口的大小调整而灵活多 变，现在大多数网站应用类型基本都是采用自适应宽度 的布局方法。本文主要针对固定宽度布局方法的应用缺陷，重点讨论网站建设中的自适应宽度布局技术的灵活性。
2宽度自适应布局的两种技术
在DIV+CSS网页版面布局中，主要用DIV标签来所示。
图1DIV网页布局主结构
在图1中的每个方格块都是<〇!^></0!^>标签，每对D IV标签都用id标识相应的名字。#box块主要 表示整个页面的范围，也是所有D IV标签的父元素。有利于对整体网页调整。在#box内的中主要使用从 上到下的行结构布局，#top、#main、#bottom分别表 示网页头部、网页主体和网页底部，整体布局标签代 码如下：
<div id=寓box">
<div id=寓top"></div>
<div id="main"></div>
<div id="bottom"></div>
</div>
在图1中每对DIV标签设置CSS样式，进行自适 应宽度比例分布:#Box宽度属性值设为90%且居中，表 示网页显示能占整个浏览器宽度的90%; #Box内的各子
基金项目：项目编号JXTD201702。
作者简介：甘卫民（1979-)，男，硕士，讲师，研究方 向：Web开发技术与网络技术。
收稿日期：2018-04-19
2018.07
為编程技巧与维护>
2.1.2 Position定位DIV宽度属性值设置为100%，表示子D IV的宽度与父
D IV的宽度相等。CSS样式设置代码如下：
*{bo「de「:0px;ma「gin:0px;padding:0px;}
#box{ma「gin:0px auto;width:90o/〇;}
#top,#main,#bottom{width:100%;}
主要讨论以上#Main中的两个子D IV自适应宽度布 局的实现方法。
两列宽度自适应布局有2种方式：一种是两列宽度 均为自适应布局；另一种是单列自适应宽度。
在#皿3^的D IV中划分两个子DIV，使它形成左右 结构，根据网页内容与扩展要求对左右两DIV进行自 适应宽度属性设置。如图2所示，#left和#right分别为 #Main左右子DIV。具体标签代码如下：
<div id ="Box">
<div id ="Top"></div>
<div id ="Main">
<div id ="left"></div>
<div id ="「ight"></div>
</div>
<div id ="Bottom"></div>
</div>
图2列的布局
2.1两列情形[3]
即两列宽度显示可以在不同分辨率和不同浏览器的 窗口上宽度大小均可自由伸缩，一般是把两列的width属 性设置为百分比例，并且两列百分比之和建议设置略小于 100%，避免误差细数导致页面布局错乱。此种技术可使 用Float定位或Position定位来实现。如图2，将#left的width属性设置为69%，#right的width属性设置为30%。
2.1.1Float定位
Float定位只要设置左右两列分别为左浮动和右浮 动，这样设置两列均为自适应宽度的布局就变得更为简 单，CSS代码实现如下：
#left{float:left;width:69/〇; }
#「ight{float:left;width:30/〇; }
使用Position布局定位时，必须考虑Position定位 的基准兀素。由图2可以看出，#Main是#紐和#如&的父元素，也是它们二者的Position基准，因此设置 #Main 的Position:relative，然后将 #left设置为 Position: absolute，这样#left脱离的标准流，#right与#left发生 重叠，被#left覆盖，这时将#right的左边空隙设置为 margin-left:69%，这样就保证两者紧紧挨着且不会发生 重叠。CSS代码实现如下：
#main{position:「elative;}
#left{position:absolute;top:Opx;left:Opx;width:690/〇; }
#「igth{width:30%;ma「gin-left:69o/〇; }
2.2单列情形[3]
单列自适应宽度布局指其中一列为固定宽度，另一 列为自适应宽度的布局。在实际应用中，有时候需要左 栏固定宽度，右栏根据浏览器窗口大小自动适应。同样 也可使用Float定位或position定位来实现。举例说明：如将#right设置为固定宽度300px，#left为宽度自适应。
2.2.1float定位
一边固定宽度，一边自适应宽度，使用Float定位 主要考虑如何使#left在自身可以自由伸缩的同时，又 能给#right空出合适的宽度位置。以图3布局结构。在 #left标签外加一对父 DIV，命名为 #main_left，#main_left 与#^@&属同一级。布局标签代码如下：
<div id ="Box">
<div id ="Top"></div>
<div id ="Main">
<div id ="main」eft">
<div id ="left"></div>
</div>
<div id ="「ight"></div>
</div>
<div id ="Bottom"></div>
</div>
设置#main_left的width属性为100%，Float属性为 left，margin-left属性为-300px。具体布局CSS代码如下: #main_left{float:left;width:100o/〇;ma「gin-left:-300px; } #left{ma「gin-left:300px; }
#「ight{float:「ight;width:300px; }
2.2.2 Position定位
Position定位方法可参照上节思路及图2所示，将 (下转第136页)
2018.07
\V
电《编程技巧与维护
实用第一/智慧密集
备
9囿困g a s 困困图困B s s a a 困e l ®
社区学习者之间的深度互动较低，共46条，仅占 总数的11.88%。有18条记录在总结他人观点的基础上 进行反思，并对部分内容或细节提出了质疑；有17条 记录针对问题给出了详细的个人观点并提出了具体建 议，说明他们较深人地反思了相关问题并总结了自己的 经验和收集了大量的信息；仅有11条记录反映了学习 者将问题与现实相结合，并与他人进行了两次以上的探 讨以解决或论证相关问题和深人交换意见。在将这11 条记录与前面社区学习者点的度数中心度分析进行比较 发现，其中4条是在1号与17号成员之间，3条是在 10号与25号成员之间，笔者认为，这反映出越是处于 网络中心位置的核心成员越是积极主动地与他人沟通、 交流，同时也更深人地学习、反思相关信息。5
结语
应用社会网络分析方法和CMC 内容分析法对样本 虚拟学习社区进行了分析，主要进行了度数中心度和学 习者交互内容深度分析，从测量的结果看，社区学习者 之间的深度互动以处于网络中心位置的核心
成员为主，
#right 设置为固定宽度，绝对定位在左边或者右边，而 #left 设置为自适应宽度。同样需要设置#Main 的Posi ­tion  属性设置为 relative 。 CSS  代码实现如下：
#Main {position :relative ; }
#right { position :absolute ;top :0px ;「ight :0px ;width :300px ;} #left { ma 「gin -「ight :300px ; }
图3
内部布局图
这说明得到其他成员的认可与关注使得他们更愿意深人 地学习与反思他人的信息，也使得他们与其他成员的关 系更紧密，获取知识与与信息也更容易，成为了网络中 知识与信息传播与扩散的重要人物。因此，在网络学习 社区中，教师（助学者）应该关注核心成员的培养，这 无论是对于增强社区内各成员的沟通与交流，还是对于 社区内知识的传递和建构都是至关重要的。
参考文献
[1] 戴心来，王丽红，崔春阳，李玉斌.基于学习分析用div与css实现网页布局代码
的虚拟学习社区社会性交互研究[J ].电化教育研 究，2015, (12).
[2] 王莹.教育技术微博社研究[D ].北京交通大学,
2011.
[3] 刘朋飞.非正式学习虚拟社区中成员学习交互行为
研究[D ].浙江工业大学，2013.
[4] 严亚利，黎加厚.教师在线交流与深度互动的能力
评估研究--以海盐教师博客体的互动深度分析为 例[J ].远程教育杂志，2010，(2).
一
V —9一W — 9一9一9一9一9一9一W —9一^方 V  9 9 -V
3结语
主要讨论DIV + C SS 的网页自适应宽度布局设置技
术及相应代码实现，探讨了浮动定位和绝对定位技术在 自适应宽度网页布局中的实际应用。在广泛的网站版面 设计中，大多数网页布局使用了文中涉及的定位技术, 本方法具有较高的实用性和灵活性。
参考文献
[1] 丁海燕.用CSS +D IV 开发技术实现网页布局[J ].
实验科学与技术，2012: 39-41.[2] 李念.网页设计中的DIV +CSS 技术应用研究[J ]. 软件导刊，2013: 137-138.
[3]
黄雪琴.基于CSS +D IV 的自适应宽度网页布局方 法[J ].计算机与现代化，2014: 53-55.
(上接第133页)
(上接第124页）
[2] 范梦兰，张杭，李炯.R F 能量采集全双工认知无线
网络中协作频谱感知参数优化[J ].通信技术, 2017， (5) : 928-932.[3]
廖程静.大数据处理技术的现状与展望[J ].电子 技术与软件工程，2018，(9) : 178.[4] 满方微.基于数据挖掘的无线电频谱预测及应用 [D ].电子科技大学，2017.[5]
王雷.探析大数据时代的无线电监测[J ].科技创
新与应用，2017，(18) : 85.
[6] 倪水平，常慧刚.认知无线电网络多用户智能协作
频谱感知算法[J ].测控技术，2018，(4) : 82-87.
电二与维
4

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