CN105975268A - 一种用于pc端信息系统网页界面的宽度自适应的方法 - Google Patents

一种用于pc端信息系统网页界面的宽度自适应的方法 Download PDF

Info

Publication number
CN105975268A
CN105975268A CN201610285930.5A CN201610285930A CN105975268A CN 105975268 A CN105975268 A CN 105975268A CN 201610285930 A CN201610285930 A CN 201610285930A CN 105975268 A CN105975268 A CN 105975268A
Authority
CN
China
Prior art keywords
html
document
style
width
webpage
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201610285930.5A
Other languages
English (en)
Inventor
严晴
王澍
巢玉坚
刘嘉华
胡游君
邱玉祥
康睿
吴德胜
王琪
周夏
蔡新忠
刘皓
施健
马远东
张俊凯
周锁
万明
王泉啸
乔治中
王锦杰
刘洋
夏云
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
State Grid Corp of China SGCC
Nari Information and Communication Technology Co
Nanjing NARI Group Corp
Original Assignee
State Grid Corp of China SGCC
Nari Information and Communication Technology Co
Nanjing NARI Group Corp
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by State Grid Corp of China SGCC, Nari Information and Communication Technology Co, Nanjing NARI Group Corp filed Critical State Grid Corp of China SGCC
Priority to CN201610285930.5A priority Critical patent/CN105975268A/zh
Publication of CN105975268A publication Critical patent/CN105975268A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种用于PC端信息系统网页界面的宽度自适应的方法，包括以下步骤，步骤(1)，CSS样式设置；步骤(2)，通过HTML标签描述网页；步骤(3)通过JavaScript获取屏幕的宽度；步骤(4)将CSS文档、HTML文档、JavaScript文档结合搭建最终的文档界面内容，并在各类终端显示出的网页界面。本发明的用于PC端信息系统网页界面的宽度自适应的方法，面对不同分辨率终端显示的灵活性强，能够快捷解决多设备显示适应问题的特点，方法简单，容易实现，具有良好的应用前景。

Description

一种用于PC端信息系统网页界面的宽度自适应的方法
技术领域
本发明涉及一种用于PC端信息系统网页界面的宽度自适应的方法，属于网页展现技术领域。
背景技术
随着互联网进入网页2.0时代，各种软件的网页应用大量涌现，网页版软件的前端开发由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，而是成为一种丰富媒体让展现内容更加生动，如何基于前端开发技术实现基于网页载体的软件化交互形式，为用户提供了更好的使用体验，是当前急需解决的问题。
发明内容
本发明的目的是为了克服现在技术的不足。本发明的用于PC端信息系统网页界面的宽度自适应的方法，面对不同分辨率终端显示的灵活性强，能够快捷解决多设备显示适应问题的特点，方法简单，容易实现，具有良好的应用前景。
为了达到上述目的，本发明所采用的技术方案是：
一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于：包括以下步骤，
步骤(1)，CSS样式设置
通过外部样式表、内部样式表、内联样式这三种插入样式表的方法来设置HTML中各个标签样式形成CSS文档，进而实现设置网页的宽度，高度，内外边距，边框样式，背景，文本，字体，链接，表格，列表，轮廓；
步骤(2)，通过HTML标签描述网页
通过CSS样式设置后的HTML标签描述网页，形成HTML文档，HTML文档包含HTML标签和纯文本HTML，网页Web浏览器用于读取HTML文档，并以网页的形式显示，使用标签来解释网页页面的内容，最终实现网页内所有展示的内容；
步骤(3)通过JavaScript获取屏幕的宽度
通过JavaScript，操作HTML中的body元素，首先找到该元素，通过给HTML文档的标签命名id属性，找到对应的HTML元素，并获取屏幕的宽度，形成JavaScript文档；
步骤(4)编辑完成CSS文档、HTML文档、JavaScript文档，在HTML文档头部引用准备好的，CSS的外部样式表、内部样式表、内联样式；在HTML文档底部引用准备好的JavaScript文档以及在HTML文档中插入需要的JavaScript语句，以此搭建完成最终的文档界面内容，并在各类终端显示出的网页界面。
前述的一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于：步骤(1)内联样式优先级高于内部样式表，内部样式表优先级高于外部样式表。
前述的一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于：所述外部样式表用于调整需要调整界面的尺寸；所述内部样式表用于单个文档需要对应样式时使用，用于调整标签的样式和尺寸；所述内联样式仅需要在一个元素上应用一次时使用，用于最高级调整该标签的样式和尺寸。
前述的一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于：步骤(4)各类终端包括服务器终端、PC机终端和笔记本电脑终端。
本发明的有益效果是：本发明的用于PC端信息系统网页界面的宽度自适应的方法，面对不同分辨率终端显示的灵活性强，能够快捷解决多设备显示适应问题的特点，方法简单，容易实现，具有良好的应用前景。
附图说明
图1是本发明的用于PC端信息系统网页界面的宽度自适应的方法的流程图。
具体实施方式
下面将结合说明书附图，对本发明做进一步说明。以下实施例仅用于更加清楚地说明本发明的技术方案，而不能以此来限制本发明的保护范围。
如图1所示，本发明的一种用于PC端信息系统网页界面的宽度自适应的方法，包括以下步骤，
步骤(1)，CSS样式设置
通过外部样式表、内部样式表、内联样式这三种插入样式表的方法来设置HTML中各个标签样式形成CSS文档，进而实现设置网页的宽度，高度，内外边距，边框样式，背景，文本，字体，链接，表格，列表，轮廓，所述外部样式表用于调整需要调整界面的尺寸；所述内部样式表在HTML文档头部定义内部样式表，实现插入内部样式表；使用在HTML文档头部<link>标签链接以及插入外部样式表至需要调整的界面，浏览器根据mystyle.css中读到样式声明，对文档格式进行调整，各样式表以.css扩展名进行保存；内部样式表使用<style>标签在文档头部定义内部样式表来实现插入内部样式表；内联样式在相关的标签内使用样式(style)属性，style属性可以包含任何CSS属性，而且，内联样式优先级高于内部样式表，内部样式表优先级高于外部样式表；
步骤(2)，通过HTML标签描述网页
通过CSS样式设置后的HTML标签描述网页，形成HTML文档，HTML文档包含HTML标签和纯文本HTML，网页Web浏览器用于读取HTML文档，并以网页的形式显示，使用标签来解释网页页面的内容，最终实现网页内所有展示的内容。其中，HTML标签是由尖括号包围的关键词，比如<html>，HTML标签通常是成对出现的，比如<b>和</b>，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签，HTML文档等同于网页，浏览器不会显示HTML标签，而是使用标签来解释页面的内容，最终实现网页内所有展示的内容。因此，HTML标签是一个页面中实现自适应展现的必不可少的元素，同时可以确保信息系统界面模板的架构完整；
步骤(3)通过JavaScript获取屏幕的宽度
通过JavaScript，操作HTML中的body(body是html网页结构最重要的标签，也叫主体内容标签，一般网页内容均放入此标签组之间)元素，首先找到该元素，通过给HTML文档的标签命名id属性，找到对应的HTML元素，并获取屏幕的宽度，形成JavaScript文档；
步骤(4)编辑完成CSS文档、HTML文档、JavaScript文档，在HTML文档头部引用准备好的，CSS的外部样式表、内部样式表、内联样式；在HTML文档底部引用准备好的JavaScript文档以及在HTML文档中插入需要的JavaScript语句，以此搭建完成最终的文档界面内容，并在各类终端显示出的网页界面，这里的各类终端包括服务器终端、PC机终端和笔记本电脑终端。
综上所述，本发明的用于PC端信息系统网页界面的宽度自适应的方法，面对不同分辨率终端显示的灵活性强，能够快捷解决多设备显示适应问题的特点，方法简单，容易实现，具有良好的应用前景。
以上显示和描述了本发明的基本原理、主要特征及优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。

Claims (4)

1.一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于：包括以下步骤，
步骤(1)，CSS样式设置
通过外部样式表、内部样式表、内联样式这三种插入样式表的方法来设置HTML中各个标签样式形成CSS文档，进而实现设置网页的宽度，高度，内外边距，边框样式，背景，文本，字体，链接，表格，列表，轮廓；
步骤(2)，通过HTML标签描述网页
通过CSS样式设置后的HTML标签描述网页，形成HTML文档，HTML文档包含HTML标签和纯文本HTML，网页Web浏览器用于读取HTML文档，并以网页的形式显示，使用标签来解释网页页面的内容，最终实现网页内所有展示的内容；
步骤(3)通过JavaScript获取屏幕的宽度
通过JavaScript，操作HTML中的body元素，首先找到该元素，通过给HTML文档的标签命名id属性，找到对应的HTML元素，并获取屏幕的宽度，形成JavaScript文档；
步骤(4)编辑完成CSS文档、HTML文档、JavaScript文档，在HTML文档头部引用准备好的，CSS的外部样式表、内部样式表、内联样式；在HTML文档底部引用准备好的JavaScript文档以及在HTML文档中插入需要的JavaScript语句，以此搭建完成最终的文档界面内容，并在各类终端显示出的网页界面。
2.根据权利要求1所述的一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于：步骤(1)内联样式优先级高于内部样式表，内部样式表优先级高于外部样式表。
3.根据权利要求1或2所述的一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于：所述外部样式表用于调整需要调整界面的尺寸；所述内部样式表用于单个文档需要对应样式时使用，用于调整标签的样式和尺寸；所述内联样式仅需要在一个元素上应用一次时使用，用于最高级调整该标签的样式和尺寸。
4.根据权利要求1所述的一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于：步骤(4)各类终端包括服务器终端、PC机终端和笔记本电脑终端。
CN201610285930.5A 2016-05-03 2016-05-03 一种用于pc端信息系统网页界面的宽度自适应的方法 Pending CN105975268A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610285930.5A CN105975268A (zh) 2016-05-03 2016-05-03 一种用于pc端信息系统网页界面的宽度自适应的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610285930.5A CN105975268A (zh) 2016-05-03 2016-05-03 一种用于pc端信息系统网页界面的宽度自适应的方法

Publications (1)

Publication Number Publication Date
CN105975268A true CN105975268A (zh) 2016-09-28

Family

ID=56994597

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610285930.5A Pending CN105975268A (zh) 2016-05-03 2016-05-03 一种用于pc端信息系统网页界面的宽度自适应的方法

Country Status (1)

Country Link
CN (1) CN105975268A (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106886574A (zh) * 2017-01-20 2017-06-23 烽火通信科技股份有限公司 一种机顶盒浏览器的网页缩放处理方法及系统
CN106897055A (zh) * 2017-01-10 2017-06-27 深圳市赛亿科技开发有限公司 一种兼容pc端和手机端web界面的实现方法
CN107729074A (zh) * 2017-09-25 2018-02-23 百富计算机技术（深圳）有限公司 一种pos应用的用户界面的加载方法及装置
CN109164999A (zh) * 2018-08-29 2019-01-08 郑州云海信息技术有限公司 一种表格自适应显示的方法、装置、设备及可读存储介质
CN109254818A (zh) * 2018-08-28 2019-01-22 北京影谱科技股份有限公司 针对浏览器不同分辨率的像素级定位方法和装置
CN109710866A (zh) * 2018-12-18 2019-05-03 天津字节跳动科技有限公司 在线文档内图片显示方法和装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101777048A (zh) * 2009-01-14 2010-07-14 国际商业机器公司 解决web应用复合中UI样式冲突的方法和装置
CN101908076A (zh) * 2010-08-24 2010-12-08 北京世纪高通科技有限公司 页面布局自适应方法及装置
CN103412928A (zh) * 2013-08-16 2013-11-27 北京乐动卓越科技有限公司 一种在移动终端实现浏览器页面智能响应式布局的方法与装置
CN103593196A (zh) * 2013-11-25 2014-02-19 深信服网络科技（深圳）有限公司 页面布局自适应方法及装置
CN104866570A (zh) * 2015-05-22 2015-08-26 国云科技股份有限公司 一种css多浏览器兼容的方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101777048A (zh) * 2009-01-14 2010-07-14 国际商业机器公司 解决web应用复合中UI样式冲突的方法和装置
CN101908076A (zh) * 2010-08-24 2010-12-08 北京世纪高通科技有限公司 页面布局自适应方法及装置
CN103412928A (zh) * 2013-08-16 2013-11-27 北京乐动卓越科技有限公司 一种在移动终端实现浏览器页面智能响应式布局的方法与装置
CN103593196A (zh) * 2013-11-25 2014-02-19 深信服网络科技（深圳）有限公司 页面布局自适应方法及装置
CN104866570A (zh) * 2015-05-22 2015-08-26 国云科技股份有限公司 一种css多浏览器兼容的方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
贾英霞: ""浅谈Bootstrap制作响应式网站布局"", 《福建电脑》 *

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106897055A (zh) * 2017-01-10 2017-06-27 深圳市赛亿科技开发有限公司 一种兼容pc端和手机端web界面的实现方法
CN106886574A (zh) * 2017-01-20 2017-06-23 烽火通信科技股份有限公司 一种机顶盒浏览器的网页缩放处理方法及系统
CN106886574B (zh) * 2017-01-20 2019-11-08 烽火通信科技股份有限公司 一种机顶盒浏览器的网页缩放处理方法及系统
CN107729074A (zh) * 2017-09-25 2018-02-23 百富计算机技术（深圳）有限公司 一种pos应用的用户界面的加载方法及装置
CN107729074B (zh) * 2017-09-25 2021-02-23 百富计算机技术（深圳）有限公司 一种pos应用的用户界面的加载方法及装置
CN109254818A (zh) * 2018-08-28 2019-01-22 北京影谱科技股份有限公司 针对浏览器不同分辨率的像素级定位方法和装置
CN109164999A (zh) * 2018-08-29 2019-01-08 郑州云海信息技术有限公司 一种表格自适应显示的方法、装置、设备及可读存储介质
CN109164999B (zh) * 2018-08-29 2022-03-08 郑州云海信息技术有限公司 一种表格自适应显示的方法、装置、设备及可读存储介质
CN109710866A (zh) * 2018-12-18 2019-05-03 天津字节跳动科技有限公司 在线文档内图片显示方法和装置

Similar Documents

Publication Publication Date Title
CN105975268A (zh) 一种用于pc端信息系统网页界面的宽度自适应的方法
CN102663126B (zh) 一种在移动终端中显示网页的方法及装置
CN105975576B (zh) 终端内容适配显示方法、装置和终端
CN104537002B (zh) 一种css兼容性调优的方法及系统
CN103176986B (zh) Flash动画数据转换为HTML5数据的方法
CN101984419B (zh) 用于对网页图片内容进行段落重排的方法及装置
CN103631865B (zh) 网页生成方法及设备
CN103593196A (zh) 页面布局自适应方法及装置
CN102831190B (zh) 一种在低端设备上浏览cml文件的方法
CN102364460B (zh) 基于移动终端的页面自动放大方法和系统
CN103137103A (zh) 文字显示方法及装置
CN105094930A (zh) 一种定位图片系统及方法
CN104217037A (zh) 一种在移动终端中显示网页的方法及装置
CN103345522B (zh) 数据的展示处理、展示方法及装置
CN103902571B (zh) 保存网页完整内容的方法、系统及相应的客户端和服务器
CN104239282B (zh) 电子书的处理方法和装置
CN110244921A (zh) 标签打印方法、装置、电子设备及系统
CN105205077A (zh) 页面排版方法、装置及系统
CN106547806B (zh) 页面加载方法及装置
CN106021464A (zh) 一种多媒体文档多终端编辑打印通用的方法
CN107862054A (zh) 一种样式渲染方法
CN104424174B (zh) 文档处理系统和文档处理方法
CN105824790B (zh) 一种设备表格适配方法、计算机设备以及移动终端
CN106708495B (zh) 一种基于移动终端的页面显示方法及装置
CN105389308A (zh) 网页的显示处理方法及装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20160928