DIV+CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)布局中的應(yīng)用分析

徐官學(xué)

摘要：本文詳細(xì)闡述了DIV+CSS的基礎(chǔ)理論，并從標(biāo)準(zhǔn)布局、定位布局、浮動(dòng)布局這三個(gè)方面對(duì)DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用進(jìn)行了介紹，并提出DIV+CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)布局中的應(yīng)用的注意事項(xiàng)。

關(guān)鍵詞：DIV+CSS;布局技術(shù);網(wǎng)頁(yè)設(shè)計(jì)

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

一、DIV+CSS的基礎(chǔ)理論

DIV技術(shù)其主要作用就是對(duì)HTML語(yǔ)言開(kāi)展的，也可以稱之為層疊樣式表中的定位技術(shù)，其主要的作用就是劃分。DIV元素多種多樣，但是其主要用途就是為了對(duì)HTML文檔中的大塊內(nèi)容提供結(jié)構(gòu)和背景元素。DIV技術(shù)可以對(duì)網(wǎng)頁(yè)的樣式信息和內(nèi)容進(jìn)行劃分，使其成為獨(dú)立的含有實(shí)際意義的模塊。DIV技術(shù)對(duì)所有模塊進(jìn)行直接控制。

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

二、DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用時(shí)，要加強(qiáng)對(duì)網(wǎng)頁(yè)信息里面所包含的語(yǔ)言和結(jié)構(gòu)進(jìn)行詳細(xì)的了解和仔細(xì)的研究，使得網(wǎng)頁(yè)的各個(gè)組成部分、元素能夠按照相應(yīng)的組合排列方式的框架所形成，從而使得整個(gè)網(wǎng)頁(yè)設(shè)計(jì)布局更為科學(xué)合理。

（一）標(biāo)準(zhǔn)布局

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

（二）浮動(dòng)布局

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

（三）定位布局

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

定位布局實(shí)現(xiàn)各項(xiàng)元素屬性，其主要的實(shí)現(xiàn)方式就是相對(duì)定位，通過(guò)確定水平和豎直的位置，來(lái)實(shí)現(xiàn)標(biāo)準(zhǔn)流的位置存在。在進(jìn)行絕對(duì)定位使用的過(guò)程中，我們一定要對(duì)其祖先元素進(jìn)行位置屬性的設(shè)置，以此保證標(biāo)準(zhǔn)流的其他元素布局不會(huì)因?yàn)榻^對(duì)定位的影響而產(chǎn)生影響，所以在開(kāi)展網(wǎng)頁(yè)布局設(shè)計(jì)時(shí)，為了實(shí)現(xiàn)絕對(duì)定位的元素覆蓋其他元素，我們可以通過(guò)z-index屬性來(lái)實(shí)現(xiàn)控制元素的目的，通過(guò)控制元素層級(jí)順序來(lái)達(dá)到定位布局的效果，在實(shí)際的運(yùn)用過(guò)程中，其相對(duì)定位一般不是獨(dú)立單獨(dú)使用的，其主要是利用祖先元素作為其定位元素，從而實(shí)現(xiàn)絕對(duì)定位中子孫元素的定位。

三、DIV+CSS布局的注意事項(xiàng)

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

綜上所述，為了實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)布局更加科學(xué)合理，網(wǎng)頁(yè)整體更加的美輪美奐，我們可以采用DIV+CSS布局技術(shù)，從而來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)的完美和表現(xiàn)分離的流暢。DIV+CSS的布局方式可以有效提升網(wǎng)頁(yè)的開(kāi)發(fā)速度，提升網(wǎng)頁(yè)的運(yùn)行效率和代碼的可讀性，但是要實(shí)現(xiàn)對(duì)DIV+CSS技術(shù)的熟練運(yùn)用還是要加強(qiáng)自身的學(xué)習(xí)和經(jīng)驗(yàn)積累。

參考文獻(xiàn)：

[1]溫盛萍. DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J]. 信息化建設(shè)， 2015， No.206（10）：83.

[2]張繼皇. 網(wǎng)頁(yè)設(shè)計(jì)中DIV+CSS布局技術(shù)的應(yīng)用研究[J]. 廣東教育（職教版）， 2018， 000（007）：123-125.

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

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