徐官學

摘要：本文詳細闡述了DIV+CSS的基礎理論，并從標準布局、定位布局、浮動布局這三個方面對DIV+CSS布局技術在網頁設計中的應用進行了介紹，并提出DIV+CSS技術在網頁設計布局中的應用的注意事項。

關鍵詞：DIV+CSS;布局技術;網頁設計

網頁當中，布局良好可以成為吸引網民的重要手段，它如同陶藝創(chuàng)作前期的創(chuàng)意構思圖一般，可以引導網頁設計時進行更為科學合理的內容分配，使得整體局面豐富而不凌亂，讓人體會到網頁的美。布局，其實就是將網頁當中的各個元素進行合理定位安排，使得整個網頁結構層次分明，各個元素不漏不亂，均出現(xiàn)在它應該出現(xiàn)的位置。在網頁布局當中， Table技術使用非常多見，但是由于其存在的問題和不足，使得DIV+CSS布局方式逐漸成為了網頁設計布局的主要技術方式，并在網頁設計布局中發(fā)揮重要的作用。

一、DIV+CSS的基礎理論

DIV技術其主要作用就是對HTML語言開展的，也可以稱之為層疊樣式表中的定位技術，其主要的作用就是劃分。DIV元素多種多樣，但是其主要用途就是為了對HTML文檔中的大塊內容提供結構和背景元素。DIV技術可以對網頁的樣式信息和內容進行劃分，使其成為獨立的含有實際意義的模塊。DIV技術對所有模塊進行直接控制。

CSS技術指的是層疊樣式表，是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。[1]CSS技術可以靜態(tài)修飾網頁的同時，動態(tài)的對網頁中各個元素進行格式化，使得更加容易便捷的對網頁布局進行控制，從而提高網頁下載速度。

二、DIV+CSS布局技術在網頁設計中的應用

DIV+CSS布局技術在網頁設計中應用時，要加強對網頁信息里面所包含的語言和結構進行詳細的了解和仔細的研究，使得網頁的各個組成部分、元素能夠按照相應的組合排列方式的框架所形成，從而使得整個網頁設計布局更為科學合理。

（一）標準布局

在網頁設計當中，其標準布局的具體含義就是指將網頁中各個組成元素按照HTML代碼的要求，從左到右，自上而下按照順序進行分布，這個就是網頁設計布局當中的標準布局。在進行網頁設計當中，關于塊級元素，計算機默認的分布方式就是其所有元素按照自上而下的順序進行垂直分布，大家一起的操作標準，默認為無論塊級元素多么的寬擴或者如何超出其寬窄限制，都會讓他自己獨立占領一行。而內聯(lián)元素則與塊級元素有很大的區(qū)別，他所包含的元素是選擇從左到右的在水平方向分布顯示的，如果超出了一行，那么就會由系統(tǒng)自動對其進行自上而下的換行，然后再開展自左向右的排列順序進行分布布局，如此一直往下類推，直到完成相關網頁設計工作。[2]

（二）浮動布局

當在進行網頁設計過程中，其標準布局方式在進行布局設計時無法滿足系統(tǒng)或者網頁設計的需求，我們可以將部分設計利用兩個甚至更多的DIV在一行當中進行顯示，那么為了實現(xiàn)該一目的，就需要利用到浮動布局。浮動布局他的表現(xiàn)和作用就是打破傳統(tǒng)的標準布局模式，不再以自上而下、從左到右的標準布局方式布局，而是選擇讓塊級元素不再獨立占領一行，而是可以多個塊級元素存在一行等多種方式來實現(xiàn)網頁設計布局的多重設計效果。

（三）定位布局

定位布局一般分為三種方式即相對定位、絕對定位及固定定位。其主要的屬性表達主要有position、z-index等元素屬性。絕對定位是利用HTML的文檔內容在水平方向和豎直方向存在的不變的元素來確定的，其絕對位置定位的元素不占據(jù)空間環(huán)境;絕對定位它的位置是和相對于已經定位的祖先元素而言，如果當前需要進行定位的元素內容已經沒有祖先元素的存在，那么就需要相對于整個網頁來講進行定位;相對定位的說法是相對于絕對定位來定義的，它與絕對定位的區(qū)別就在于它們的參照物不同，絕對定位其參照點是頁面左上角的原點，而相對定位的參照物則是元素本身的位置;如果發(fā)現(xiàn)該元素在此過程中存在了偏移出現(xiàn)在了新的定位上，那么我們仍然要從原始的起點位置進行確定占據(jù)相應的空間;固定定位指的是其位置永遠都是相對于網絡頁面窗口位置選擇相應的位置，即使網頁下滑或者左右移動，其事物仍然位置不會發(fā)生改變，比如在網頁上看到的小廣告，無論我們怎么點擊或者瀏覽網頁，它就存在哪里。[3]

定位布局實現(xiàn)各項元素屬性，其主要的實現(xiàn)方式就是相對定位，通過確定水平和豎直的位置，來實現(xiàn)標準流的位置存在。在進行絕對定位使用的過程中，我們一定要對其祖先元素進行位置屬性的設置，以此保證標準流的其他元素布局不會因為絕對定位的影響而產生影響，所以在開展網頁布局設計時，為了實現(xiàn)絕對定位的元素覆蓋其他元素，我們可以通過z-index屬性來實現(xiàn)控制元素的目的，通過控制元素層級順序來達到定位布局的效果，在實際的運用過程中，其相對定位一般不是獨立單獨使用的，其主要是利用祖先元素作為其定位元素，從而實現(xiàn)絕對定位中子孫元素的定位。

三、DIV+CSS布局的注意事項

在進行網頁設計整體布局時，現(xiàn)今主要采取的方式為標準流方式，當網頁頁面存在多個塊級元素在一行當中顯示時，我們就可以通過浮動布局和定位布局對網頁設計布局進行改變實現(xiàn)目的。采用浮動布局，我們可以實現(xiàn)對后續(xù)出現(xiàn)的元素所開展的清除工作及影響。在進行定位布局的時候，開展祖先元素的定位設置，可以作為定位布局相對定位的參考對象，同時還要滿足絕對位置的坐標設置。

綜上所述，為了實現(xiàn)網頁設計布局更加科學合理，網頁整體更加的美輪美奐，我們可以采用DIV+CSS布局技術，從而來實現(xiàn)網頁結構的完美和表現(xiàn)分離的流暢。DIV+CSS的布局方式可以有效提升網頁的開發(fā)速度，提升網頁的運行效率和代碼的可讀性，但是要實現(xiàn)對DIV+CSS技術的熟練運用還是要加強自身的學習和經驗積累。

參考文獻：

[1]溫盛萍. DIV+CSS布局技術在網頁設計中的應用[J]. 信息化建設， 2015， No.206（10）：83.

[2]張繼皇. 網頁設計中DIV+CSS布局技術的應用研究[J]. 廣東教育（職教版）， 2018， 000（007）：123-125.

[3]張曉景. Div+CSS 3+jQuery網頁設計深度剖析[M]. 電子工業(yè)出版社， 2016.

恩施職業(yè)技術學院信息工程學院 湖北恩施 445000