本發(fā)明涉及網(wǎng)頁開發(fā)技術(shù)領(lǐng)域，具體涉及一種基于純HTML+CSS代碼創(chuàng)建網(wǎng)頁后臺自適應布局的方法。

背景技術(shù)：

在后臺網(wǎng)頁開發(fā)的過程中，經(jīng)常會用到“導航欄加內(nèi)容欄”的雙欄布局方式，而傳統(tǒng)的float浮動布局模式并不能滿足后臺網(wǎng)頁的寬度自適應需求；另外傳統(tǒng)的雙欄布局方式一般都是基于iframe框架來實現(xiàn)的。但是基于iframe框架有一些弊端，比如iframe框架會阻塞頁面加載，使得網(wǎng)頁變慢；iframe沒有獨立的連接池；創(chuàng)建iframe耗費的性能比其他DOM元素(包括style或script)多10-100倍。

技術(shù)實現(xiàn)要素：

本發(fā)明解決的技術(shù)問題在于提供一種基于純HTML+CSS代碼創(chuàng)建網(wǎng)頁后臺自適應布局的方法，替代了在后臺項目中使用float浮動布局固定寬度，以及使用iframe框架布局，使得網(wǎng)頁變慢，資源耗費過大的問題。

本發(fā)明解決上述技術(shù)問題的技術(shù)方案是：

包括如下步驟：

創(chuàng)建HTML元素界面布局文件和CSS樣式文件；

創(chuàng)建網(wǎng)頁主體部分，并且設置寬度、高度、絕對定位屬性；

在主體下創(chuàng)建網(wǎng)頁側(cè)邊導航欄，并且設置寬度、高度、絕對定位屬性；

在主體下創(chuàng)建網(wǎng)頁側(cè)邊內(nèi)容欄，并且設置高度、外邊距、絕對定位等屬性；

在界面布局文件中引入CSS文件。

本發(fā)明的有益效果是：避免使用float浮動布局，使得網(wǎng)頁可以進行自適應顯示屏寬度；避免使用iframe框架，避免網(wǎng)頁變慢，資源耗費過大的問題。

附圖說明

下面結(jié)合附圖對本發(fā)明進一步說明：

圖1為本發(fā)明布局圖；

圖2為本發(fā)明操作流程圖。

具體實施方式

見附圖1、2所示，本發(fā)明具體包括如下步驟：

第1步、創(chuàng)建HTML元素界面布局文件；

<div id＝"main">

<div id＝"side″></div>

<div id＝″content″></div>

</div>

第2步、創(chuàng)建CSS樣式文件；

第3步、創(chuàng)建網(wǎng)頁主體main部分，并且設置寬度、高度、絕對定位等屬性；

HTML部分：<div id＝″main"></div>

CSS部分：#main{width：100％；height：900px；position：relative；)

第4步、在main主體下創(chuàng)建網(wǎng)頁側(cè)欄side部分，并且設置寬度、高度、絕對定位等屬性；

HTML部分：<div id＝"side"></div>

CSS部分：#side{position：absolute；left：0；top：0；width：300px；height：100％；}

第5步、在main主體下創(chuàng)建網(wǎng)頁內(nèi)容欄content部分，并且設置高度、外邊距、絕對定位等屬性；

HTML部分：<div id＝"content"></div>

CSS部分：#content{position：relative；margin-left：300px；top：0；height：100％；}

第6步、在界面布局文件中引入CSS文件。