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