一種web頁面的布局方法和布局系統技術方案

本發明專利技術適用于頁面布局領域，提供了一種web頁面的布局方法和布局系統，所述布局方法包括：獲取待布局萬維網web頁面的類型，所述類型包括：布局類型，以及是否包含固定尺寸柵格，所述布局類型包括：自動高度或設備高度；根據所述類型，通過橫向外框、豎向外框、固定尺寸柵格以及比例尺寸柵格對所述待布局web頁面進行布局。本發明專利技術實施例，獲取待布局web頁面的類型，根據類型，通過橫向外框、豎向外框、固定尺寸柵格以及比例尺寸柵格對待布局web頁面進行布局，使得web頁面中可以包含固定尺寸柵格和比例尺寸柵格，豐富了web頁面的設計，增加了web頁面的樣式。

【技術實現步驟摘要】
一種web頁面的布局方法和布局系統
本專利技術屬于頁面布局領域，尤其涉及一種web頁面的布局方法和布局系統。
技術介紹
在現代各種web(WorldWideWeb，全球廣域網)應用中，往往需要頁面去適應各種設備(PC，手機，平板等)不同的屏幕大小，開發人員需要花費大量時間和精力用于頁面布局的實現，這種需求下催生了諸如bootstrap，foundation等一系列以柵格系統為基礎的css(CascadingStyleSheets，層疊樣式表)框架，讓開發人員能更快速方便的實現頁面布局。柵格系統是一種將頁面元素平均分為一定數量的等寬小格子的系統(現有柵格系統通常分為12份)，該頁面元素的子元素可以根據設置的樣式值占據一定的寬度(0/12～12/12)。現有的框架全部使用百分比寬度設置實現柵格系統，僅能用于水平方向的柵格布局，而且由于柵格數值的固定，預定義的靈活性也會受到限制。典型的百分比柵格系統將父元素的寬度分為12份，每份占總寬度的8.33％，可實現兩個子元素1:11、2:10、3:9…11:1的水平方向寬度比例控制，每份寬度必為8.33％的倍數，但是對于每份寬度不為8.33％的寬度設置如1:10、3:4、1:6等無法實現，如果開發中一定需要實現該類需求要么放棄使用柵格系統，要么重新設置整個柵格系統每份寬度(如：要實現3:4，則需重新設置柵格系統每份寬度為14.28％，寬度值1至7，對應的要重設從1至7的每個占比的寬度值，1為14.28％、2為28.56％以此類推)。
技術實現思路
本專利技術實施例的目的在于提供一種web頁面的布局方法和布局系統，以解決現有技術頁面布局由于單位柵格固定造成靈活性差的問題。本專利技術實施例是這樣實現的，一種web頁面的布局方法，所述布局方法，包括：獲取待布局web頁面的類型，所述類型包括：布局類型、柵格類型，所述布局類型包括：自動高度或設備高度，所述柵格類型包括：固定尺寸柵格加比例尺寸柵格或者比例尺寸柵格；根據獲取的布局類型和柵格類型對所述待布局web頁面進行布局。本專利技術實施例的另一目的在于提供一種web頁面的布局系統，所述布局系統，包括：類型獲取單元，用于獲取待布局web頁面的類型，所述類型包括：布局類型、柵格類型，所述布局類型包括：自動高度或設備高度，所述柵格類型包括：固定尺寸柵格加比例尺寸柵格或者比例尺寸柵格；布局單元，用于根據獲取的布局類型和柵格類型對所述待布局web頁面進行布局。本專利技術實施例，獲取待布局web頁面的布局類型和柵格類型，根據獲取的布局類型和柵格類型對所述待布局web頁面進行布局，使得豎直方向和水平方向的高度比例可以分別得到控制，同時在豎直方向和水平方向豐富了web頁面的設計，增加了web頁面的樣式。附圖說明為了更清楚地說明本專利技術實施例中的技術方案，下面將對實施例或現有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本專利技術的一些實施例，對于本領域普通技術人員來講，在不付出創造性勞動性的前提下，還可以根據這些附圖獲得其他的附圖。圖1為本專利技術一示例性實施例示出的一種web頁面的布局方法的流程圖；圖2為本專利技術另一示例性實施例示出的一種web頁面的布局方法的流程圖；圖3為本專利技術再一示例性實施例示出的一種web頁面的布局方法的流程圖；圖4為本專利技術再一示例性實施例示出的一種web頁面的布局方法的流程圖；圖5為本專利技術再一示例性實施例示出的一種web頁面的布局方法的流程圖；圖6為本專利技術一示例性實施例示出的一種web頁面的布局系統的結構圖；圖7為本專利技術另一示例性實施例示出的一種web頁面的布局系統的結構圖；圖8為本專利技術再一示例性實施例示出的一種web頁面的布局系統的結構圖；圖9為本專利技術再一示例性實施例示出的一種web頁面的布局系統的結構圖；圖10為本專利技術再一示例性實施例示出的一種web頁面的布局系統的結構圖。具體實施方式為了使本專利技術的目的、技術方案及優點更加清楚明白，以下結合附圖及實施例，對本專利技術進行進一步詳細說明。應當理解，此處所描述的具體實施例僅僅用以解釋本專利技術，并不用于限定本專利技術。為了說明本專利技術所述的技術方案，下面通過具體實施例來進行說明。如圖1所示為本專利技術一示例性實施例示出的一種web頁面的布局方法的流程圖，所述布局方法包括：步驟S101，獲取待布局萬維網web頁面的類型，所述類型包括：布局類型，以及是否包含固定尺寸柵格，所述布局類型包括：自動高度或設備高度。在本專利技術實施例中，布局類型是一個web(WorldWideWeb，萬維網)頁面首先需要確定的特征，確定了布局類型才可以進行后續的布局工作。Web頁面的布局類型包括但不限于：自動高度、設備高度。自動高度即web頁面根據內容的增長而增長，頁面內容每增長一行，頁面高度也增長一行；設備高度即web頁面的頁面主體固定為設備的可視區域的高度，在該布局類型下，設備的可視區域是多少，web頁面即為多少，如：4.7寸可視區域的手機，則web頁面的頁面主體為4.7寸，5.5寸可視區域的手機，則web頁面的頁面主體為5.5寸，如果是7.9寸可視區域的平板電腦，則web頁面的頁面主體為7.9寸。固定尺寸柵格是相對于比例尺寸柵格而言的，web頁面可以由少量固定尺寸柵格和多個比例尺寸柵格組成，少量固定尺寸柵格的尺寸相互獨立，多個比例尺寸柵格之間按比例劃分，如：50px:100px:150px(1:2:3)，或者100px:150px:250px(2:3:5)等可根據實際使用的需要隨意設定，是否包含固定尺寸柵格是本專利技術實施例的一個重要部分，是否包含固定尺寸柵格，終端也將會使用不同的布局方法，用戶可以在開始進行布局之前確定是否包含固定尺寸柵格。需要指出的是，根據布局類型的特性，不同的布局類型可以適應不同的布局需求：設備高度可以滿足單屏頁面的布局請求，自動高度可以滿足多屏頁面的布局請求。步驟S102，根據所述類型，通過橫向外框、豎向外框、固定尺寸柵格以及比例尺寸柵格對所述待布局web頁面進行布局。在本專利技術實施例中，對于不同的類型，終端使用不同的布局方法，對web頁面進行布局，該類型包括：自動高度且包含自定義尺寸柵格、自動高度但不包含自定義尺寸柵格、設備高度且包含自定義尺寸柵格、設備高度但不包含自定義尺寸柵格。橫向外框和縱向外框用于定義水平方向和豎直方向的柵格系統外框，橫向外框設置flex-direction為row，縱向外框設置flex-direction為column，橫向外框和豎向外框之間可以相互套用實現復雜的組合布局。如圖2所示為本專利技術另一示例性實施例示出的一種web頁面的布局方法的流程圖，如果所述類型為：自動高度且包含固定尺寸柵格，所述根據所述類型，通過橫向外框、豎向外框、固定尺寸柵格以及比例尺寸柵格對所述待布局web頁面進行布局，包括：步驟S201，設置橫向外框值、豎向外框值、橫向固定尺寸柵格值以及豎向固定尺寸柵格值。在本專利技術實施例中，雖然web頁面類型為自動高度，但仍然需要對外框進行設值，因此需要對：橫向外框、豎向外框、固定尺寸柵格分別設值，其中固定尺寸柵格值包括：橫向固定尺寸柵格值以及豎向固定尺寸柵格值。需要指出的是，由于web頁面的類型為自動高度，所以在web頁面的height(高度方向)不設值。本文檔來自技高網...

【技術保護點】
1.一種web頁面的布局方法，其特征在于，所述布局方法，包括：獲取待布局web頁面的類型，所述類型包括：布局類型、柵格類型，所述布局類型包括：自動高度或設備高度，所述柵格類型包括：固定尺寸柵格加比例尺寸柵格或者比例尺寸柵格；根據獲取的布局類型和柵格類型對所述待布局web頁面進行布局。

【技術特征摘要】
1.一種web頁面的布局方法，其特征在于，所述布局方法，包括：獲取待布局web頁面的類型，所述類型包括：布局類型、柵格類型，所述布局類型包括：自動高度或設備高度，所述柵格類型包括：固定尺寸柵格加比例尺寸柵格或者比例尺寸柵格；根據獲取的布局類型和柵格類型對所述待布局web頁面進行布局。2.如權利要求1所述的布局方法，其特征在于，如果所述類型為：自動高度、固定尺寸柵格加比例尺寸柵格，所述根據獲取的布局類型和柵格類型對所述待布局web頁面進行布局，包括：設置橫向外框值、豎向外框值、橫向固定尺寸柵格值以及豎向固定尺寸柵格值；獲取橫向外框值減去橫向固定尺寸柵格值的橫向剩余尺寸值，并獲取豎向外框值減去豎向固定尺寸柵格值的豎向剩余尺寸值；在所述橫向剩余尺寸值中劃分橫向比例尺寸柵格值，并在所述豎向剩余尺寸值中劃分豎向比例尺寸柵格值。3.如權利要求1所述的布局方法，其特征在于，如果所述類型為：自動高度、比例尺寸柵格，所述根據獲取的布局類型和柵格類型對所述待布局web頁面進行布局，包括：設置橫向外框值以及豎向外框值；在所述橫向外框值中劃分橫向比例尺寸柵格值，并在所述豎向外框值中劃分豎向比例尺寸柵格值。4.如權利要求1所述的布局方法，其特征在于，如果所述類型為：設備高度、固定尺寸柵格加比例尺寸柵格，所述根據獲取的布局類型和柵格類型對所述待布局web頁面進行布局，包括：設置設備高度值、橫向外框值、豎向外框值、橫向固定尺寸柵格值以及豎向固定尺寸柵格值；獲取橫向外框值減去橫向固定尺寸柵格值的橫向剩余尺寸值，并獲取豎向外框值減去豎向固定尺寸柵格值的豎向剩余尺寸值；在所述橫向剩余尺寸值中劃分橫向比例尺寸柵格值，并在所述豎向剩余尺寸值中劃分豎向比例尺寸柵格值。5.如權利要求1所述的布局方法，其特征在于，如果所述類型為：設備高度、比例尺寸柵格，所述根據獲取的布局類型和柵格類型對所述待布局web頁面進行布局，包括：設置設備高度值、橫向外框值以及豎向外框值；在所述橫向外框值中劃分橫向比例尺寸柵格值，并在所述豎向外框值中劃分豎向比例尺寸柵...

【專利技術屬性】
技術研發人員：周劼，李麗，馬志遠，
申請(專利權)人：武漢安天信息技術有限責任公司，
類型：發明
國別省市：湖北,42