【彈性布局在web前端開(kāi)發(fā)中的應(yīng)用問(wèn)題探究9600字（論文）】

彈性布局在web前端開(kāi)發(fā)中的應(yīng)用問(wèn)題研究摘要：近幾年隨著互聯(lián)網(wǎng)技術(shù)的告訴發(fā)展，現(xiàn)在教育結(jié)合互聯(lián)網(wǎng)技術(shù)進(jìn)行融合，利用虛擬的網(wǎng)絡(luò)空間將教學(xué)的一些實(shí)驗(yàn)進(jìn)行模擬教學(xué)系統(tǒng)，新的教學(xué)時(shí)代也孕育而出，使學(xué)生動(dòng)手力不足的情況得到解決。因?yàn)閷?shí)驗(yàn)教學(xué)分很多種，所以每個(gè)實(shí)驗(yàn)教學(xué)都要有獨(dú)立的中心網(wǎng)站來(lái)對(duì)實(shí)驗(yàn)教學(xué)的信息進(jìn)行展示和實(shí)時(shí)更新，移動(dòng)互聯(lián)網(wǎng)技術(shù)在現(xiàn)代已經(jīng)相當(dāng)?shù)钠占傲?，?duì)中心門(mén)戶網(wǎng)站的需求和要求也就越來(lái)越多，需要越來(lái)越全面，中心網(wǎng)站也就必須對(duì)終端進(jìn)行不斷的開(kāi)發(fā)和更新。網(wǎng)頁(yè)的制作業(yè)務(wù)有很多種，我們對(duì)這些業(yè)務(wù)進(jìn)行了解和分析，發(fā)現(xiàn)在自適應(yīng)的動(dòng)態(tài)網(wǎng)頁(yè)制作在制作中工序繁多，重復(fù)性多，整個(gè)過(guò)程下來(lái)相當(dāng)復(fù)雜，作為網(wǎng)頁(yè)的開(kāi)發(fā)工作者，他們的工作量不但多而且重復(fù)性工作和重復(fù)性編碼多，導(dǎo)致制作出來(lái)的網(wǎng)頁(yè)效果質(zhì)量不佳等問(wèn)題。對(duì)目前社會(huì)對(duì)自適應(yīng)動(dòng)態(tài)網(wǎng)頁(yè)的需求越來(lái)越多，越來(lái)越大，所以就需要一些構(gòu)建工具來(lái)解決自適應(yīng)動(dòng)態(tài)網(wǎng)頁(yè)的需求，本文就是希望通過(guò)研究開(kāi)發(fā)一個(gè)多終端的動(dòng)態(tài)網(wǎng)站構(gòu)建工具對(duì)這個(gè)問(wèn)題進(jìn)行解決。前期開(kāi)發(fā)肯定需要相當(dāng)多的理論數(shù)據(jù)和實(shí)踐數(shù)據(jù)來(lái)給予支撐才能完成構(gòu)建工具，我們結(jié)合網(wǎng)頁(yè)構(gòu)建工具目前的情況和自適應(yīng)網(wǎng)頁(yè)技術(shù)的融合過(guò)程中出現(xiàn)的問(wèn)題進(jìn)行研究分析，目前我們使用功能分析方式對(duì)系統(tǒng)的功能模塊進(jìn)行區(qū)分劃分，并利用理論經(jīng)驗(yàn)和系統(tǒng)進(jìn)行結(jié)合，從而使網(wǎng)頁(yè)構(gòu)建工具的研發(fā)工作完成。此次開(kāi)發(fā)的網(wǎng)頁(yè)構(gòu)建工具加入了彈性盒子和調(diào)用接口等先進(jìn)技術(shù)功能都在屬性編輯器中進(jìn)行優(yōu)化，用戶對(duì)網(wǎng)頁(yè)多終端的操作和動(dòng)態(tài)信息的了解及展示越來(lái)越直觀可視化，這次構(gòu)建工具的開(kāi)發(fā)對(duì)傳統(tǒng)模式的網(wǎng)頁(yè)使用流程進(jìn)行了優(yōu)化，在自適應(yīng)動(dòng)態(tài)網(wǎng)頁(yè)制作和開(kāi)發(fā)上效率大大的提高。關(guān)鍵詞：網(wǎng)頁(yè)構(gòu)建工具動(dòng)態(tài)網(wǎng)頁(yè)多終端適配彈性盒子模型目錄TOC\o"1-3"\h\u摘要： 緒論1.1研究背景及意義移動(dòng)終端在如今科技信息發(fā)展迅速中，其優(yōu)勢(shì)快捷方便，讓人們很快的就接受和接納，成為人們生活和生產(chǎn)中的一部分，由于信息化的告訴發(fā)展，對(duì)信息技術(shù)的需求和不斷學(xué)習(xí)創(chuàng)新模式都跟著不斷變化，使越來(lái)越多的智能移動(dòng)技術(shù)和移動(dòng)設(shè)備得以普及和快速的發(fā)展。在智能移動(dòng)技能的快速發(fā)展下對(duì)相關(guān)技術(shù)的學(xué)習(xí)也是各學(xué)術(shù)界和商業(yè)界比較關(guān)注的熱點(diǎn)，之前的學(xué)習(xí)都是在個(gè)人計(jì)算機(jī)端口進(jìn)行學(xué)習(xí)，為了更好的更方便的學(xué)習(xí)相關(guān)技術(shù)，就需要從傳統(tǒng)的個(gè)人計(jì)算機(jī)端口移動(dòng)到可移動(dòng)設(shè)備端口，進(jìn)而使老師和學(xué)生在需要學(xué)習(xí)相關(guān)信息或者進(jìn)行瀏覽的時(shí)候就有多種的終端可以來(lái)完成。最剛開(kāi)始的門(mén)戶網(wǎng)站開(kāi)發(fā)的效率非常的低，首先需要專業(yè)的網(wǎng)頁(yè)開(kāi)發(fā)工作人員對(duì)靜態(tài)和動(dòng)態(tài)兩個(gè)模板頁(yè)面的研發(fā)，然后將研發(fā)的頁(yè)面上傳到服務(wù)器后再有專門(mén)的網(wǎng)頁(yè)管理人員對(duì)網(wǎng)頁(yè)的內(nèi)容進(jìn)行完善填充，使網(wǎng)頁(yè)內(nèi)容豐富，過(guò)程是相當(dāng)?shù)膹?fù)雜。網(wǎng)站的網(wǎng)頁(yè)內(nèi)容和風(fēng)格設(shè)定需要工作人員不斷的進(jìn)行編寫(xiě)代碼來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)的完成，在終端網(wǎng)頁(yè)中也需要開(kāi)發(fā)人員不斷的對(duì)樣式進(jìn)行調(diào)整，大量的重復(fù)而繁雜的工作和過(guò)程會(huì)使這些工作人員身心疲憊，專業(yè)人員的技能也有不同，都有自己的性格喜好和風(fēng)格，編碼也就會(huì)有不同，呈現(xiàn)出阿里的網(wǎng)頁(yè)效果也就有好有壞，對(duì)網(wǎng)頁(yè)的后期問(wèn)題處理和維護(hù)不便。綜上所述，研發(fā)出多終端動(dòng)態(tài)網(wǎng)站的構(gòu)建工具是相當(dāng)重要的也是相當(dāng)必要的，通過(guò)這項(xiàng)技術(shù)可以使傳統(tǒng)的網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程進(jìn)行優(yōu)化，越來(lái)越簡(jiǎn)單的操作將重復(fù)而繁重的編寫(xiě)代碼過(guò)程進(jìn)行優(yōu)化，這樣就可以使制作出來(lái)的網(wǎng)頁(yè)效果佳，就算是技能經(jīng)驗(yàn)不佳的開(kāi)發(fā)人員也可以操作作出不錯(cuò)的網(wǎng)頁(yè)，是開(kāi)發(fā)工作人員的工作量降低，開(kāi)發(fā)的效率得以提升。1.2國(guó)內(nèi)外研究現(xiàn)狀1.2.1國(guó)內(nèi)研究現(xiàn)狀剛開(kāi)始研發(fā)的多終端動(dòng)態(tài)網(wǎng)站的構(gòu)建工具的用意就是最有效便捷的能將此項(xiàng)技術(shù)應(yīng)用于動(dòng)態(tài)網(wǎng)站中，但是動(dòng)態(tài)網(wǎng)站的終端設(shè)備的產(chǎn)品種類是相當(dāng)雜亂，屏幕的大小不一樣，分辨率大小也不一樣，使在很多移動(dòng)設(shè)備在瀏覽網(wǎng)頁(yè)查詢資料信息的時(shí)候就會(huì)出現(xiàn)亂碼，網(wǎng)頁(yè)家長(zhǎng)不出來(lái)過(guò)慢，所需要的信息也不符合等問(wèn)題。我們對(duì)屏幕分辨率不同在終端上無(wú)法正常的顯示這一問(wèn)題進(jìn)行了解，解決的方法最開(kāi)始是兩種：一是使用縮略圖將視圖進(jìn)行縮大放小，用戶通過(guò)操作放大或者縮小的操作可以對(duì)網(wǎng)頁(yè)進(jìn)行瀏覽和訪問(wèn)，這樣就相當(dāng)?shù)穆闊┻@種方法后續(xù)也進(jìn)行過(guò)改良但是效果不是很好。第二種就是根據(jù)電腦屏幕的分辨率來(lái)對(duì)網(wǎng)站進(jìn)行調(diào)整，調(diào)整網(wǎng)站的版本來(lái)達(dá)到分辨率的要求，這樣就會(huì)出現(xiàn)新的問(wèn)題就是要多多個(gè)網(wǎng)站進(jìn)行維護(hù)，在多個(gè)網(wǎng)站不斷的維護(hù)中無(wú)形的加大了維護(hù)的成本。這兩種方法都是治標(biāo)不治本，且不太適用，用戶的需求也越來(lái)越多，國(guó)內(nèi)對(duì)此問(wèn)題也進(jìn)行了研究開(kāi)發(fā)，也就出現(xiàn)了各種各樣的在線可視化構(gòu)建工具，對(duì)這些問(wèn)題可以做到有效的解決也能對(duì)網(wǎng)頁(yè)進(jìn)行快速的自適應(yīng)，達(dá)到用戶對(duì)瀏覽網(wǎng)頁(yè)的需求更加方便。1.2.2自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展及現(xiàn)狀自適應(yīng)網(wǎng)頁(yè)的概念在2010年提出，就是要求利用終端設(shè)備來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行客自動(dòng)識(shí)別屏幕分辨率的技術(shù)，并可以對(duì)頁(yè)面設(shè)計(jì)進(jìn)行相應(yīng)的調(diào)整，還可以根據(jù)分辨率來(lái)改變圖片和網(wǎng)頁(yè)文件的布局，展示的方式也可以進(jìn)行適配展示，除了這個(gè)基本的功能，還要對(duì)自適應(yīng)網(wǎng)頁(yè)其它技術(shù)進(jìn)行開(kāi)發(fā)，主要的是布局的流動(dòng)性，圖片的靈活性以及各種信息的查詢功能。為用戶提供舒適的視覺(jué)上網(wǎng)感受是自適應(yīng)網(wǎng)頁(yè)的宗旨，網(wǎng)站的可用性和可訪問(wèn)性的要求高，企業(yè)要對(duì)對(duì)外宣傳和讓更多的人了解熟知，就需要利用網(wǎng)站來(lái)達(dá)到，國(guó)外的大部分中小企業(yè)都擁有自己的移動(dòng)優(yōu)化網(wǎng)站，可供用戶瀏覽和訪問(wèn)，更好的讓用戶了解該企業(yè)。目前國(guó)內(nèi)網(wǎng)頁(yè)自適應(yīng)技術(shù)的實(shí)現(xiàn)主要是靠流動(dòng)布局技術(shù)、媒體信息查詢技術(shù)和彈性盒子等模型技術(shù)進(jìn)行，我們對(duì)折幾個(gè)技術(shù)進(jìn)行說(shuō)明：流動(dòng)布局是基于固定的布局無(wú)法解決的問(wèn)題或者缺陷來(lái)進(jìn)行優(yōu)化的，我們所說(shuō)的固定的布局就是局限性大就相當(dāng)于在一個(gè)固定的容器內(nèi)，容器的大小沒(méi)沒(méi)做調(diào)整導(dǎo)致其它的元素尺寸的大小和未知也是沒(méi)法做調(diào)整的，優(yōu)勢(shì)是這種布局都是按部就班很容易達(dá)到，兩者之間的沖突也小，劣勢(shì)就是當(dāng)出現(xiàn)分辨率的需求時(shí)就會(huì)出現(xiàn)頁(yè)面的顯示過(guò)大過(guò)小，不完整或者出現(xiàn)很多白空間等諸多問(wèn)題，頁(yè)面不斷滾動(dòng)垂直，這種情況對(duì)用戶瀏覽網(wǎng)頁(yè)的時(shí)候就相當(dāng)?shù)牟槐?，網(wǎng)頁(yè)的整體平衡也沒(méi)有，更談不上美觀，帶給用戶的上網(wǎng)感受極差。流動(dòng)布局與固定布局的差異在于，流動(dòng)布局是以百分比來(lái)作為長(zhǎng)度單位，這樣就可以是網(wǎng)頁(yè)可以根據(jù)屏幕的大小分辨率的大小和空間來(lái)進(jìn)行自適應(yīng)調(diào)配。在以百分比來(lái)作為寬度還可以使網(wǎng)頁(yè)的位置也會(huì)根據(jù)顯示屏的大小可以自行變化，例如當(dāng)改頁(yè)面元素位置在一行內(nèi)放不下的時(shí)候就會(huì)自動(dòng)的轉(zhuǎn)到下一行，不會(huì)在同以頁(yè)面擠壓，流動(dòng)布局中的頁(yè)面元素不會(huì)使頁(yè)面的整體布局發(fā)生改變，會(huì)自行的根據(jù)屏幕大小分辨率而進(jìn)行縮放。媒體查詢模塊(MediaQuerise)是CSS3的一項(xiàng)關(guān)鍵技術(shù)，這項(xiàng)技術(shù)也是核心技術(shù)，它是自適應(yīng)網(wǎng)頁(yè)解決同一頁(yè)面中可以提供多視窗的主要技術(shù)，可以提供用戶根據(jù)設(shè)備的性能自己做選擇。媒體查詢功能是使用戶可以增加媒體查詢的一種表達(dá)方式，是指將屬性為樣式媒體的類型限定在不一樣的媒體類型基礎(chǔ)上，通過(guò)選擇核實(shí)的頁(yè)面布局來(lái)達(dá)到不同終端設(shè)備對(duì)屏幕尺寸不同的適應(yīng)，在不改變網(wǎng)頁(yè)的內(nèi)容下對(duì)網(wǎng)頁(yè)樣式的一種調(diào)整和修整，就可以達(dá)到改良用戶的上網(wǎng)體驗(yàn)感。可以讓網(wǎng)頁(yè)開(kāi)發(fā)工作者在自適應(yīng)網(wǎng)頁(yè)的設(shè)計(jì)中，只需要使用幾行代碼就可以對(duì)屏幕的寬度、比例、設(shè)備的特性作出判斷，網(wǎng)頁(yè)開(kāi)發(fā)者就可以快速的作出對(duì)應(yīng)的代碼編程，但是終端設(shè)備的不同，自適應(yīng)的需求也會(huì)眾多，所以一般最少編寫(xiě)三套樣式，才能保證穩(wěn)定性，這樣也就有重復(fù)性和浪費(fèi)人員的時(shí)間。彈性盒子模型是能夠?qū)⒕W(wǎng)頁(yè)的布局更加的靈活和自適應(yīng)調(diào)整的一種新的盒子模型。盒子模型是CSS的核心，它的屬性從里到外包括：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)。盒子模型主要是根據(jù)子元素的尺寸來(lái)決定父容器的尺寸大小，我們現(xiàn)在說(shuō)的彈性盒子則是由父容器的尺寸大小來(lái)為子元素的空間進(jìn)行合理的分配。彈性盒子模型還包括伸縮容器和伸縮項(xiàng)目，其中主軸方向和側(cè)軸方向是伸縮容器的兩個(gè)方向，伸縮項(xiàng)目就可以順著這兩個(gè)其中的一個(gè)方向來(lái)進(jìn)行布局。它在伸縮容器中可以完美的進(jìn)行排列布局，可以很好的對(duì)尺寸大小或者隨時(shí)產(chǎn)生的變化做處理來(lái)達(dá)到玩味的彈性布局。我們對(duì)以上三項(xiàng)技術(shù)做了對(duì)比，發(fā)現(xiàn)利用彈性盒子模型可以簡(jiǎn)單高效地實(shí)現(xiàn)網(wǎng)頁(yè)的自適應(yīng)。為了達(dá)到最佳的自適應(yīng)效果，筆者對(duì)元素的長(zhǎng)度單位進(jìn)行了調(diào)研，發(fā)現(xiàn)關(guān)于CSS長(zhǎng)度單位的選取，可以是px、%、em以及rem，這些都是長(zhǎng)度的計(jì)量單位，px是在CSS中定義的像素，利用PX設(shè)置的元素尺寸是固定不變的，并不會(huì)適應(yīng)瀏覽器分辨率的變化。％是元素相對(duì)于父元素尺寸的百分比，當(dāng)父元素的大小發(fā)生變化時(shí)，父元素包含的所有使用百分比的子元素都會(huì)進(jìn)行相應(yīng)的變化。剩下的兩個(gè)長(zhǎng)度單位ｅｍ和ｒｅｍ都是相對(duì)字體的長(zhǎng)度單位，不同的是ｅｍ是相對(duì)于當(dāng)前文本的尺寸，如果尺寸未設(shè)置則為相對(duì)瀏覽器的默認(rèn)字體尺寸［221而ｒｅｍ是相對(duì)于＜＾1111＞根元素的字體設(shè)置。但是ｅｍ有一個(gè)弊端，它會(huì)繼承父元素字體的大小，會(huì)出現(xiàn)元素大小層層疊加的連鎖反應(yīng)。因此在實(shí)現(xiàn)網(wǎng)頁(yè)自適應(yīng)的時(shí)候最好的選擇就是將彈性盒子模型和rem配合使用。1.3研究?jī)?nèi)容和方法1.3.1研究?jī)?nèi)容本文研究的對(duì)象是根據(jù)國(guó)內(nèi)目前用戶對(duì)瀏覽和訪問(wèn)網(wǎng)址所遇到的問(wèn)題做研發(fā)，需要相關(guān)學(xué)術(shù)者和網(wǎng)頁(yè)開(kāi)發(fā)工作者對(duì)網(wǎng)站開(kāi)發(fā)一個(gè)自適應(yīng)的動(dòng)態(tài)網(wǎng)站構(gòu)建工具，可以通過(guò)此技術(shù)項(xiàng)目讓頁(yè)面的制作和操作更簡(jiǎn)單容易上手，對(duì)頁(yè)面元素的增加、樣式的需求和修飾，對(duì)屏幕的大小分辨率的大小尺寸進(jìn)行彈性的自適應(yīng)調(diào)整設(shè)置，后臺(tái)也可以根據(jù)通過(guò)接口調(diào)用反饋過(guò)來(lái)的請(qǐng)求數(shù)據(jù)，來(lái)對(duì)網(wǎng)頁(yè)上的信息做展示。1.3.2研究方法在本研究我主要采用了文獻(xiàn)研究探討法、功能分析解決法和經(jīng)驗(yàn)累積總結(jié)的辦法進(jìn)行研究，具體研究情況如下說(shuō)明：(1)文獻(xiàn)研宄法文獻(xiàn)研究法是指通過(guò)科學(xué)的方法對(duì)想關(guān)資料的借鑒、甄別、整理的過(guò)程，然后進(jìn)行匯整進(jìn)而研究和事務(wù)的形成的認(rèn)知，大多數(shù)的科學(xué)技術(shù)研究項(xiàng)目都是通過(guò)以上方法相結(jié)合來(lái)進(jìn)行完成。除了對(duì)以納入的相關(guān)數(shù)據(jù)進(jìn)行借鑒，對(duì)我們所研究的課題網(wǎng)頁(yè)技術(shù)和自適應(yīng)構(gòu)建工具做專項(xiàng)的查詢和收集，除了國(guó)內(nèi)的相關(guān)資料數(shù)據(jù)文獻(xiàn)的參考對(duì)國(guó)外的發(fā)達(dá)中國(guó)家的相關(guān)技術(shù)知識(shí)也要進(jìn)行收集借鑒以作參考，取長(zhǎng)補(bǔ)短，希望通過(guò)本研究得出的理論能更好的對(duì)自適應(yīng)網(wǎng)頁(yè)的構(gòu)建工具開(kāi)發(fā)工程中起到幫助作用。(2)功能分析法功能分析法是社會(huì)利用科學(xué)的方式把單一的系統(tǒng)作為一個(gè)整體來(lái)看，然后對(duì)折整個(gè)系統(tǒng)是如何組成融合對(duì)其內(nèi)部進(jìn)行分析的一種方式。中心門(mén)戶網(wǎng)站是對(duì)學(xué)校的實(shí)驗(yàn)教學(xué)和教育工作有很大的重用。特別是在虛擬的實(shí)驗(yàn)教學(xué)，他可以很好的對(duì)實(shí)驗(yàn)教學(xué)進(jìn)行模擬仿真，這樣才能更好的服務(wù)于實(shí)驗(yàn)教學(xué)。為了數(shù)據(jù)的準(zhǔn)確就要求門(mén)戶網(wǎng)站的功能性全面也就需要現(xiàn)代的移動(dòng)互聯(lián)網(wǎng)設(shè)備的加入，讓學(xué)校的中心網(wǎng)站適用于更多的移動(dòng)終端設(shè)備，在保證適配的情況下就要構(gòu)建工具的加入穩(wěn)定自適應(yīng)網(wǎng)頁(yè)終端的運(yùn)行。(3)經(jīng)驗(yàn)總結(jié)法經(jīng)驗(yàn)總結(jié)法也就是對(duì)理論和實(shí)踐相結(jié)合后的情況進(jìn)行匯整，使后續(xù)成為參考的資料，該方法就是對(duì)發(fā)現(xiàn)的問(wèn)題進(jìn)行統(tǒng)計(jì)分析，針對(duì)發(fā)現(xiàn)的問(wèn)題進(jìn)行解決的方案制定。通過(guò)開(kāi)發(fā)部門(mén)、研發(fā)工作者等工作中發(fā)現(xiàn)的問(wèn)題進(jìn)行統(tǒng)計(jì)，還有在開(kāi)發(fā)和試行過(guò)程中出現(xiàn)的問(wèn)題進(jìn)行統(tǒng)計(jì)，最后再一起進(jìn)行研討進(jìn)行解決并將相關(guān)方式方法歸類，方便后續(xù)的工作和人員做參考。2彈性布局與Web前端開(kāi)發(fā)概念2.1彈性布局概念流式布局的缺點(diǎn)是使適配的工作量多，科學(xué)的百分比單位使用不便，這就讓讓其在頁(yè)面布局中不順暢，針對(duì)這個(gè)問(wèn)題有一種方式很好的解決此問(wèn)題，就是彈性布局，他可以很好的應(yīng)用于響應(yīng)式網(wǎng)頁(yè)布局，不會(huì)漂浮，也可以不用考慮盒子的規(guī)模，是一種非常靈性的布局方式。它的構(gòu)造就像是在一個(gè)大容器中房進(jìn)去幾個(gè)小容器，而他們是獨(dú)立的一體，方便設(shè)置，我們可以把這個(gè)容器盒子是由容器、子元素、主軸和交叉著而組成的。具體構(gòu)造圖如下圖4彈性盒子模型2.2Web前端開(kāi)發(fā)概念2.2.1HtmlHtml是一個(gè)應(yīng)用，是一個(gè)文本標(biāo)記語(yǔ)言，在通用的標(biāo)記語(yǔ)言下，而Html是在普通通用的標(biāo)記語(yǔ)言下的一種超文本應(yīng)用，可以將頁(yè)面終端非文本元素、圖片、視頻、網(wǎng)址等，網(wǎng)頁(yè)就是一個(gè)頁(yè)面結(jié)構(gòu)和標(biāo)簽元素的組成，其中加入一些腳本語(yǔ)言、其它公共的接口和組建來(lái)為網(wǎng)頁(yè)提供新鮮的血夜和皮膚，提供網(wǎng)頁(yè)的相關(guān)信息，進(jìn)而通過(guò)網(wǎng)頁(yè)中的內(nèi)容可以打開(kāi)更強(qiáng)大的網(wǎng)頁(yè)和需要的信息，圖片、音樂(lè)、鏈接等等。2.2.2CSScss即級(jí)聯(lián)樣式表，它是一種針對(duì)文件的計(jì)算機(jī)語(yǔ)言。Css3是css語(yǔ)言的最新版本，css通過(guò)很多的標(biāo)識(shí)符號(hào)，讓網(wǎng)頁(yè)的內(nèi)容和表面層做區(qū)分分離。比較傳統(tǒng)的以html做基礎(chǔ)設(shè)計(jì)出來(lái)的網(wǎng)頁(yè)樣式，css通過(guò)科學(xué)技術(shù)可以達(dá)到對(duì)html標(biāo)簽對(duì)象在網(wǎng)頁(yè)中的精準(zhǔn)掌控，包含標(biāo)簽的位置、標(biāo)簽的樣式和標(biāo)簽排版進(jìn)，css代碼對(duì)編寫(xiě)的格式是非常的嚴(yán)格的，初學(xué)者智能對(duì)其基本要領(lǐng)進(jìn)行領(lǐng)會(huì)及掌握，需要更深層的學(xué)習(xí)，在網(wǎng)頁(yè)瀏覽器中跨網(wǎng)站的兼容性甚至css通過(guò)進(jìn)行交互設(shè)計(jì)時(shí)，css又體現(xiàn)出其實(shí)施淵博的特點(diǎn)，css是目前在該網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域中最突出，使用最廣泛的應(yīng)用設(shè)計(jì)語(yǔ)言，比較靈活，可以對(duì)多種屬性進(jìn)行建議的代碼編寫(xiě)，操作簡(jiǎn)單。使用進(jìn)行網(wǎng)頁(yè)布局帶來(lái)的優(yōu)點(diǎn)包括：css代碼的代碼精簡(jiǎn)，是可以讓同一個(gè)代碼文件可以被多種前段使用或者引用，或者當(dāng)系統(tǒng)中的樣式需要更新或者調(diào)整設(shè)計(jì)的時(shí)候，使更改時(shí)需要的流程簡(jiǎn)單更便于統(tǒng)一做維護(hù)。該文件在瀏覽器頁(yè)面中方便緩存，可以對(duì)網(wǎng)頁(yè)的訪問(wèn)速度進(jìn)行提升，該文件一直是作為靜態(tài)資源來(lái)被前端所使用，目前很多瀏覽器都是具備這個(gè)功能，讓資源可以快速緩存，我們當(dāng)在瀏覽器中打開(kāi)一個(gè)頁(yè)面時(shí)，我們打開(kāi)第二頁(yè)面時(shí)，第一個(gè)頁(yè)面就會(huì)在靜態(tài)資源下進(jìn)行緩存，當(dāng)再次回到第一個(gè)頁(yè)面的時(shí)候我們就可以進(jìn)行快速的訪問(wèn)和瀏覽，不會(huì)受到加載緩慢頁(yè)面補(bǔ)流程的問(wèn)題，使用戶的瀏覽體驗(yàn)感提升。利用CSS布局的網(wǎng)站進(jìn)行搜索都會(huì)很簡(jiǎn)潔和精準(zhǔn)的進(jìn)行搜索，便于用戶對(duì)資料的抓取。2.2.3JavaScrScript目前瀏覽器客戶端最流行的腳本語(yǔ)言是JavaScrScript，是WEB開(kāi)發(fā)出的，它對(duì)事件的相應(yīng)和面向性的特性，一般都是給html網(wǎng)頁(yè)增加動(dòng)態(tài)功能，用來(lái)滿足用戶的各種操作做響應(yīng)。它是由科學(xué)技術(shù)人員開(kāi)發(fā)設(shè)計(jì)實(shí)現(xiàn)的，最主要的特點(diǎn)是動(dòng)態(tài)、弱類型、基于原型、內(nèi)置支持類，隨著可續(xù)技術(shù)的不斷發(fā)展創(chuàng)新，網(wǎng)頁(yè)前段技術(shù)也需要更多的功能進(jìn)行優(yōu)化，在非瀏覽器端如核心的服務(wù)器端在編程方面也是優(yōu)化，都充滿了新的活力。3彈性布局在web應(yīng)用前端開(kāi)發(fā)需求分析與實(shí)現(xiàn)3.1web應(yīng)用用戶系統(tǒng)前端用戶系統(tǒng)需求分析用戶系統(tǒng)作為web平臺(tái)的門(mén)戶，承載了大量豐富的網(wǎng)站信息；隨著系統(tǒng)需求的增大和功能的擴(kuò)展，前端頁(yè)面結(jié)構(gòu)DOM元素也急劇增加，頁(yè)面的整體高度翻倍，UI展示邏輯變得復(fù)雜，產(chǎn)生大量的靜態(tài)圖片文件和異步請(qǐng)求數(shù)據(jù)；致使頁(yè)面加載過(guò)程中，瀏覽器需要渲染大量的信息與文件，因此頁(yè)面的加載速度成為用戶體驗(yàn)的瓶頸問(wèn)題。而當(dāng)前加載資源通常采用在頁(yè)面加載之初集中請(qǐng)求的方式，在網(wǎng)絡(luò)環(huán)境不理想的情況下，一站式的請(qǐng)求方式己經(jīng)不能夠保證網(wǎng)頁(yè)的首屏?xí)r間，如何優(yōu)化門(mén)戶平臺(tái)的頁(yè)面加載、縮短渲染時(shí)間，是當(dāng)前用戶系統(tǒng)應(yīng)用方面的首要需求。另一方面，平臺(tái)普遍采用服務(wù)端語(yǔ)言注入后端模板的方式實(shí)現(xiàn)用戶個(gè)性化信息的渲染，此種渲染方式雖然能夠滿足業(yè)務(wù)需求，但是在開(kāi)發(fā)過(guò)程中會(huì)使前后端職責(zé)分流不清；通常前后端并行開(kāi)發(fā)，最后對(duì)接數(shù)據(jù)端口才是合理高效的開(kāi)發(fā)流程，當(dāng)前前后端語(yǔ)言耦合的情況顯然是低效的；雖然目前大部分的平臺(tái)都使用RESTFUL接口的方式來(lái)解決多語(yǔ)言開(kāi)發(fā)的問(wèn)題，但是用戶的信息渲染依然依賴于服務(wù)器語(yǔ)言渲染。因此，在當(dāng)前用戶平臺(tái)需求日益復(fù)雜的情況，使用當(dāng)前的開(kāi)發(fā)模式已經(jīng)顯得捉襟見(jiàn)肘。綜上所述，當(dāng)前用戶系統(tǒng)的開(kāi)發(fā)模式，不管是應(yīng)用的技術(shù)還是開(kāi)發(fā)的進(jìn)度上均不能滿足需求。因此針對(duì)以上問(wèn)題，用戶系統(tǒng)的前端框架應(yīng)該滿足以Ｋ耍求：在信息渲染方面，所有的信息加載(用戶信息，客觀信息)都應(yīng)由前端負(fù)責(zé)渲染；在頁(yè)面加載方面，避免所有資源的一次性請(qǐng)求，實(shí)現(xiàn)資源的按需請(qǐng)求，避免在較差的網(wǎng)絡(luò)環(huán)境下資源加載錯(cuò)誤。下面針對(duì)以上兩方面進(jìn)行詳細(xì)分析。3.2web應(yīng)用用戶系統(tǒng)前端用戶信息渲染機(jī)制需求與分析渲染是將后臺(tái)傳回?cái)?shù)據(jù)進(jìn)行模板填充，模板按照定義的樣式將數(shù)據(jù)展示出來(lái)，即數(shù)據(jù)與DOM結(jié)合的過(guò)程。目前普遍使用的渲染方式主要包括以下兩種：服務(wù)器渲染：瀏覽器向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器處理請(qǐng)求后，對(duì)數(shù)據(jù)庫(kù)讀取到的數(shù)據(jù)進(jìn)行處理，將其寫(xiě)入前端編寫(xiě)的模板中，從而生成特定的文件，將此文件傳回給瀏覽器負(fù)責(zé)加載。這里出現(xiàn)的前端編寫(xiě)的模板是指后端語(yǔ)言模板如JSP、PHP等，雖然是在前端編寫(xiě)，實(shí)際上還是后端語(yǔ)言。這種模式帶來(lái)的主要問(wèn)題——不能夠?qū)崿F(xiàn)局部更新；用戶即使產(chǎn)生細(xì)微的UI變動(dòng)，后臺(tái)都要重新渲染整個(gè)頁(yè)面，再將其發(fā)送給瀏覽器，導(dǎo)致產(chǎn)生了不必要的HPPT請(qǐng)求，如果頁(yè)面大部分是靜態(tài)部分，這種方式無(wú)疑是低效的。瀏覽器渲染：首先瀏覽器向后臺(tái)請(qǐng)求HTML頁(yè)面，服務(wù)器返回模板文件，接著瀏覽器采用異步請(qǐng)求的方式向服務(wù)端發(fā)送數(shù)據(jù)請(qǐng)求，最后將返回的數(shù)據(jù)填充到前端HTML模板中。這種方式利于兩端的隔離開(kāi)發(fā)，前端控制模板，后端開(kāi)發(fā)API，但這種方式會(huì)出現(xiàn)一個(gè)很嚴(yán)峻的問(wèn)題，那就是跨域；雖然目前針對(duì)不同跨域問(wèn)題有很多解決方案，但是在平臺(tái)的開(kāi)發(fā)測(cè)試域名與線上域名往往不同，需要開(kāi)發(fā)者在上線是更改跨域解決方案，以此給開(kāi)發(fā)上線帶來(lái)很多不便；因此，從根本上解決跨域問(wèn)題才是應(yīng)對(duì)之道?；谝陨系姆治?，服務(wù)器渲染沒(méi)有跨域問(wèn)題，但是前后端耦合太大，渲染效率低下，而采用瀏覽器渲染方式渲染效率有所提升，但是不能夠適應(yīng)多種域名下的部署。結(jié)合以上兩種渲染各自特點(diǎn)，本課題提出基于Node.js的大前端渲染方式。3.3web應(yīng)用后臺(tái)管理系統(tǒng)前端開(kāi)發(fā)需求分析后臺(tái)管理系統(tǒng)具有高頻率的數(shù)據(jù)CURD操作、低頻率的DOM操作與頻繁的監(jiān)聽(tīng)回調(diào)等特點(diǎn)。因此在實(shí)現(xiàn)過(guò)程中不需要將精力放在UI渲染與優(yōu)化過(guò)程中，轉(zhuǎn)而應(yīng)該更加注重如何加強(qiáng)數(shù)據(jù)合理的流動(dòng)，避免因?yàn)榇a堆積而給整個(gè)平臺(tái)帶來(lái)的擴(kuò)展性差、前后端并行效率低等問(wèn)題。服務(wù)器渲染：瀏覽器向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器處理請(qǐng)求后，對(duì)數(shù)據(jù)庫(kù)讀取到的數(shù)據(jù)進(jìn)行處理，將其寫(xiě)入前端編寫(xiě)的模板中，從而生成特定的文件，將此文件傳回給瀏覽器，瀏覽器負(fù)責(zé)加載。這里出現(xiàn)的前端編寫(xiě)的模板是指后端語(yǔ)言模板如JSP、PHP等，雖然是在前端編寫(xiě)，實(shí)際上還是后端語(yǔ)言。這種模式帶來(lái)的主要問(wèn)題——不能夠?qū)崿F(xiàn)局部更新；用戶即使產(chǎn)生細(xì)微的UI變動(dòng)，后臺(tái)都要重新渲染整個(gè)頁(yè)面，再將其發(fā)送給瀏覽器，導(dǎo)致產(chǎn)生了不必要的HTML請(qǐng)求，如果頁(yè)面大部分是靜態(tài)部分，這種方式無(wú)疑是低效的。3.4彈性布局在Web應(yīng)用前端開(kāi)發(fā)需求設(shè)計(jì)實(shí)現(xiàn)3.4.1用戶系統(tǒng)總體設(shè)計(jì)原則對(duì)用戶系統(tǒng)主要從兩個(gè)維度進(jìn)行框架的設(shè)計(jì)一頁(yè)面加載和消息渲染；在頁(yè)面結(jié)構(gòu)上，將前端文檔按照主屏和次屏的思路進(jìn)行分步加載，采用主屏Node.渲染，次屏動(dòng)態(tài)請(qǐng)求局部刷新的通信方式；優(yōu)化靜態(tài)文件，設(shè)計(jì)數(shù)據(jù)災(zāi)備方案；最終達(dá)到良好的頁(yè)面加載效果，減少渲染時(shí)間。在前端層次結(jié)構(gòu)上，針對(duì)用戶信息引起前后端的問(wèn)題，作為瀏覽器和服務(wù)器的中間層Node.js，結(jié)合MongoDB數(shù)據(jù)庫(kù)資料來(lái)對(duì)用戶信息進(jìn)行的染部分，目的是實(shí)現(xiàn)前后端分離，使得前后端可以協(xié)同開(kāi)發(fā)，方便不同環(huán)境的開(kāi)發(fā)測(cè)試和上線。3.4.2用戶系統(tǒng)需求綜述用戶系統(tǒng)作為Web平臺(tái)的門(mén)戶，承載了大量豐富的網(wǎng)站信息；隨著系統(tǒng)需求的增大和功能的擴(kuò)展，前端頁(yè)面結(jié)DOM元素也急劇增加，頁(yè)面的整體高度翻倍，UI展示邏輯變得復(fù)雜，產(chǎn)生大量的靜態(tài)圖片文件和異步請(qǐng)求數(shù)據(jù)；致使頁(yè)面加載過(guò)程中，瀏覽器需要渲染大量的信息與文件，因此頁(yè)面的加載速度成為用戶體驗(yàn)的瓶頸問(wèn)題。而當(dāng)前加載資源通常采用在頁(yè)面加載之初集中請(qǐng)求的方式，在網(wǎng)絡(luò)環(huán)境不理想的情況下，一站式的請(qǐng)求方式己經(jīng)不能夠保證網(wǎng)頁(yè)的首屏?xí)r間，如何優(yōu)化門(mén)戶平臺(tái)的頁(yè)面加載、縮短渲染時(shí)間，是當(dāng)前用戶系統(tǒng)應(yīng)用方面的首要需求。3.4.3Web加載策略需求與分析在Web應(yīng)用前端開(kāi)發(fā)需求分，彈性布局可以根據(jù)媒體查詢達(dá)到需求，具體準(zhǔn)備工作，我們要達(dá)到不同的頁(yè)面風(fēng)格進(jìn)行顯示，就要對(duì)視扣的寬度，設(shè)備的方向等問(wèn)題考慮，網(wǎng)頁(yè)工作者需要對(duì)不同的移動(dòng)終端設(shè)備的需求來(lái)進(jìn)行編程和布局，就可以讓用戶在使用移動(dòng)終端瀏覽網(wǎng)頁(yè)的時(shí)候都呈現(xiàn)的是最舒適合理的頁(yè)面。下面筆者利用媒體查詢?cè)诓煌K端設(shè)備中實(shí)現(xiàn)不同布局技術(shù)的效果，分別針對(duì)PC、平板和手機(jī)端進(jìn)行樣式布局效果。筆者將設(shè)定頁(yè)面的內(nèi)容分為3個(gè)模塊，該頁(yè)面的HTML結(jié)構(gòu)部分代碼如下：<divclass=”wrap”><divclass=?boxbox1?>A</div><divclass=?boxbox2?>B</div><divclass=?boxbox3?>C</div></div>對(duì)于PC端來(lái)說(shuō)，屏幕分辨率一般比較大，所以筆者設(shè)計(jì)為3列的排版布局結(jié)構(gòu)，具體如圖1所示。實(shí)現(xiàn)的關(guān)鍵代碼如下：/*pc>768px*/.wrap{width:90%;margin:10pxauto;}.wrap>.box{width:30%;height:200px;margin:1%;float:left;}圖1PC端三列結(jié)構(gòu)布局針對(duì)平板端來(lái)說(shuō)，屏幕的分辨率一般沒(méi)有PC端高，所以使用3列排版布局可能會(huì)顯得比較緊湊，在這里調(diào)整為兩列排版布局結(jié)構(gòu)，具體如圖2所示。實(shí)現(xiàn)的關(guān)鍵代碼如下：/*平板*/@mediascreenand(max-width:768px){.wrap{width:100%;}.wrap>.box{width:48%;}.wrap>.box3{width:98%;}}圖2平板端兩列結(jié)構(gòu)布局在手機(jī)端中，屏幕分辨率一般不大，所以看到的布局在移動(dòng)端的頁(yè)面中都是呈一列的結(jié)構(gòu)顯示出來(lái)。結(jié)論彈性布局在Web前端設(shè)計(jì)技術(shù)在跟著互聯(lián)網(wǎng)告訴的發(fā)展，利用先進(jìn)的高科技技術(shù)代替了傳統(tǒng)的移動(dòng)端和個(gè)人電腦端的網(wǎng)頁(yè)制作，彈性布局是目前在瀏覽器互聯(lián)網(wǎng)時(shí)代前端問(wèn)題的最有效的解決方法，對(duì)于前端在自適應(yīng)網(wǎng)頁(yè)面還有需要?jiǎng)?chuàng)新的的地方，這也是我們要繼續(xù)努力奮斗的方向和目標(biāo)。目前彈性盒子對(duì)響應(yīng)式網(wǎng)頁(yè)布局給人們已經(jīng)解決了人們工作和生活中的所需，讓人們?cè)诓煌囊苿?dòng)終端可以輕松的瀏覽和訪問(wèn)，這種比較科學(xué)的布局方式對(duì)傳統(tǒng)的瀏覽器還是無(wú)法做到兼容，就需要我們的開(kāi)發(fā)者繼續(xù)努力，相信彈性布局在以后會(huì)越來(lái)越優(yōu)化，越來(lái)越好的服務(wù)于人們。參考文獻(xiàn)[1]王睿,楊帆,陶健,馮濤.1+X證書(shū)制度下課證融通教學(xué)資源建設(shè)的研究——以Web前端開(kāi)發(fā)職業(yè)技能等級(jí)證書(shū)為例[J].工業(yè)和信息化教育,2022(04):9-14.[2]高廣銀,儲(chǔ)久良,成艷,宦臣.線上線下混合式一流課程建設(shè)研究與實(shí)踐——以“Web前端開(kāi)發(fā)技術(shù)”課程為例[J].計(jì)算機(jī)時(shí)代,2022(04):77-79.DOI:10.16644/33-1094/tp.2022.04.021.[3]HonghuaWang.DiscussionandresearchonideologicalpoliticsofWebFront-endDevelopmentTechnology[J].AdvancesinEducationalTechnologyandPsychology,2022,6(4).[4]黃濤.基于工具的移動(dòng)應(yīng)用代碼缺陷靜態(tài)檢測(cè)研究[J].武漢工程職業(yè)技術(shù)學(xué)院學(xué)報(bào),2022,34(01):22-26.[5]周公平.基于jQuery框架的Web前端開(kāi)發(fā)設(shè)計(jì)方法研究[J].信息與電腦(理論版),2022,34(05):128-130.[6]郝佳睿.“1+X”證書(shū)制度下Web前端人才培養(yǎng)模式的研究[J].科技視界,2022(06):130-132.DOI:10.19694/ki.issn2095-2457.2022.06.41.[7]鄧麗君.“1+X”證書(shū)引領(lǐng)下《Web前端開(kāi)發(fā)》教學(xué)的實(shí)踐研究[J].電腦知識(shí)與技術(shù),2022,18(06):134-135+138.DOI:10.14/ki.ckt.2022.0371.[8]郝風(fēng)平.芻議Web前端開(kāi)發(fā)技術(shù)與優(yōu)化工作[J].電子元器件與信息技術(shù),2022,6(02):37-38+41.DOI:10.19772/ki.2096-4455.2022.2.015.[9]秦源.基于HTML5技術(shù)的移動(dòng)Web前端設(shè)計(jì)與開(kāi)發(fā)[J].電子元器件與信息技術(shù),2022,6(02):193-195.DOI:10.19772/ki.2096-4455.2022.2.074.[10]張崇明,高屹.基于CiteSpace的前端開(kāi)發(fā)研究熱點(diǎn)與趨勢(shì)[J].西藏科技,2022(02):69-74.[11]周公平.Web前端開(kāi)發(fā)技術(shù)在運(yùn)維管理系統(tǒng)中的應(yīng)用研究[J].信息與電腦(理論版),2022,34(03):192-194+199.[12]何芳.“1+X”證書(shū)制度下書(shū)證融通研究實(shí)施——以軟件技術(shù)專業(yè)《Web前端開(kāi)發(fā)》證書(shū)為例[J].電腦與電信,2022(Z1):28-31.DOI:10.15966/ki.dnydx.2022.z1.001.[13]張遠(yuǎn)平,郭偉