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