盒模型在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用
前言：想要寫(xiě)出一篇引人入勝的文章？我們特意為您整理了盒模型在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。
摘要本文將盒模型技術(shù)應(yīng)用于布局網(wǎng)頁(yè)的頁(yè)面，摒棄了傳統(tǒng)表格布局網(wǎng)頁(yè)的方式并精簡(jiǎn)了網(wǎng)頁(yè)代碼，使網(wǎng)頁(yè)布局格式更加趨于標(biāo)準(zhǔn)化。實(shí)踐結(jié)果表明，在網(wǎng)頁(yè)設(shè)計(jì)中采用盒模型技術(shù)DIV標(biāo)簽位置更加靈活，網(wǎng)頁(yè)外觀修飾效果更加出眾，對(duì)網(wǎng)頁(yè)頁(yè)面元素排版精確度能夠達(dá)到像素級(jí)。
關(guān)鍵詞盒模型；網(wǎng)頁(yè)設(shè)計(jì)；CSS；應(yīng)用研究
1引言
隨著社會(huì)的發(fā)展與進(jìn)步，越來(lái)越多的行業(yè)開(kāi)始制作個(gè)性化的網(wǎng)頁(yè)，以提高其宣傳力和影響力。為了更加靈活地對(duì)網(wǎng)頁(yè)進(jìn)行布局，實(shí)現(xiàn)頁(yè)面的外觀修飾，使設(shè)計(jì)出的頁(yè)面結(jié)構(gòu)更加清晰，更有利于搜索，方便重構(gòu)和維護(hù)頁(yè)面，盒模型技術(shù)的使用必不可少。盒模型原理就是將層疊樣式表中的定位技術(shù)（DIV）標(biāo)簽元素當(dāng)作是有一點(diǎn)空間的盒子。采用盒模型技術(shù)來(lái)布局網(wǎng)頁(yè)頁(yè)面的主要方法就是在超文本標(biāo)記語(yǔ)言（HTML）頁(yè)面文檔中先進(jìn)行DIV標(biāo)簽對(duì)象的插入，再使用層疊樣式表（CascadingStyleSheet，CSS）樣式規(guī)則對(duì)插入的的DIV標(biāo)簽對(duì)象進(jìn)行定位和樣式設(shè)置，從而實(shí)現(xiàn)網(wǎng)頁(yè)元素的布局和定位[1]。在網(wǎng)頁(yè)中使用多個(gè)DIV標(biāo)簽進(jìn)行分隔，加上CSS的定位和修飾，完全體現(xiàn)出了網(wǎng)頁(yè)設(shè)計(jì)中DIV+CSS盒模型布局的基本原理。
2盒模型技術(shù)
在使用盒模型技術(shù)設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面時(shí)，應(yīng)首先對(duì)DIV和CSS的使用非常熟練。其中DIV負(fù)責(zé)結(jié)構(gòu)布局，CSS負(fù)責(zé)樣式的美化。使用DIV+CSS盒模型技術(shù)能夠準(zhǔn)確和快速地定位網(wǎng)頁(yè)頁(yè)面中的各個(gè)元素[2]，并對(duì)各種元素的各種屬性進(jìn)行相應(yīng)的設(shè)置，從而達(dá)到整個(gè)頁(yè)面的布局和外觀的修飾。
2.1DIV技術(shù)
DIV技術(shù)不僅可以分割網(wǎng)頁(yè)頁(yè)面，而且網(wǎng)頁(yè)內(nèi)容背景和總體結(jié)構(gòu)也要依賴(lài)于作為標(biāo)簽元素的div技術(shù)，從而達(dá)到網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)化、模塊化。DIV技術(shù)的使用標(biāo)志著網(wǎng)頁(yè)設(shè)計(jì)技術(shù)從傳統(tǒng)的二維空間延伸至先進(jìn)的三維空間。有了DIV，在網(wǎng)頁(yè)中可以輕松實(shí)現(xiàn)圖片和文本的各種運(yùn)動(dòng)效果[3]。DIV作為HTML標(biāo)記語(yǔ)言中的格式標(biāo)記，總是成對(duì)的出現(xiàn)，即出現(xiàn)的格式為<div></div>。該標(biāo)記對(duì)的用法和<p></p>標(biāo)記極為相似，包含有align對(duì)齊屬性。<div></div>標(biāo)簽元素也稱(chēng)為容器，其他的段落標(biāo)記和文本標(biāo)記等對(duì)象都可以放置于該標(biāo)記對(duì)中[4]。
2.2CSS技術(shù)
CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的主要作用就是定義各種網(wǎng)頁(yè)標(biāo)簽的樣式屬性。使用CSS技術(shù)可以使網(wǎng)頁(yè)更加的標(biāo)準(zhǔn)化和結(jié)構(gòu)化，可以使樣式和代碼分離開(kāi)，使得整個(gè)網(wǎng)頁(yè)代碼更加清晰。因此它在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域備受推崇。網(wǎng)頁(yè)設(shè)計(jì)中擴(kuò)展名為.css文件?？梢园阉?dāng)做是一種純文本文件來(lái)對(duì)待。其語(yǔ)法結(jié)構(gòu)格式為selector{property:value}。同時(shí)根據(jù)CSS樣式規(guī)則的選擇符進(jìn)行分類(lèi)，可將CSS樣式分為類(lèi)樣式、ID屬性標(biāo)簽、標(biāo)簽、復(fù)合內(nèi)容4類(lèi)。HTML的頭部包含所有類(lèi)型的CSS樣式，包含在<head></head>標(biāo)記代碼之中，開(kāi)始代碼標(biāo)記為<style>，結(jié)束的代碼標(biāo)記為</style>。
3盒模型網(wǎng)頁(yè)設(shè)計(jì)
在DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)技術(shù)中，盒模型是一個(gè)重要的概念，其結(jié)構(gòu)圖如圖1所示。盒模型通常可以理解為把DIV元素當(dāng)做一個(gè)有點(diǎn)空間的盒子來(lái)看待。盒子通常都有外層和里層，在這里Margin就是盒子的最外層；與之相對(duì)應(yīng)的最里層便是content，其作用主要是存放具體的內(nèi)容。從圖1可以看出，Border為盒模型的邊框，Padding為盒模型填充的內(nèi)容。不管是哪種組成屬性，都是由于控制元素內(nèi)容的布局及定位。打開(kāi)CSS規(guī)則定義對(duì)話框，Top、Right、Bottom和Left參數(shù)值可以在方框選項(xiàng)中設(shè)置Margin欄中的Top、Right、Bottom和Left參數(shù)值。在邊框選項(xiàng)中，主要是對(duì)盒模型中Border的顏色、寬度和樣式的屬性值進(jìn)行設(shè)置。網(wǎng)頁(yè)設(shè)計(jì)中，如果要改變content和Border距離，在盒模型中可以采取與Margin相同的設(shè)置方法。普通用戶看到網(wǎng)頁(yè)展示的全部?jī)?nèi)容為盒子包含的content部分，內(nèi)容可以是包括網(wǎng)頁(yè)中塊元素、行內(nèi)元素、文本元素和圖像元素等中的任一元素[5]。使用DIV+CSS技術(shù)設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面，主要是通過(guò)CSS規(guī)則中的Position和Floatd屬性值快速進(jìn)行定位。其中，Relative、absolute、fixed、static是Position定位中的四個(gè)屬性。Relative是指以起點(diǎn)為參照可以在水平方向和垂直方向上進(jìn)行移動(dòng)，從而達(dá)到相對(duì)定位的目的。Absolute在頁(yè)面中的作用是進(jìn)行絕對(duì)定位，網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中使用絕對(duì)定位同樣需要通過(guò)positon屬性值的設(shè)置來(lái)完成。若要在頁(yè)面中固定元素，則需要使用具有懸浮作用的fixed。Static在相應(yīng)的四個(gè)屬性值中雖然具有靜態(tài)的意思，但實(shí)際上在網(wǎng)頁(yè)設(shè)計(jì)中并沒(méi)有定位的意思。通過(guò)對(duì)Position相應(yīng)屬性值的改變，可以變換DIV的布局樣式。Float主要作用是對(duì)浮動(dòng)屬性進(jìn)行設(shè)置，以起到網(wǎng)頁(yè)中對(duì)另外的DIV進(jìn)行定位的目的。
4盒模型布局設(shè)計(jì)
在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，頁(yè)面上任何元素均可以通過(guò)盒模型、浮動(dòng)、定位來(lái)控制它們的顯示方式?，F(xiàn)主要介紹居中布局和浮動(dòng)布局兩種方式。網(wǎng)頁(yè)中有眾多的布局方式，但總體來(lái)說(shuō)較為常用的一種布局方式就是居中布局[6]，即DIV+CSS學(xué)習(xí)的重點(diǎn)。
4.1DIV容器居中顯示方法
使用該方法在瀏覽器中使用整個(gè)網(wǎng)頁(yè)布局居中顯示，具體做法可以先后分為對(duì)DIV容器的寬度進(jìn)行定義，其次是對(duì)relative的屬性值進(jìn)行設(shè)置，left賦值50%，即可完成網(wǎng)頁(yè)中間容器左邊緣的定位。<styletype="text/css">.main{position:relative;left:50%;width:720px;height:400px;background-color:#FFF}</style></head><body><divclass="main"><imgsrc="2"/></div></body>運(yùn)行如圖2所示。如果想要在整個(gè)網(wǎng)頁(yè)呈居中顯示，可以通過(guò)一個(gè)負(fù)值的空白邊，把其寬度設(shè)置為整個(gè)容器寬帶的一半，再加上關(guān)鍵的“margin-left:-360px;”代碼，即可將整個(gè)網(wǎng)頁(yè)在瀏覽器中進(jìn)行居中顯示。.main{position:relative;left:50%;width:720px;margin-left:-360px;height:400px;background-color:#FFF}其運(yùn)行如圖3所示。同時(shí)在這里還應(yīng)注意當(dāng)在一個(gè)DIV容器中包含了其他DIV容器時(shí)，那么該DIV容器中具備了居中屬性的功能，如果設(shè)置其值為auto，則可將其中的div容器在該容器中居中顯示。
4.2DIV+CSS浮動(dòng)布局
作為網(wǎng)頁(yè)的布局方式浮動(dòng)布在使用中也不可小覷。各個(gè)容器之間的定位通過(guò)Float屬性值來(lái)控制，從而達(dá)到布局的目的，這就是浮動(dòng)布局的原理。方法有兩種：固定寬度布局、寬度自適應(yīng)布局[7]。4.2.1固定寬度布局。采用嵌套的方式進(jìn)行布局，在網(wǎng)頁(yè)中定義DIV容器作為網(wǎng)頁(yè)的主體，在主體DIV容器中嵌套兩個(gè)或多個(gè)容器，使用CSS規(guī)則進(jìn)行設(shè)置，可快速有效地達(dá)到容器的固定寬度的布局。如圖4所示。<body><divclass="box"><divclass="left">左側(cè)容器</div><divclass="right">右側(cè)容器</div></div></body>.left{float:left;height:400px;width:300px;border:1pxsolid#333;}.right{float:left;height:400px;width:300px;border:1pxsolid#333;4.2.2寬度自適應(yīng)布局。容器寬度的百分比值的設(shè)置可以控制寬度自適應(yīng)布局。因此，在寬度自適應(yīng)布局中，只需使用CSS規(guī)則設(shè)置容器寬度的百分比即可，如圖5所示。<body><divclass="box"><divclass="left">左側(cè)容器</div><divclass="right">右側(cè)容器</div></div></body>.left{float:left;height:400px;width:20%;border:1pxsolid#333;}.right{float:left;height:400px;width:70%;border:1pxsolid#333;}圖5寬度自適應(yīng)布局在這里需要注意的是當(dāng)在一個(gè)DIV容器中嵌套多個(gè)DIV容器時(shí)，如果要設(shè)置寬度自適應(yīng)大小，可固定其中的一個(gè)或多個(gè)DIV容器后，其他DIV容器則不設(shè)置其寬度即可使其自適應(yīng)內(nèi)容的大小。
5結(jié)束語(yǔ)
作為網(wǎng)頁(yè)標(biāo)準(zhǔn)之一的DIV+CSS技術(shù)，有著非常明顯的優(yōu)點(diǎn)，能夠使網(wǎng)頁(yè)瀏覽的速度大大得到提升，頁(yè)面代碼的篇幅大幅減少，使用的范圍更加廣泛，適用于大多數(shù)瀏覽器[8]。同時(shí)修改也更加方便，更改版面的時(shí)間也更加短暫，查找使用的搜索引擎功能也更加方便。DIV+CSS技術(shù)功能強(qiáng)大，其眾多功能中分離結(jié)構(gòu)與表現(xiàn)的功能，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者來(lái)說(shuō)閱讀起來(lái)非常方便，因?yàn)樗軌驅(qū)TML文檔代碼進(jìn)行大幅度的精簡(jiǎn)，僅保留了一部分的網(wǎng)頁(yè)頁(yè)面結(jié)構(gòu)代碼，同時(shí)網(wǎng)頁(yè)下載時(shí)的速度也得到了極大的提高。
參考文獻(xiàn)
[1]溫盛萍.DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用.信息化建設(shè),2015(10):53-55
[2]楊米娜.DIV+CSS技術(shù)在網(wǎng)頁(yè)布局中的應(yīng)用研究.電腦開(kāi)發(fā)與應(yīng)用,2012(04):64-66
[3]劉瑞新.網(wǎng)頁(yè)設(shè)計(jì)與制作教程.北京:機(jī)械工業(yè)出版,2013
[4]何福男.網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作項(xiàng)目教程.北京:電子工業(yè)出版社,2014
[5]王國(guó)慶.探究基于DIV+CSS技術(shù)的網(wǎng)頁(yè)設(shè)計(jì)優(yōu)化方法.信息與電腦(理論版),2016(04):140-141
[6]李澤響.基于購(gòu)物網(wǎng)站的交互設(shè)設(shè)框架研究[碩士學(xué)位論文].華中科技大學(xué),武漢,2011
[7]溫謙.網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目化教程.北京:人民郵電出版社,2013
[8]李森,孫敏,許娜,劉凡濤,等.網(wǎng)頁(yè)瀏覽任務(wù)的用戶情感測(cè)量模型研究.工業(yè)工程與管理,2013(01):106-110
作者:辛浩 李玲玲 單位:淮北職業(yè)技術(shù)學(xué)院計(jì)算機(jī)科學(xué)技術(shù)系
