一种用于pc端信息系统网页界面的宽度自适应的方法
【专利摘要】本发明公开了一种用于PC端信息系统网页界面的宽度自适应的方法，包括以下步骤，步骤(1)，CSS样式设置；步骤(2)，通过HTML标签描述网页；步骤(3)通过JavaScript获取屏幕的宽度；步骤(4)将CSS文档、HTML文档、JavaScript文档结合搭建最终的文档界面内容，并在各类终端显示出的网页界面。本发明的用于PC端信息系统网页界面的宽度自适应的方法，面对不同分辨率终端显示的灵活性强，能够快捷解决多设备显示适应问题的特点，方法简单，容易实现，具有良好的应用前景。
【专利说明】
一种用于PC端信息系统网页界面的宽度自适应的方法
技术领域
[0001]本发明涉及一种用于PC端信息系统网页界面的宽度自适应的方法，属于网页展现技术领域。【背景技术】
[0002]随着互联网进入网页2.0时代，各种软件的网页应用大量涌现，网页版软件的前端开发由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，而是成为一种丰富媒体让展现内容更加生动，如何基于前端开发技术实现基于网页载体的软件化交互形式，为用户提供了更好的使用体验，是当前急需解决的问题。
【发明内容】
[0003]本发明的目的是为了克服现在技术的不足。本发明的用于PC端信息系统网页界面的宽度自适应的方法，面对不同分辨率终端显示的灵活性强，能够快捷解决多设备显示适应问题的特点，方法简单，容易实现，具有良好的应用前景。[〇〇〇4]为了达到上述目的，本发明所采用的技术方案是:
[0005]—种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于:包括以下步骤，
[0006]步骤(1)，CSS样式设置
[0007]通过外部样式表、内部样式表、内联样式这三种插入样式表的方法来设置HTML中各个标签样式形成CSS文档，进而实现设置网页的宽度，高度，内外边距，边框样式，背景，文本，字体，链接，表格，列表，轮廓；
[0008]步骤(2)，通过HTML标签描述网页[〇〇〇9] 通过CSS样式设置后的HTML标签描述网页，形成HTML文档，HTML文档包含HTML标签和纯文本HTML，网页Web浏览器用于读取HTML文档，并以网页的形式显示，使用标签来解释网页页面的内容，最终实现网页内所有展示的内容；[0〇1〇] 步骤(3)通过JavaScript获取屏幕的宽度[0011 ] 通过JavaScript，操作HTML中的body元素，首先找到该元素，通过给HTML文档的标签命名id属性，找到对应的HTML元素，并获取屏幕的宽度，形成JavaScript文档；
[0012]步骤(4)编辑完成CSS文档、HTML文档、JavaScript文档，在HTML文档头部引用准备好的，CSS的外部样式表、内部样式表、内联样式;在HTML文档底部引用准备好的JavaScript 文档以及在HTML文档中插入需要的JavaScript语句，以此搭建完成最终的文档界面内容， 并在各类终端显示出的网页界面。
[0013]前述的一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于:步骤 (1)内联样式优先级高于内部样式表，内部样式表优先级高于外部样式表。
[0014]前述的一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于:所述外部样式表用于调整需要调整界面的尺寸;所述内部样式表用于单个文档需要对应样式时使用，用于调整标签的样式和尺寸;所述内联样式仅需要在一个元素上应用一次时使用，用于最高级调整该标签的样式和尺寸。
[0015]前述的一种用于PC端信息系统网页界面的宽度自适应的方法，其特征在于:步骤 (4)各类终端包括服务器终端、PC机终端和笔记本电脑终端。
[0016]本发明的有益效果是:本发明的用于PC端信息系统网页界面的宽度自适应的方法，面对不同分辨率终端显示的灵活性强，能够快捷解决多设备显示适应问题的特点，方法简单，容易实现，具有良好的应用前景。【附图说明】
[0017]图1是本发明的用于PC端信息系统网页界面的宽度自适应的方法的流程图。【具体实施方式】
[0018]下面将结合说明书附图，对本发明做进一步说明。以下实施例仅用于更加清楚地说明本发明的技术方案，而不能以此来限制本发明的保护范围。
[0019]如图1所示，本发明的一种用于PC端信息系统网页界面的宽度自适应的方法，包括以下步骤，
[0020]步骤(1)，CSS样式设置
[0021]通过外部样式表、内部样式表、内联样式这三种插入样式表的方法来设置HTML中各个标签样式形成CSS文档，进而实现设置网页的宽度，高度，内外边距，边框样式，背景，文本，字体，链接，表格，列表，轮廓，所述外部样式表用于调整需要调整界面的尺寸;所述内部样式表在HTML文档头部定义内部样式表，实现插入内部样式表;使用在HTML文档头部〈1 ink >标签链接以及插入外部样式表至需要调整的界面，浏览器根据mystyle.css中读到样式声明，对文档格式进行调整，各样式表以.css扩展名进行保存；内部样式表使用〈style〉标签在文档头部定义内部样式表来实现插入内部样式表；内联样式在相关的标签内使用样式 (style)属性，style属性可以包含任何CSS属性，而且，内联样式优先级高于内部样式表，内部样式表优先级高于外部样式表；[〇〇22] 步骤(2)，通过HTML标签描述网页[〇〇23] 通过CSS样式设置后的HTML标签描述网页，形成HTML文档，HTML文档包含HTML标签和纯文本HTML，网页Web浏览器用于读取HTML文档，并以网页的形式显示，使用标签来解释网页页面的内容，最终实现网页内所有展示的内容。其中，HTML标签是由尖括号包围的关键词，比如<html>，HTML标签通常是成对出现的，比如<b>和</b>，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签，HTML文档等同于网页，浏览器不会显示HTML标签，而是使用标签来解释页面的内容，最终实现网页内所有展示的内容。因此，HTML标签是一个页面中实现自适应展现的必不可少的元素，同时可以确保信息系统界面模板的架构完整；[0〇24] 步骤(3)通过JavaScript获取屏幕的宽度
[0025] 通过JavaScript，操作HTML中的body (body是html网页结构最重要的标签，也叫主体内容标签，一般网页内容均放入此标签组之间)元素，首先找到该元素，通过给HTML文档的标签命名id属性，找到对应的HTML元素，并获取屏幕的宽度，形成JavaScript文档；
[0026]步骤(4)编辑完成CSS文档、HTML文档、JavaScript文档，在HTML文档头部引用准备好的，CSS的外部样式表、内部样式表、内联样式;在HTML文档底部引用准备好的JavaScript 文档以及在HTML文档中插入需要的JavaScript语句，以此搭建完成最终的文档界面内容， 并在各类终端显示出的网页界面，这里的各类终端包括服务器终端、PC机终端和笔记本电脑终端。
[0027]综上所述，本发明的用于PC端信息系统网页界面的宽度自适应的方法，面对不同分辨率终端显示的灵活性强，能够快捷解决多设备显示适应问题的特点，方法简单，容易实现，具有良好的应用前景。[〇〇28]以上显示和描述了本发明的基本原理、主要特征及优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。
【主权项】
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机终端和笔记本电脑终端。
【文档编号】G06F9/44GK105975268SQ201610285930
【公开日】2016年9月28日
【申请日】2016年5月3日
【发明人】严晴, 王澍, 巢玉坚, 刘嘉华, 胡游君, 邱玉祥, 康睿, 吴德胜, 王琪, 周夏, 蔡新忠, 刘皓, 施健, 马远东, 张俊凯, 周锁, 万明, 王泉啸, 乔治中, 王锦杰, 刘洋, 夏云
【申请人】国家电网公司, 南京南瑞集团公司, 南京南瑞信息通信科技有限公司