一種用于pc端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法
【專利摘要】本發(fā)明公開了一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，包括以下步驟，步驟(1)，CSS樣式設(shè)置；步驟(2)，通過(guò)HTML標(biāo)簽描述網(wǎng)頁(yè)；步驟(3)通過(guò)JavaScript獲取屏幕的寬度；步驟(4)將CSS文檔、HTML文檔、JavaScript文檔結(jié)合搭建最終的文檔界面內(nèi)容，并在各類終端顯示出的網(wǎng)頁(yè)界面。本發(fā)明的用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，面對(duì)不同分辨率終端顯示的靈活性強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題的特點(diǎn)，方法簡(jiǎn)單，容易實(shí)現(xiàn)，具有良好的應(yīng)用前景。
【專利說(shuō)明】
一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法
技術(shù)領(lǐng)域
[0001]本發(fā)明涉及一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，屬于網(wǎng)頁(yè)展現(xiàn)技術(shù)領(lǐng)域?！颈尘凹夹g(shù)】
[0002]隨著互聯(lián)網(wǎng)進(jìn)入網(wǎng)頁(yè)2.0時(shí)代，各種軟件的網(wǎng)頁(yè)應(yīng)用大量涌現(xiàn)，網(wǎng)頁(yè)版軟件的前端開發(fā)由此發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)不再只是承載單一的文字和圖片，而是成為一種豐富媒體讓展現(xiàn)內(nèi)容更加生動(dòng)，如何基于前端開發(fā)技術(shù)實(shí)現(xiàn)基于網(wǎng)頁(yè)載體的軟件化交互形式，為用戶提供了更好的使用體驗(yàn)，是當(dāng)前急需解決的問(wèn)題。
【發(fā)明內(nèi)容】
[0003]本發(fā)明的目的是為了克服現(xiàn)在技術(shù)的不足。本發(fā)明的用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，面對(duì)不同分辨率終端顯示的靈活性強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題的特點(diǎn)，方法簡(jiǎn)單，容易實(shí)現(xiàn)，具有良好的應(yīng)用前景。[〇〇〇4]為了達(dá)到上述目的，本發(fā)明所采用的技術(shù)方案是:
[0005]—種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，其特征在于:包括以下步驟，
[0006]步驟(1)，CSS樣式設(shè)置
[0007]通過(guò)外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式這三種插入樣式表的方法來(lái)設(shè)置HTML中各個(gè)標(biāo)簽樣式形成CSS文檔，進(jìn)而實(shí)現(xiàn)設(shè)置網(wǎng)頁(yè)的寬度，高度，內(nèi)外邊距，邊框樣式，背景，文本，字體，鏈接，表格，列表，輪廓；
[0008]步驟(2)，通過(guò)HTML標(biāo)簽描述網(wǎng)頁(yè)[〇〇〇9] 通過(guò)CSS樣式設(shè)置后的HTML標(biāo)簽描述網(wǎng)頁(yè)，形成HTML文檔，HTML文檔包含HTML標(biāo)簽和純文本HTML，網(wǎng)頁(yè)Web瀏覽器用于讀取HTML文檔，并以網(wǎng)頁(yè)的形式顯示，使用標(biāo)簽來(lái)解釋網(wǎng)頁(yè)頁(yè)面的內(nèi)容，最終實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)所有展示的內(nèi)容；[0〇1〇] 步驟(3)通過(guò)JavaScript獲取屏幕的寬度[0011 ] 通過(guò)JavaScript，操作HTML中的body元素，首先找到該元素，通過(guò)給HTML文檔的標(biāo)簽命名id屬性，找到對(duì)應(yīng)的HTML元素，并獲取屏幕的寬度，形成JavaScript文檔；
[0012]步驟(4)編輯完成CSS文檔、HTML文檔、JavaScript文檔，在HTML文檔頭部引用準(zhǔn)備好的，CSS的外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式;在HTML文檔底部引用準(zhǔn)備好的JavaScript 文檔以及在HTML文檔中插入需要的JavaScript語(yǔ)句，以此搭建完成最終的文檔界面內(nèi)容， 并在各類終端顯示出的網(wǎng)頁(yè)界面。
[0013]前述的一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，其特征在于:步驟 (1)內(nèi)聯(lián)樣式優(yōu)先級(jí)高于內(nèi)部樣式表，內(nèi)部樣式表優(yōu)先級(jí)高于外部樣式表。
[0014]前述的一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，其特征在于:所述外部樣式表用于調(diào)整需要調(diào)整界面的尺寸;所述內(nèi)部樣式表用于單個(gè)文檔需要對(duì)應(yīng)樣式時(shí)使用，用于調(diào)整標(biāo)簽的樣式和尺寸;所述內(nèi)聯(lián)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)使用，用于最高級(jí)調(diào)整該標(biāo)簽的樣式和尺寸。
[0015]前述的一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，其特征在于:步驟 (4)各類終端包括服務(wù)器終端、PC機(jī)終端和筆記本電腦終端。
[0016]本發(fā)明的有益效果是:本發(fā)明的用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，面對(duì)不同分辨率終端顯示的靈活性強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題的特點(diǎn)，方法簡(jiǎn)單，容易實(shí)現(xiàn)，具有良好的應(yīng)用前景?！靖綀D說(shuō)明】
[0017]圖1是本發(fā)明的用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法的流程圖?！揪唧w實(shí)施方式】
[0018]下面將結(jié)合說(shuō)明書附圖，對(duì)本發(fā)明做進(jìn)一步說(shuō)明。以下實(shí)施例僅用于更加清楚地說(shuō)明本發(fā)明的技術(shù)方案，而不能以此來(lái)限制本發(fā)明的保護(hù)范圍。
[0019]如圖1所示，本發(fā)明的一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，包括以下步驟，
[0020]步驟(1)，CSS樣式設(shè)置
[0021]通過(guò)外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式這三種插入樣式表的方法來(lái)設(shè)置HTML中各個(gè)標(biāo)簽樣式形成CSS文檔，進(jìn)而實(shí)現(xiàn)設(shè)置網(wǎng)頁(yè)的寬度，高度，內(nèi)外邊距，邊框樣式，背景，文本，字體，鏈接，表格，列表，輪廓，所述外部樣式表用于調(diào)整需要調(diào)整界面的尺寸;所述內(nèi)部樣式表在HTML文檔頭部定義內(nèi)部樣式表，實(shí)現(xiàn)插入內(nèi)部樣式表;使用在HTML文檔頭部〈1 ink >標(biāo)簽鏈接以及插入外部樣式表至需要調(diào)整的界面，瀏覽器根據(jù)mystyle.css中讀到樣式聲明，對(duì)文檔格式進(jìn)行調(diào)整，各樣式表以.css擴(kuò)展名進(jìn)行保存；內(nèi)部樣式表使用〈style〉標(biāo)簽在文檔頭部定義內(nèi)部樣式表來(lái)實(shí)現(xiàn)插入內(nèi)部樣式表；內(nèi)聯(lián)樣式在相關(guān)的標(biāo)簽內(nèi)使用樣式 (style)屬性，style屬性可以包含任何CSS屬性，而且，內(nèi)聯(lián)樣式優(yōu)先級(jí)高于內(nèi)部樣式表，內(nèi)部樣式表優(yōu)先級(jí)高于外部樣式表；[〇〇22] 步驟(2)，通過(guò)HTML標(biāo)簽描述網(wǎng)頁(yè)[〇〇23] 通過(guò)CSS樣式設(shè)置后的HTML標(biāo)簽描述網(wǎng)頁(yè)，形成HTML文檔，HTML文檔包含HTML標(biāo)簽和純文本HTML，網(wǎng)頁(yè)Web瀏覽器用于讀取HTML文檔，并以網(wǎng)頁(yè)的形式顯示，使用標(biāo)簽來(lái)解釋網(wǎng)頁(yè)頁(yè)面的內(nèi)容，最終實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)所有展示的內(nèi)容。其中，HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如<html>，HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，比如<b>和</b>，標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽，開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽，HTML文檔等同于網(wǎng)頁(yè)，瀏覽器不會(huì)顯示HTML標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容，最終實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)所有展示的內(nèi)容。因此，HTML標(biāo)簽是一個(gè)頁(yè)面中實(shí)現(xiàn)自適應(yīng)展現(xiàn)的必不可少的元素，同時(shí)可以確保信息系統(tǒng)界面模板的架構(gòu)完整；[0〇24] 步驟(3)通過(guò)JavaScript獲取屏幕的寬度
[0025] 通過(guò)JavaScript，操作HTML中的body (body是html網(wǎng)頁(yè)結(jié)構(gòu)最重要的標(biāo)簽，也叫主體內(nèi)容標(biāo)簽，一般網(wǎng)頁(yè)內(nèi)容均放入此標(biāo)簽組之間)元素，首先找到該元素，通過(guò)給HTML文檔的標(biāo)簽命名id屬性，找到對(duì)應(yīng)的HTML元素，并獲取屏幕的寬度，形成JavaScript文檔；
[0026]步驟(4)編輯完成CSS文檔、HTML文檔、JavaScript文檔，在HTML文檔頭部引用準(zhǔn)備好的，CSS的外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式;在HTML文檔底部引用準(zhǔn)備好的JavaScript 文檔以及在HTML文檔中插入需要的JavaScript語(yǔ)句，以此搭建完成最終的文檔界面內(nèi)容， 并在各類終端顯示出的網(wǎng)頁(yè)界面，這里的各類終端包括服務(wù)器終端、PC機(jī)終端和筆記本電腦終端。
[0027]綜上所述，本發(fā)明的用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，面對(duì)不同分辨率終端顯示的靈活性強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題的特點(diǎn)，方法簡(jiǎn)單，容易實(shí)現(xiàn)，具有良好的應(yīng)用前景。[〇〇28]以上顯示和描述了本發(fā)明的基本原理、主要特征及優(yōu)點(diǎn)。本行業(yè)的技術(shù)人員應(yīng)該了解，本發(fā)明不受上述實(shí)施例的限制，上述實(shí)施例和說(shuō)明書中描述的只是說(shuō)明本發(fā)明的原理，在不脫離本發(fā)明精神和范圍的前提下，本發(fā)明還會(huì)有各種變化和改進(jìn)，這些變化和改進(jìn)都落入要求保護(hù)的本發(fā)明范圍內(nèi)。本發(fā)明要求保護(hù)范圍由所附的權(quán)利要求書及其等效物界定。
【主權(quán)項(xiàng)】
1.一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，其特征在于:包括以下步驟，步驟(1)，CSS樣式設(shè)置通過(guò)外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式這三種插入樣式表的方法來(lái)設(shè)置HTML中各個(gè) 標(biāo)簽樣式形成CSS文檔，進(jìn)而實(shí)現(xiàn)設(shè)置網(wǎng)頁(yè)的寬度，高度，內(nèi)外邊距，邊框樣式，背景，文本， 字體，鏈接，表格，列表，輪廓；步驟(2 )，通過(guò)HTML標(biāo)簽描述網(wǎng)頁(yè)通過(guò)CSS樣式設(shè)置后的HTML標(biāo)簽描述網(wǎng)頁(yè)，形成HTML文檔，HTML文檔包含HTML標(biāo)簽和純 文本HTML，網(wǎng)頁(yè)Web瀏覽器用于讀取HTML文檔，并以網(wǎng)頁(yè)的形式顯示，使用標(biāo)簽來(lái)解釋網(wǎng)頁(yè) 頁(yè)面的內(nèi)容，最終實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)所有展示的內(nèi)容；步驟(3)通過(guò)JavaScript獲取屏幕的寬度通過(guò)JavaScript，操作HTML中的body元素，首先找到該元素，通過(guò)給HTML文檔的標(biāo)簽命 名id屬性，找到對(duì)應(yīng)的HTML元素，并獲取屏幕的寬度，形成JavaScript文檔；步驟(4)編輯完成CSS文檔、HTML文檔、JavaScript文檔，在HTML文檔頭部引用準(zhǔn)備好 的，CSS的外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式;在HTML文檔底部引用準(zhǔn)備好的JavaScript文 檔以及在HTML文檔中插入需要的JavaScript語(yǔ)句，以此搭建完成最終的文檔界面內(nèi)容，并 在各類終端顯示出的網(wǎng)頁(yè)界面。2.根據(jù)權(quán)利要求1所述的一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，其特 征在于:步驟(1)內(nèi)聯(lián)樣式優(yōu)先級(jí)高于內(nèi)部樣式表，內(nèi)部樣式表優(yōu)先級(jí)高于外部樣式表。3.根據(jù)權(quán)利要求1或2所述的一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，其 特征在于:所述外部樣式表用于調(diào)整需要調(diào)整界面的尺寸;所述內(nèi)部樣式表用于單個(gè)文檔 需要對(duì)應(yīng)樣式時(shí)使用，用于調(diào)整標(biāo)簽的樣式和尺寸;所述內(nèi)聯(lián)樣式僅需要在一個(gè)元素上應(yīng) 用一次時(shí)使用，用于最高級(jí)調(diào)整該標(biāo)簽的樣式和尺寸。4.根據(jù)權(quán)利要求1所述的一種用于PC端信息系統(tǒng)網(wǎng)頁(yè)界面的寬度自適應(yīng)的方法，其特 征在于:步驟(4)各類終端包括服務(wù)器終端、PC機(jī)終端和筆記本電腦終端。
【文檔編號(hào)】G06F9/44GK105975268SQ201610285930
【公開日】2016年9月28日
【申請(qǐng)日】2016年5月3日
【發(fā)明人】嚴(yán)晴, 王澍, 巢玉堅(jiān), 劉嘉華, 胡游君, 邱玉祥, 康睿, 吳德勝, 王琪, 周夏, 蔡新忠, 劉皓, 施健, 馬遠(yuǎn)東, 張俊凱, 周鎖, 萬(wàn)明, 王泉嘯, 喬治中, 王錦杰, 劉洋, 夏云
【申請(qǐng)人】國(guó)家電網(wǎng)公司, 南京南瑞集團(tuán)公司, 南京南瑞信息通信科技有限公司