導(dǎo)語：了解完百度mip之后，很多站長不知道該怎么使用，如何去創(chuàng)建mip頁面呢？創(chuàng)建一個基本的MIP HTML頁面包括五步，分別是創(chuàng)建基礎(chǔ)MIP HTML頁面、引入圖片、調(diào)整樣式和布局、預(yù)覽和驗證。下面我們詳細(xì)的介紹一下具體的步驟。

首先是創(chuàng)建基礎(chǔ)的MIP HTML頁面

下面這段代碼是一個基礎(chǔ)的 MIP HTML 的 demo 。將它復(fù)制到html文件中，并根據(jù)規(guī)范添加你想要的元素。

需要我們注意的是，頁面中必須加載css文件https://mipcache.bdstatic.com/static/mipmain-v0.0.1.css 和 js文件https://mipcache.bdstatic.com/static/mipmain-v0.0.1.js，其中v0.0.1是版本號，功能升級之后版本號也會改變，開發(fā)中可以根據(jù)文檔中的說明進(jìn)行加載。

第二步：引入圖片

html標(biāo)簽中圖片的標(biāo)簽是<img>，而百度MIP HTML中圖片標(biāo)簽使用的是組件<mip-img>

第三步：改變頁面的樣式

使用MIP HTML 時，頁面樣式是可以根據(jù)自己的需求自定義的，具體方法如下：

（1）改變樣式

MIP HTML 是web頁面，頁面中任何元素的樣式都可以通過普通的css屬性來設(shè)計。使用時，在頁面的head部分引入css樣式，在css中，可以通過類或者元素選擇器進(jìn)行選擇要修改樣式的dom元素。例如：

<style mip-custom>

   /* any custom style goes here */

   body {

       background-color: white;

   }

   mip-img {

       background-color: gray;

       border: 1px solid black;

   }

</style>

需要我們注意的是，每個MIP HTML頁面只能嵌入一個css樣式，且<style> 標(biāo)簽需要標(biāo)記自定義樣式，即寫成 <style mip-custo>。

（2）控件的布局

出于對性能的考慮，MIP頁面暫時不支持第三方通過css來元素進(jìn)行布局。

第四步：預(yù)覽和驗證

為了確保所開發(fā)的mip頁面是有效的，在頁面開發(fā)過程中校驗規(guī)則是需要非常嚴(yán)格的。

開發(fā)完成之后需要預(yù)覽，預(yù)覽的方式可以按照普通的HTML站點預(yù)覽方式，有以下兩種方式可以選擇：

（1）直接在瀏覽器中打開（由于XML Http Requests失敗可能會導(dǎo)致某些元素預(yù)覽失?。?

（2）在本地部署一個服務(wù)，如apache，nginx等

在開發(fā)過程中細(xì)節(jié)方面出現(xiàn)小差錯是難免的，可以通過以下方式進(jìn)行mip頁面的驗證：

1） 在瀏覽器中打開頁面

2）打開控制臺， 驗證錯誤

到了這一步就算是完成了頁面的本地測試，而且錯誤也被修復(fù)了，也就是說你的第一個MIP頁面已經(jīng)準(zhǔn)備好了。

河南億恩科技股份有限公司(mszdt.com)始創(chuàng)于2000年，專注服務(wù)器托管租用，是國家工信部認(rèn)定的綜合電信服務(wù)運營商。億恩為近五十萬的用戶提供服務(wù)器托管、服務(wù)器租用、機(jī)柜租用、云服務(wù)器、網(wǎng)站建設(shè)、網(wǎng)站托管等網(wǎng)絡(luò)基礎(chǔ)服務(wù)，另有網(wǎng)總管、名片俠網(wǎng)絡(luò)推廣服務(wù)，使得客戶不斷的獲得更大的收益。
服務(wù)器/云主機(jī) 24小時售后服務(wù)電話：0371-60135900
虛擬主機(jī)/智能建站 24小時售后服務(wù)電話：0371-55621053
網(wǎng)絡(luò)版權(quán)侵權(quán)舉報電話：0371-60135995
服務(wù)熱線：0371-60135900