基于CSS+DIV的自适应宽度网页布局方法

计算机与现代化

基于CSS+DIV的自适应宽度网页布局方法

1.海南经贸职业技术学院，海南海口571127；2.海口经济学院，海南海口571127

收稿日期:2014-03-18 出版日期:2014-06-13 发布日期:2014-06-25
作者简介: 黄雪琴（1981-），女，海南临高人，海南经贸职业技术学院讲师，电子商务设计师，硕士，研究方向：电子商务技术；耿强（1981-），男，湖北荆门人，海口经济学院副教授，网络工程师，硕士，研究方向：计算机网络技术和应用软件开发；陈显军（1981-），男，海南海口人，副教授，系统分析师，硕士，研究方向：计算机图形学，虚拟现实。
基金资助:
2013年海南省自然科学基金资助项目（613169）； 2013年海南省教育厅高等学校科学研究项目（Hjkj2013-48）； 2013年海南省教育厅教育科学规划资助项目（QJY125050）；

2013年海南经贸职业技术学院资助项目（hnjm2013109）； 2013年海南经贸职业技术学院资助项目（JY201309）

A Self-Adaption Page Layout Method Based on CSS+DIV

1. Hainan College of Economics and Business, Haikou 571127, China; 2. Haikou College of Economics, Haikou 571127, China

Received:2014-03-18 Online:2014-06-13 Published:2014-06-25

摘要/Abstract

摘要：

CSS+DIV网页布局方法已逐渐成为网页设计的主流技术，本文首先简要介绍目前常用布局技术的特点，然后以三行两列的网页布局为例，结合具体的代码实现，重点分析单列自适应宽度和两

列自适应宽度的CSS+DIV网页布局方式以及实现技巧。实践表明，本方法能使网页显示更加灵活，同时代码对于众多现代化的智能设备而言将更具可移植性。

关键词: , CSS+DIV, 网页设计, 网页布局, 自适应宽度

Abstract:

CSS+DIV layout schema has gradually become the core technology when design HTML page. This paper explains and compares several HTML page layout technologies in

common used, and shows a self-adaption page layout pattern coded in CSS+DIV schema, which give an example of self-adaption HTML page with 2-rows and 3-clolumn. The example code

focuses on the techniques of making one column adaptive to the screen when the other two are fixed, and in similar way by making two columns adaptive when only one column is

fixed. So many practices have revealed that self-adaption layout pattern makes the page to display more flexible and more portable when target some modern devices.

Key words: CSS+DIV, page design, page layout, adaptive width

黄雪琴1，耿强2，陈显军2. 基于CSS+DIV的自适应宽度网页布局方法[J]. 计算机与现代化.

HUANG Xue-qin1, GENG Qiang2, CHEN Xian-jun2. A Self-Adaption Page Layout Method Based on CSS+DIV[J]. Computer and Modernization.

［1］
车元媛. 基于CSS+DIV的网页布局技术应用［J］. 电脑知识与技术, 2011,7(9)：2019-2020,2023.
［2］伍蓓,伍蕾. 基于Web技术的旅游市场信息管理系统［J］. 计算机与现代化, 2000(5):64-67.
［3］王凡帆,董阁. 网页设计与制作案例教材［M］. 海南:海南出版社, 2013.
［4］刘敏娜. 探讨XHTML设计标准下CSS+DIV布局技术［J］. 价值工程, 2012,31(6):133.
［5］朱珊虹,石庆民. 基于DIV+CSS的个人博客网页设计应用研究［J］. 计算机与信息技术, 2011(4)：60-61.
［6］刘效春. 浅谈静态网页制作中DIV+CSS在网页布局中的优劣势［J］. 山西青年管理干部学院学报, 2011,24(4):109-110.
［7］曾顺. 精通CSS+DIV网页样式与布局［M］. 北京:人民邮电出版社, 2007.
［8］温谦. CSS设计彻底研究［M］. 北京:人民邮电出版社, 2008.
［9］叶倩. 基于.NET的精品课程综合应用系统设计与实现［J］. 延安大学学报:自然科学版, 2012,31(4):32-34.
［10］赵清华,林学华. 基于DIV+CSS的网页布局技术应用研究［J］. 现代计算机：专业版, 2010(5):140-142.
［11］丁海燕,袁国武,张泽华,等. 用CSS+DIV开发技术实现网页布局［J］. 实验科学与技术, 2012,10(4):39-41.
［12］杨玉梅. 浏览器CSS兼容问题探究［J］. 计算机与现代化, 2013(7):220-223.
［13］车开森. 浅谈CSS+DIV在网页制作中的应用［J］. 计算机光盘软件与应用, 2012(2):110-111.
［14］张娅. CSS+DIV技术在资源平台网站中的应用［J］. 电子制作, 2013(21).
［15］余跃泓. Web标准下的CSS+DIV布局初探［J］. 计算机光盘软件与应用, 2012(10):45-46.
［16］李念. 网页设计中的DIV+CSS技术应用研究［J］. 软件导刊, 2013,20(3)：137-138.

[1]	李静元, 张珂, 杨东裕. 基于雾计算的工业互联网安全数据访问方法[J]. 计算机与现代化, 2022, 0(12): 118-122.
[2]	陈春燕, 刘梦赤. 基于粒子群遗传算法的智能组卷策略[J]. 计算机与现代化, 2021, 0(08): 16-23.
[3]	宋鑫, 樊志强, . 基于Laguerre 前向神经网络的信息服务性能建模方法 [J]. 计算机与现代化, 2021, 0(03): 1-6.
[4]	魏健, 赵红涛, 刘敦楠, 加鹤萍 . 基于集成模型的超短时负荷预测方法[J]. 计算机与现代化, 2021, 0(03): 12-17.
[5]	段桂芹1，邹臣嵩2，刘锋2. 基于优化初始聚类中心的K中心点算法[J]. 计算机与现代化, 2019, 0(04): 1-.
[6]	李富星，蒙祖强 . 一种改进的类别区分词特征选择算法[J]. 计算机与现代化, 2019, 0(03): 73-.
[7]	白晓波1，邵景峰1，和征1，田建刚2. 基于学习的核偏最小二乘法优化扩展卡尔曼滤波[J]. 计算机与现代化, 2018, 0(09): 110-.
[8]	郑亚鹏，樊璐. 基于LSTM的临床血液需求预测方法[J]. 计算机与现代化, 2018, 0(05): 41-.
[9]	刘德春1，张秀国2，姜微2. 基于马尔科夫链的大学生自主学习能力预测方法[J]. 计算机与现代化, 2018, 0(05): 106-.
[10]	夏琨1，丁波1，刘俊1，刘子豪1，林亮成2. 基于内容分析的网络协议指纹识别[J]. 计算机与现代化, 2018, 0(05): 121-.
[11]	李华，江峰，于旭，杜军威，刘国柱. 基于粒度决策熵的属性约简[J]. 计算机与现代化, 2018, 0(04): 7-.
[12]	陈丽娟，谢伙生. 带负项值的onshelf效用项集并行挖掘算法[J]. 计算机与现代化, 2018, 0(04): 13-.
[13]	吴克介,王家伟. 基于知网与搜索引擎的词汇语义相似度计算[J]. 计算机与现代化, 2018, 0(04): 90-.
[14]	曲晓燕1，张勇亮2，吕晓峰1，马羚1. 基于模糊粒度相关向量机的缓变故障参数区间预测[J]. 计算机与现代化, 2017, 0(8): 5-.
[15]	付永忠，潘云峰. 基于改进蚁群算法的垂直旋转式贴片机贴装顺序优化[J]. 计算机与现代化, 2017, 0(8): 17-.