基于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)站。
中國船級社（CCS）發(fā)布 《海上浮動設(shè)施入級規(guī)范》（2023） 輻流式二沉池的結(jié)構(gòu)優(yōu)化研究 一種用于剪板機送料的液壓浮動夾鉗 基于CSS的網(wǎng)頁導(dǎo)航欄的設(shè)計 帶有浮動機構(gòu)的曲軸孔鏜刀應(yīng)用研究 基于URL和網(wǎng)頁類型的網(wǎng)頁信息采集研究 微球測速聚類分析的流式液路穩(wěn)定性評估 網(wǎng)頁制作在英語教學(xué)中的應(yīng)用 自調(diào)流式噴管型ICD的設(shè)計與數(shù)值驗證 流式在線直播視頻的采集
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)頁有極大幫助。
猜你喜歡
船舶標(biāo)準(zhǔn)化工程師(2023年2期)2023-09-30 22:51:45
工程與建設(shè)(2019年5期)2020-01-19 06:22:38
制造技術(shù)與機床(2018年11期)2018-11-23 01:08:04
電子制作(2018年10期)2018-08-04 03:24:38
制造技術(shù)與機床(2017年9期)2017-11-27 02:13:48
電子制作(2017年2期)2017-05-17 03:54:56
光學(xué)精密工程(2016年1期)2016-11-07 09:01:17
電子測試(2015年18期)2016-01-14 01:22:58
西南石油大學(xué)學(xué)報(自然科學(xué)版)(2015年4期)2015-08-20 09:05:28
河南科技(2015年8期)2015-03-11 16:23:41
