外贸建站之谷歌AMP焦点图片代码分享

外贸建站之谷歌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>

猜你喜欢

转载自www.cnblogs.com/aid12580/p/10603083.html
今日推荐