基于css 的div 網(wǎng)頁布局設(shè)計

2021-04-24 09:07:40楚孟慧吳姝瑤

科學(xué)技術(shù)創(chuàng)新 2021年9期

楚孟慧吳姝瑤

（山東科技大學(xué) 電氣信息系，山東濟南250031）

1 div+css 布局的優(yōu)勢

1.1 與表格布局比較。css+div 布局在網(wǎng)站開發(fā)中已經(jīng)被應(yīng)用很多年了，占據(jù)了相當(dāng)大的主導(dǎo)地位。div 是HTML 里的一種標(biāo)簽

是可以用來成塊顯示內(nèi)容的一種標(biāo)記。幾乎所有瀏覽器都能夠識別此標(biāo)簽，為網(wǎng)頁設(shè)計提供布局結(jié)構(gòu)。在div 標(biāo)簽里，開始和結(jié)束標(biāo)簽之間可寫入任何需要的標(biāo)簽來充實網(wǎng)頁內(nèi)容。Div 元素可以看做一個干凈容器所以設(shè)計師可以通過設(shè)置其屬性來修飾其樣式也可以嵌套其他元素來放入內(nèi)容，最后通過改變其布局方式來呈現(xiàn)多彩多樣的網(wǎng)頁布局形式。Css 則是層級樣式表，幾乎所有瀏覽器都支持css 技術(shù)，css 將div 中的各種屬性和屬性值集合在一起，能夠簡單、有效的控制網(wǎng)頁的顏色、布局、字體、背景等等。

將css 樣式表打包成一個文件，使用時可重復(fù)調(diào)用、舉一反三。使用css+div 布局可以使內(nèi)容和表現(xiàn)形式分離，代碼干凈整潔、有較好的復(fù)用性和可讀性。與css+div 布局相比因表格布局最初的目的是用于放置文字顯示內(nèi)容，用于網(wǎng)頁布局必須要調(diào)整表格內(nèi)部大小，與制表元素夾雜在一起容易導(dǎo)致大量冗余代碼，影響代碼的可讀性并且難以維護。

1.2 屬性的多樣性。Div 元素可設(shè)置多種屬性，其屬性可通過css 層疊樣式表統(tǒng)一設(shè)置，下面是幾種較為常用的能夠增強網(wǎng)頁美觀度屬性設(shè)置。

1.2.1 background 設(shè)置背景顏色，例如設(shè)置背景顏色為紅色或者綠色background：red/green ，其中屬性值還可以用十六進制數(shù)表示；屬性值若是為url（“圖片路徑”）則為設(shè)置該路徑下的圖片為此div 元素的背景。

1.2.2 opacity 設(shè)置背景顏色的透明度，例如opacity：0.7 效果是百分之70 是不透明的，數(shù)值越小透明度越高。

1.2.3 border-radius 設(shè)置div 元素的圓角化，例如border-radius：10px 將10px 的寬度進行圓角化且數(shù)值越大圓角化的程度越高。

1.2.4 border 設(shè)置邊框?qū)傩?，此屬性可同時設(shè)置邊框的寬度、樣式、顏色。例如：border: 1px solid #00008b 效果寬度為1px，樣式為實線，顏色為#00008b。

2 div+css 布局的劣勢

雖然大多數(shù)瀏覽器都支持css+div 技術(shù)，但還是有部分瀏覽器不支持此技術(shù)。而且div+css 技術(shù)對于新手開發(fā)者來說是比較困難的，因為相對于表格布局來說div 元素的定位更復(fù)雜，容易導(dǎo)致頁面分布七零八落。

3 div+css 實現(xiàn)網(wǎng)頁布局

3.1 常規(guī)流式布局

流式布局是在網(wǎng)頁中常見的布局，流式布局是按照標(biāo)簽的編寫順序來依次垂直排列。如圖1：

圖1 流式布局

流式布局代碼：

代碼解析：常規(guī)流式布局中簡單羅列

標(biāo)簽就可以達(dá)到垂直排列的網(wǎng)頁布局并且css 中主題部分高度設(shè)置大于頭部和底部，寬度設(shè)置相同，此代碼可以直接應(yīng)用到各種需要常規(guī)布局的網(wǎng)站。

3.2 浮動布局

僅僅使用常規(guī)的流式布局只能實現(xiàn)垂直方向上的div 元素排列無法形成多種多樣的網(wǎng)絡(luò)布局結(jié)構(gòu)，此時浮動布局就顯得尤為重要。浮動布局可以形象的描述為每個div 元素塊就像浮動在水面上，位置可以隨著水流方向的改變而改變。浮動分為兩個方向左浮動和右浮動分別對應(yīng)屬性和屬性值為float：left /right。在同一行中的不同div 元素可以存在不同的浮動，浮動塊不會相互重疊。在不需要浮動屬性時可以清除浮動，浮動布局可以使各部分排列有序，從而有利于對整體空間規(guī)劃。

當(dāng)三個相同大小的div 元素都設(shè)置向左浮動的屬性時則出現(xiàn)如圖2 所示的情況：

圖2 全部左浮動

當(dāng)沒有浮動屬性時float：none 也是默認(rèn)設(shè)置網(wǎng)頁布局與圖1 相同。

當(dāng)?shù)撞縟iv 的浮動屬性由float：left 改為float：right 時底部div 模塊會向右對齊。

當(dāng)div 排列在同一行時當(dāng)?shù)撞縟iv 的浮動屬性被清除即clear：left 則底部div 將換行顯示，如圖3 。

圖3 底部清除浮動

當(dāng)大小不一致的div 元素排列在同一行，不能完全顯示的div 會自動換行，并在下一行的開頭顯示，如圖4。

圖4 底部換行顯示

在css 中加入float：left 使得三個div 層全部左移形成水平排列的效果。css 樣式表中的高度和寬度大小相同。

3.3 定位布局

3.3.1 靜態(tài)定位。position：static 如果代碼中不寫position 屬性相當(dāng)于寫上了position：static，元素在它原本的位置顯示，即使增加top、left 等屬性也不起作用。

3.3.2 相對定位與絕對定位。相對定位：podition：relative 是相對于原來位置進行上下左右的移動，且原來位置仍被占位。

絕對定位position：absolute 是相對于網(wǎng)頁左上角0 點來說，配合top、left、right、bottom 來進行定位。若位于父層元素的下一層元素則是相對于父層元素來定位，前提是父層元素已經(jīng)定位。當(dāng)父層元素定位為絕對定位，子層元素相對于最近的父層元素發(fā)生改變。

當(dāng)Grandfather 層定位，fatehr 層進行想對移動之后，son 層相對于已經(jīng)定位的father 層進行移動，如圖5 所示。

圖5 絕對定位

解析：首先Grandfather 層div 設(shè)置position：absolute，此時Father 層的最近父層則為Grandfather 層，于是Father 層相對于Grandfather 層偏移。Father 層設(shè)置為position：absolute 之后Son層可以相對于Father 層進行偏移。

4 結(jié)論

綜上所述，css+div 布局結(jié)構(gòu)存在著優(yōu)勢同時又存在著劣勢。但div+css 布局能夠成為主流主要是由于css 與div 將樣式與布局分離，避免改變樣式時需要大量的修改代碼。所以對于新手設(shè)計師來說需要將div+css 結(jié)構(gòu)掌握之后再進行網(wǎng)頁設(shè)計，盡量避免定位不準(zhǔn)確的問題，掌握三種常用的布局方式對設(shè)計網(wǎng)頁有極大幫助。