淺談DIV+CSS網頁布局技術
2021-02-28 11:53:53李英
電腦知識與技術 2021年35期
李英
摘要：隨著網絡的迅猛發展，上網瀏覽網頁成為Internet最常用的應用之一。如何設計制作精美的網頁也成為人們亟待解決的問題。DIV+CSS技術在網頁布局中的優勢作用使得其在網頁設計與開發中應用越來越廣泛?；诖耍撐氖紫葘IV+CSS技術進行概述，然后對其在網頁布局中的應用原理與優勢進行分析，最后對DIV+CSS布局注意問題進行了說明。
關鍵詞：DIV;CSS;網頁布局
中圖分類號：TP393 ? ? ? ?文獻標識碼：A
文章編號：1009-3044（2021）35-0155-03
1 引言
隨著WEB2.0標準化設計理念的普及，國內很多大型門戶網站已經紛紛采用DIV+CSS制作技術，從實際應用情況來看，此種方法絕對好于表格制作頁面的方法。使用CSS可以結構化HTML，實現表現和內容相分離，提高易用性，結構清晰，對搜索引擎更加友好，同時支持各種瀏覽器，兼容性好。
2 DIV+CSS技術概述
2.1 DIV技術
DIV元素主要作用是提供結構和背景，構成文檔大部分內容。DIV的構成要素標簽的起始與結束之間構成內容塊，<div>標簽的屬性控制元素的特性，或者是使用CSS樣式對這個塊進行格式化。其中，DIV是一個容器。
2.2 CSS技術
CSS的中文名稱為層疊樣式表，屬于一種樣式設計計算機語言，經常用來表現HTML或XML等文件，其最大特點是能夠將網頁表現與內容分離。初步交互設計是一種表現設計計算機語言，目前為止，基于文本為依托展示最優秀相關內容。CSS能夠根據不同使用者的特質，針對不同人群，依據其理解能力強弱與否，進行簡化從而優化寫法，使得其更易于理解。
2.2.1 標簽選擇器
標簽選擇器其實就是html代碼中的標簽。如<html>、<body>、<img>、<h1>、<p>等。例如代碼p{font-size：16px;line-height：1.8em;}的作用是為p 標簽設置16px字號、行間距設置1.8em的樣式。
2.2.2 類選擇器
CSS樣式代碼中最常用的就是類選擇器，其語法內容為.類選擇器名稱{CSS樣式代碼;}
具體使用方法如下：
首先，用標簽修飾內容。比如：<span>心驚膽戰</span>
其次，為標簽設置類，格式為class=“類選擇器名稱”，比如：<span class=“wz1”>心驚膽戰</span>
最后，設置樣式如下：.wz1{color：red;}
2.2.3 ID選擇器
應用ID選擇器樣式前，必須先在HTML標記中加入ID屬性，舉例來說，<font>標記要應用CSS樣式，那么就在<font>標記中加入ID屬性，如下所示：<font id=”id名稱”>
接著，只要在CSS樣式中加入ID選擇器聲明就可以了。聲明格式如下：
#id屬性名 ?{樣式規則;}
例如：#font_bold{font-size：14px;color：#ffffff;font-weight：bold;}
2.3 DIV+CSS技術
DIV+CSS布局技術是Web標準推薦的最佳布局方法，DIV的位置、尺寸、背景、邊框等可以通過CSS很好地實現，其內容和樣式分離的思想使得頁面代碼更為簡潔，樣式更改更為方便。
3 DIV+CSS技術在網頁布局中應用的原理
3.1 盒子模型
在DIV+CSS布局網頁中，盒子模型是一個非常重要的概念，只有掌握了盒子模型的布局原理，才能通過DIV+CSS的布局方法對網頁中的每個元素快速、準確地定位，并對各元素的各種屬性進行設置。
盒子模型的原理就是將DIV元素看作是一個有一點空間的盒子，它由margin（邊界）、border（邊框）、padding（填充）和Content（內容）組成。其中margin位于最外層;Content位于最里層，是存放具體內容的空間，不管是哪種組成屬性，都是用于控制元素內容的布局及定位。
Width和height定義的是content部分的寬度和高度， 外面依次加入margin、border和padding的寬度。padding和content部分會被背景填充。通常，與頁面的相對位置主要由margin屬性來控制，如使用margin-top：0px使得DIV與body部分的頂部邊距為0像素;而padding是指元素的周邊和內部的內容之間所空的空格，又稱為填充區域，可以用padding-left、padding-right、padding-top和padding-bottom分別控制內容的周邊空格;邊框主要涉及元素邊框的寬度、顏色、形態等的控制。
3.2 頁面的布局
頁面布局可有多種不同的模式，但都是標準的頭部+導航+內容+尾部的布局方式。其中內容部分的布局又可以分為2列右窄左寬型、2列左窄右寬型、3列寬度居中幾種方式。這些頁面布局的基本原則是為每個獨立的部分建立一個DIV層。
3.3 定位和浮動
在網頁中，使用Div進行網頁布局時，主要還是通過CSS規則中的Position和Float的屬性值進行快速定位，而在Position定位中包含了4種屬性值，這4個屬性值則決定了Div的布局方式，而Float屬性則是設置Div的浮動屬性，使其相對于另一個Div進行定位。Position屬性中的定位方法有relative（相對定位）、absolute（絕對定位）和fixed（懸浮定位）。
4 DIV+CSS技術在網頁布局中的優勢
網頁布局采用DIV和CSS技術，可以有效地簡化網頁維護工作量，網站頁面瀏覽速度大大提高，網頁的維護變得方便快捷，增強網頁的視覺交互效果， 自適應地改變網頁大小適應不同尺寸屏幕。
4.1 簡化網頁維護工作量
網頁設計人員如果采用傳統的設計方法，一旦網站升級改版，就需要對所有的代碼進行重新整合，降低了網站升級和維護的工作效率，也大大地增加了網頁維護的工作復雜度，不利于網頁迭代升級。采用DIV技術和CSS技術之后，設計師不需要更改全部代碼，只需要對部分關鍵代碼進行維護和更新即可，提高了網站升級維護的工作效率，為網站的升級打下堅實基礎。
4.2 網站頁面瀏覽速度大大提高
互聯網操作友好性不僅是網站友好性，更重要的是網站數據信息的傳輸效率，以便能夠提高網站頁面的響應速度和并發承載量。采用DIV和CSS技術，能夠有效提高網站的響應速度，具體方式是通過高效率傳輸相關網頁中的文字、數字和代碼，過濾掉其中不合乎標準的數據，從而可以讓人們等待更短的時間，提高網站頁面的層次感和快捷化。
4.3 網頁的維護變得方便快捷
CSS重要作用是能夠拆分樣式定義與HTML文件內容。首先定義CSS樣式文件，然后讓HTML文件調用CSS樣式文件。通過更改CSS文件樣式，可以達到改變HTML文件中任一部分的顯示效果。例如在網頁設計時通常會遇到這樣的問題：希望將網頁中所有的標題由藍色改成紅色，按照在標記中定義風格的方法，只能一個一個地改，工作量極大，而借助CSS只要修改幾個有限的樣式即可，大大降低了修改和維護的代價。
4.4 增強網頁的視覺交互效果
傳統網站設計師利用代碼進行編輯，網站渲染的效果分辨率較低，視覺效果不佳，無法給用戶帶來較強的沖擊力，因此降低了網站推廣相關效率。使用DIV和CSS技術，提供更有效的網頁布局，DIV封裝視頻、圖片、文字和表格，作為組成網頁布局子模塊的重要內容。因此可以結合實際需求，設計一個風格獨特的網站界面，提高網頁的視覺效果，也可以帶來積極性的推廣效果。
4.5 自適應地改變網頁大小適應不同尺寸屏幕
DIV和CSS技術可以增強網頁的自適應水平，方便門戶網適應不同尺寸的設備，比如PC電腦屏幕大，可以根據瀏覽器的大小進行自適應。智能手機或平板電腦的屏幕尺寸小，合理優化大小屏幕版式和內容。
5 DIV+CSS布局注意問題
在CSS的樣式表定義中，一般的網頁布局需要了解如下幾方面的問題。
5.1 保持居中
DIV+CSS的布局保持居中主要包含幾方面要考慮的問題。
5.1.1 保持整體頁面居中
頁面顯示位居屏幕中間是網頁瀏覽的一個基本要求。通過CSS的margin屬性對<body>元素進行定義可以達到控制網頁顯示位置的效果。
Body{text-align：center;margin：0px auto;}
margin：0px auto代表上下邊距為0，左右為自動調整邊距。另一種方法是可以設置所有的<div>的間距為{margin：0 auto;};使用這個設置網頁每個通欄的最外層DIV就會自動居中，另外如果要讓DIV層居左或者居右，則用float屬性設置居左或者居右就可以了。
5.1.2 保持頁面背景居中
頁面背景的居中包括左右居中和上下居中，可使用下面的定義。
Body{background：url（） #fff no-repeat center;}
讓url指示的圖片設置背景不重復，并將其居中。這個居中是左右居中，而垂直不需要設置，自動會居中。
5.1.3 文字圖片內容居中
左右居中直接用text-align：center即可讓文字與圖片內容居中。但是文字垂直居中就要靠設置行高方法使文字內容居中，通過使用CSS屬性類樣式line-height實現文字與圖片的垂直居中。
5.2 內容排版
在需要水平排版內容時，如水平導航、水平排列的用戶名和用戶名輸入框、水平排列的多個按鈕或者圖片等，都可以采用水平列表排版，并且通過margin-left或margin-right來調整左右間距達到合適效果;在需要垂直排版內容時，如新聞列表等同樣也可以采用無序列表實現，通過margin-top或margin-bottom調整上下間距達到合適的頁面效果。
5.3 瀏覽器的兼容性
不同的瀏覽器由于設計的不同，對于同樣的CSS設計效果可能略有不同，所以在完成頁面設計后需要在可能碰到的瀏覽器上進行測試，看同一個頁面在大多數常用的瀏覽器顯示效果是否相同。可測試目前比較流行的瀏覽器，如IE、chrome、火狐瀏覽器等的顯示效果。
6 結束語
網頁布局設計是一個復雜的、系統的工作，其需要結合網站設計的實際需求，引入更加先進的網頁布局設計技術，比如DIV和CSS等，有效地探索網頁布局，利用DIV分離網頁內容與形式，規劃網頁主體架構，使得網頁設計的代碼更加精煉，從而使得網頁空間結構簡練明確，網站搜索引擎大幅度提升工作效率及網頁開發效率。更重要的一點是，可以作為下一代網站升級的機遇，減少網頁開發所需要的精力，從而大幅度提升網站維護相關效率。
參考文獻：
[1] 李彥.DIV+CSS技術在網頁設計布局中的應用研究[J].微型電腦應用，2020，36（3）：19-21，30.
[2] 趙菁.采用DIV+CSS技術的內網門戶的設計和制作——以大慶油田第四采油廠為例[J].信息系統工程，2019（3）：51.
[3] 高葵，付曉翠，李蔚妍.基于CSS + Div的固定寬度與變寬度網頁布局剖析[J].計算機科學與應用，2020，10（2）：303-311.
[4] 申永芳.高校門戶網站設計中DIV與CSS布局技術的應用研究[J].宿州教育學院學報，2019，22（4）：87-89，93.
【通聯編輯：代影】
