盒模型在網(wǎng)頁設(shè)計中的應用研究,網(wǎng)頁設(shè)計論文

盒模型在網(wǎng)頁設(shè)計中的應用研究,網(wǎng)頁設(shè)計論文內(nèi)容摘要：本文將盒模型技術(shù)應用于布局網(wǎng)頁的頁面，摒棄了傳統(tǒng)表格布局網(wǎng)頁的方式并精簡了網(wǎng)頁代碼，使網(wǎng)頁布局格式愈加趨于標準化。實踐結(jié)果表示清楚，在網(wǎng)頁設(shè)計中采用盒模型技術(shù)DIV標簽位置愈加靈敏，網(wǎng)頁外觀修飾效果愈加出眾，對網(wǎng)頁頁面元素排版精到準確度能夠到達像素級。本文關(guān)鍵詞語：盒模型;網(wǎng)頁設(shè)計;CSS;應用研究;Abstract：Thispaperappliestheboxmodeltechnologytothelayoutofwebpages,abandonsthetraditionalwayoftablelayoutofwebpages,simplifiesthewebpagecode,andmakesthewebpagelayoutformatmorestandardized.ThepracticalresultsshowthattheboxmodeltechnologyusedinwebpagedesignmakesthepositionofDIVtagsmoreflexible,theeffectofwebpageappearancemodificationmoreoutstanding,andtheaccuracyofwebpageelementtypesettingcanreachthepixellevel.Keyword：BoxModel;WebDesign;CSS;ApplicationResearch;1引言隨著社會的發(fā)展與進步，越來越多的行業(yè)開場制作個性化的網(wǎng)頁，以提高其宣傳力和影響力。為了愈加靈敏地對網(wǎng)頁進行布局，實現(xiàn)頁面的外觀修飾，使設(shè)計出的頁面構(gòu)造愈加清楚明晰，更有利于搜索，方便重構(gòu)和維護頁面，盒模型技術(shù)的使用必不可少。盒模型原理就是將層疊樣式表中的定位技術(shù)〔DIV〕標簽元素當作是有一點空間的盒子。采用盒模型技術(shù)來布局網(wǎng)頁頁面的主要方式方法就是在超文本標記語言〔〕頁面文檔中先進行DIV標簽對象的插入，再使用層疊樣式表〔CascadingStyleSheet,CSS〕樣式規(guī)則對插入的的DIV標簽對象進行定位和樣式設(shè)置，進而實現(xiàn)網(wǎng)頁元素的布局和定位[1]。在網(wǎng)頁中使用多個DIV標簽進行分隔，加上CSS的定位和修飾，完全具體表現(xiàn)出出了網(wǎng)頁設(shè)計中DIV+CSS盒模型布局的基本原理。2盒模型技術(shù)在使用盒模型技術(shù)設(shè)計網(wǎng)頁頁面時，應首先對DIV和CSS的使用非常熟練。華而不實DIV負責構(gòu)造布局，CSS負責樣式的美化。使用DIV+CSS盒模型技術(shù)能夠準確和快速地定位網(wǎng)頁頁面中的各個元素[2]，并對各種元素的各種屬性進行相應的設(shè)置，進而到達整個頁面的布局和外觀的修飾。2.1DIV技術(shù)DIV技術(shù)不僅能夠分割網(wǎng)頁頁面，而且網(wǎng)頁內(nèi)容背景和總體構(gòu)造也要依靠于作為標簽元素的p技術(shù)，進而到達網(wǎng)頁內(nèi)容構(gòu)造化、模塊化。DIV技術(shù)的使用標志著網(wǎng)頁設(shè)計技術(shù)從傳統(tǒng)的二維空間延伸至先進的三維空間。有了DIV，在網(wǎng)頁中能夠輕松實現(xiàn)圖片和文本的各種運動效果[3]。DIV作為標記語言中的格式標記，總是成對的出現(xiàn)，即出現(xiàn)的格式為p/p。該標記對的用法和p/p標記極為類似，包含有align對齊屬性。p/p標簽元素也稱為容器，其他的段落標記和文本標記等對象都能夠放置于該標記對中[4]。2.2CSS技術(shù)CSS技術(shù)在網(wǎng)頁設(shè)計中的主要作用就是定義各種網(wǎng)頁標簽的樣式屬性。使用CSS技術(shù)能夠使網(wǎng)頁愈加的標準化和構(gòu)造化，能夠使樣式和代碼分離開，使得整個網(wǎng)頁代碼愈加清楚明晰。因而它在網(wǎng)頁設(shè)計領(lǐng)域備受推崇。網(wǎng)頁設(shè)計中擴展名為.css文件。能夠把它當做是一種純文本文件來對待。其語法構(gòu)造格式為selector{property:value}。同時根據(jù)CSS樣式規(guī)則的選擇符進行分類，可將CSS樣式分為類樣式、ID屬性標簽、標簽、復合內(nèi)容4類。的頭部包含所有類型的CSS樣式，包含在head/head標記代碼之中，開場代碼標記為style，結(jié)束的代碼標記為/style。3盒模型網(wǎng)頁設(shè)計在DIV+CSS網(wǎng)頁設(shè)計技術(shù)中，盒模型是一個重要的概念，其構(gòu)造圖如此圖1所示。盒模型通常能夠理解為把DIV元素當做一個有點空間的盒子來看待。盒子通常都有外層和里層，在這里Margin就是盒子的最外層；與之相對應的最里層便是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]。圖1盒模型構(gòu)造圖使用DIV+CSS技術(shù)設(shè)計網(wǎng)頁頁面，主要是通過CSS規(guī)則中的Position和Floatd屬性值快速進行定位。華而不實，Relative、absolute、fixed、static是Position定位中的四個屬性。Relative是指以起點為參照能夠在水平方向和垂直方向上進行移動，進而到達相對定位的目的。Absolute在頁面中的作用是進行絕對定位，網(wǎng)頁設(shè)計經(jīng)過中使用絕對定位同樣需要通過positon屬性值的設(shè)置來完成。若要在頁面中固定元素，則需要使用具有懸浮作用的fixed。Static在相應的四個屬性值中固然具有靜態(tài)的意思，但實際上在網(wǎng)頁設(shè)計中并沒有定位的意思。通過對Position相應屬性值的改變，能夠變換DIV的布局樣式。Float主要作用是對浮動屬性進行設(shè)置，以起到網(wǎng)頁中對另外的DIV進行定位的目的。4盒模型布局設(shè)計在網(wǎng)頁設(shè)計經(jīng)過中，頁面上任何元素均能夠通過盒模型、浮動、定位來控制它們的顯示方式?，F(xiàn)主要介紹居中布局和浮動布局兩種方式。網(wǎng)頁中有諸多的布局方式，但總體來講較為常用的一種布局方式就是居中布局[6]，即DIV+CSS學習的重點。4.1DIV容器居中顯示方式方法使用該方式方法在閱讀器中使用整個網(wǎng)頁布局居中顯示，詳細做法能夠先后分為對DIV容器的寬度進行定義，其次是對relative的屬性值進行設(shè)置，left賦值50%，即可完成網(wǎng)頁中間容器左邊緣的定位。運行如此圖2所示。圖2網(wǎng)頁中間容器左邊緣定位圖假如想要在整個網(wǎng)頁呈居中顯示，能夠通過一個負值的空白邊，把其寬度設(shè)置為整個容器寬帶的一半，再加上關(guān)鍵的margin-left:-360px;代碼，即可將整個網(wǎng)頁在閱讀器中進行居中顯示。其運行如此圖3所示。同時在這里還應注意當在一個DIV容器中包含了其他DIV容器時，那么該DIV容器中具備了居中屬性的功能，假如設(shè)置其值為auto，則可將華而不實的p容器在該容器中居中顯示。圖3閱讀器中網(wǎng)頁居中顯示4.2DIV+CSS浮動布局作為網(wǎng)頁的布局方式浮動布在使用中也不可小覷。各個容器之間的定位通過Float屬性值來控制，進而到達布局的目的，這就是浮動布局的原理。方式方法有兩種：固定寬度布局、寬度自適應布局[7]。4.2.1固定寬度布局采用嵌套的方式進行布局，在網(wǎng)頁中定義DIV容器作為網(wǎng)頁的主體，在主體DIV容器中嵌套兩個或多個容器，使用CSS規(guī)則進行設(shè)置，可快速有效地到達容器的固定寬度的布局。如此圖4所示。圖4容器固定寬度布局4.2.2寬度自適應布局容器寬度的百分比值的設(shè)置能夠控制寬度自適應布局。因而，在寬度自適應布局中，只需使用CSS規(guī)則設(shè)置容器寬度的百分比即可，如此圖5所示。圖5寬度自適應布局在這里需要注意的是當在一個DIV容器中嵌套多個DIV容器時，假如要設(shè)置寬度自適應大小，可固定華而不實的一個或多個DIV容器后，其他DIV容器則不設(shè)置其寬度即可使其自適應內(nèi)容的大小。5結(jié)束語作為網(wǎng)頁標準之一的DIV+CSS技術(shù)，有著非常明顯的優(yōu)點，能夠使網(wǎng)頁閱讀的速度大大得到提升，頁面代碼的篇幅大幅減少，使用的范圍愈加廣泛，適用于大多數(shù)閱讀器[8]。同時修改也愈加方便，更改版面的時間也愈加短暫，查找使用的搜索引擎功能也愈加方便。DIV+CSS技術(shù)功能強大，其諸多功能中分離構(gòu)造與表現(xiàn)的功能，對于網(wǎng)頁設(shè)計初學者來講閱讀起來非常方便，由于它能夠?qū)ξ臋n代碼進行大幅度的精簡，僅保存了一部分的網(wǎng)頁頁面構(gòu)造代碼，同時網(wǎng)頁下載時的速度也得到了極大的提高。以下為參考文獻[1]溫盛萍.DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計中的應用信息化建設(shè),2021(10):53-55[2]楊米娜.DIV+CSS技術(shù)在網(wǎng)頁布局中的應用研究電腦開發(fā)與應用,2020(04):64-66[3]劉瑞新.網(wǎng)頁設(shè)計與制作教程.北京:機械工業(yè)出版,2020[4]何福男.網(wǎng)站設(shè)計與網(wǎng)頁制作項目教程北京:電子工業(yè)出