1. 程式人生 > >外貿建站之谷歌AMP焦點圖片代碼分享

外貿建站之谷歌AMP焦點圖片代碼分享

外貿 tip and image 展示 program tps carousel use

外貿建站之谷歌AMP焦點圖片代碼分享,網站實施AMP頁面其實挺簡單的, 谷歌已經將一系列所需要的代碼都模塊化,標準化了, 只需要按照說明操作就可以實現制作做符合要求的AMP頁面。

今天剛剛已經給chinaobd2.com增加了 amp頁面。

這裏已谷歌AMP焦點圖片為例,為大家展示一下 怎樣實施AMP頁面。先看案例:http://www.chinaobd2.com/amp/xdiag-vcx-nano-for-gm-opel-gds2.html

http://www.chinaobd2.com/amp/tcs-cdp-car-and-truck-diagnostic-tool.html

代碼展示:

<amp-carousel id="hero-images" width="600" height="600" layout="responsive" type="slides" autoplay>
<a href="#"><amp-img src="https://www.chinaobd2.com/upload/pro/vxdiag-vcx-nano-for-gm-opel-new-1.jpg" layout="fill" attribution="visualhunt" alt="VXDIAG VCX NANO Multiple GDS2 and TIS2WEB Diagnostic/Programming System for GM/Opel"
></amp-img></a> <a href="#"><amp-img src="https://www.chinaobd2.com/upload/pro/vxdiag-vcx-nano-for-gm-opel-new-2.jpg" layout="fill" attribution="visualhunt" alt="VXDIAG VCX NANO Multiple GDS2 and TIS2WEB Diagnostic/Programming System for GM/Opel" ></amp-img></a> <a
href="#"><amp-img src="https://www.chinaobd2.com/upload/pro/vxdiag-vcx-nano-for-gm-opel-new-3.jpg" layout="fill" attribution="visualhunt" alt="VXDIAG VCX NANO Multiple GDS2 and TIS2WEB Diagnostic/Programming System for GM/Opel" ></amp-img></a> <a href="#"><amp-img src="https://www.chinaobd2.com/upload/pro/vxdiag-vcx-nano-for-gm-opel-new-4.jpg" layout="fill" attribution="visualhunt" alt="VXDIAG VCX NANO Multiple GDS2 and TIS2WEB Diagnostic/Programming System for GM/Opel" ></amp-img></a> <a href="#"><amp-img src="https://www.chinaobd2.com/upload/pro/vxdiag-vcx-nano-for-gm-opel-new-5.jpg" layout="fill" attribution="visualhunt" alt="VXDIAG VCX NANO Multiple GDS2 and TIS2WEB Diagnostic/Programming System for GM/Opel" ></amp-img></a> </amp-carousel>

外貿建站之谷歌AMP焦點圖片代碼分享