了解完百度mip之后,很多站長(zhǎng)不知道該怎么使用,如何去創(chuàng)建mip頁(yè)面呢?創(chuàng)建一個(gè)基本的MIP HTML頁(yè)面包括五步,分別是創(chuàng)建基礎(chǔ)MIP HTML頁(yè)面、引入圖片、調(diào)整樣式和布局、預(yù)覽和驗(yàn)證。下面我們?cè)敿?xì)的介紹一下具體的步驟。
導(dǎo)語(yǔ):了解完百度mip之后,很多站長(zhǎng)不知道該怎么使用,如何去創(chuàng)建mip頁(yè)面呢?創(chuàng)建一個(gè)基本的MIP HTML頁(yè)面包括五步,分別是創(chuàng)建基礎(chǔ)MIP HTML頁(yè)面、引入圖片、調(diào)整樣式和布局、預(yù)覽和驗(yàn)證。下面我們?cè)敿?xì)的介紹一下具體的步驟。
首先是創(chuàng)建基礎(chǔ)的MIP HTML頁(yè)面
下面這段代碼是一個(gè)基礎(chǔ)的 MIP HTML 的 demo 。將它復(fù)制到html文件中,并根據(jù)規(guī)范添加你想要的元素。
需要我們注意的是,頁(yè)面中必須加載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是版本號(hào),功能升級(jí)之后版本號(hào)也會(huì)改變,開發(fā)中可以根據(jù)文檔中的說明進(jìn)行加載。
第二步:引入圖片
html標(biāo)簽中圖片的標(biāo)簽是<img>,而百度MIP HTML中圖片標(biāo)簽使用的是組件<mip-img>
第三步:改變頁(yè)面的樣式
使用MIP HTML 時(shí),頁(yè)面樣式是可以根據(jù)自己的需求自定義的,具體方法如下:
(1)改變樣式
MIP HTML 是web頁(yè)面,頁(yè)面中任何元素的樣式都可以通過普通的css屬性來設(shè)計(jì)。使用時(shí),在頁(yè)面的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>
需要我們注意的是,每個(gè)MIP HTML頁(yè)面只能嵌入一個(gè)css樣式,且<style> 標(biāo)簽需要標(biāo)記自定義樣式,即寫成 <style mip-custo>。
(2)控件的布局
出于對(duì)性能的考慮,MIP頁(yè)面暫時(shí)不支持第三方通過css來元素進(jìn)行布局。
第四步:預(yù)覽和驗(yàn)證
為了確保所開發(fā)的mip頁(yè)面是有效的,在頁(yè)面開發(fā)過程中校驗(yàn)規(guī)則是需要非常嚴(yán)格的。
開發(fā)完成之后需要預(yù)覽,預(yù)覽的方式可以按照普通的HTML站點(diǎn)預(yù)覽方式,有以下兩種方式可以選擇:
(1)直接在瀏覽器中打開(由于XML Http Requests失敗可能會(huì)導(dǎo)致某些元素預(yù)覽失敗)
(2)在本地部署一個(gè)服務(wù),如apache,nginx等
在開發(fā)過程中細(xì)節(jié)方面出現(xiàn)小差錯(cuò)是難免的,可以通過以下方式進(jìn)行mip頁(yè)面的驗(yàn)證:
1) 在瀏覽器中打開頁(yè)面
2)打開控制臺(tái), 驗(yàn)證錯(cuò)誤
到了這一步就算是完成了頁(yè)面的本地測(cè)試,而且錯(cuò)誤也被修復(fù)了,也就是說你的第一個(gè)MIP頁(yè)面已經(jīng)準(zhǔn)備好了。
河南億恩科技股份有限公司(xuefeilisp.com)始創(chuàng)于2000年,專注服務(wù)器托管租用,是國(guó)家工信部認(rèn)定的綜合電信服務(wù)運(yùn)營(yíng)商。億恩為近五十萬(wàn)的用戶提供服務(wù)器托管、服務(wù)器租用、機(jī)柜租用、云服務(wù)器、網(wǎng)站建設(shè)、網(wǎng)站托管等網(wǎng)絡(luò)基礎(chǔ)服務(wù),另有網(wǎng)總管、名片俠網(wǎng)絡(luò)推廣服務(wù),使得客戶不斷的獲得更大的收益。
服務(wù)器/云主機(jī) 24小時(shí)售后服務(wù)電話:
0371-60135900
虛擬主機(jī)/智能建站 24小時(shí)售后服務(wù)電話:
0371-55621053
網(wǎng)絡(luò)版權(quán)侵權(quán)舉報(bào)電話:
0371-60135995
服務(wù)熱線:
0371-60135900