amp学习
程序员文章站
2022-05-13 20:04:21
...
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="http://localhost/1.html">
<link rel="shortcut icon" href="./img/bq1.png">
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script><!-- 嵌入 YouTube 视频-->
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script><!-- 显示 Twitter 微博 -->
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script><!-- 突出显示报道中的精彩语段 -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script><!-- 图片轮换 -->
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script><!-- 使用边栏导航 -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway"><!-- 添加字体 -->
<title>study amp</title>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body {width: auto;margin: 0;padding: 0;font-family: 'Raleway', sans-serif;}
header {background: tomato;color: white;font-size: 2em;text-align: center;}
h1 {margin: 0;padding: 0.5em;background: white;box-shadow: 0px 3px 5px grey;}
p {padding: 0.5em;margin: 0.5em;}
amp-fit-text{white-space: normal;}/*确保 amp-fit-text 和 amp-carousel 组件可以同时正常运行*/
.home-button {margin-top: 8px;}
.headerbar {height: 50px;position: fixed;z-index: 999;top: 0;width: 100%;display: flex;align-items: center;}
.site-name {flex: 1;margin-left: -36px;}
article {margin-top: 50px;}
.hamburger {padding-left: 10px;}
.sidebar {padding: 10px;margin: 0;}
.sidebar > li {list-style: none;margin-bottom:10px;}
.sidebar a {text-decoration: none;}
.close-sidebar {font-size: 1.5em;padding-left: 5px;}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<!-- 返回到首页的链接 -->
<!-- <header class="headerbar">
<a href="#">
<amp-img src="./img/bq5.png" class="home-button" width="36" height="36"></amp-img>
</a>
<div class="site-name">News Site</div>
</header> -->
<!-- 返回到首页的链接结束 -->
<!-- 使用边栏导航 -->
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
<div class="site-name">News Site</div>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">X</div>
<ul class="sidebar">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</amp-sidebar>
<!-- 使用边栏导航结束 -->
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
<amp-img src="./img/p1.png" layout="responsive" width="266" height="150"></amp-img>
</article>
<!-- 广告 -->
<amp-ad width="300" height="250" type="doubleclick" data-slot="/35096353/amptesting/geo/uk">
<div fallback>No ad appeared because you're not browsing from the UK!</div><!-- fallback 属性是何用意吗？它会指示 AMP 的加载系统仅在父级元素未能成功加载时显示该元素的内容。 -->
</amp-ad>
<amp-ad width="300" height="250" type="doubleclick" data-slot="/35096353/amptesting/geo/us">
<div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>
<!-- 广告结束 -->
<!-- 嵌入 YouTube 视频 -->
<!-- <amp-youtube data-videoid="npum8JsITQE" layout="responsive" width="480" height="270px">
<div fallback>
<p>The video could not be loaded.</p>
</div>
</amp-youtube> -->
<!-- 嵌入 YouTube 视频结束 -->
<!-- 显示 Twitter 微博 -->
<!-- <amp-twitter width="486" height="657" layout="responsive" data-tweetid="638793490521001985"></amp-twitter> -->
<!-- 显示 Twitter 微博结束 -->
<!-- 突出显示报道中的精彩语段 -->
<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
Big, bold article quote goes here.
</amp-fit-text>
<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
HELLO
</amp-fit-text><!-- 尝试引用的内容很短的情况 -->
<!-- <amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon’s that is dreaming, And the lamp-light o’er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text> --><!-- 引用的内容很长 -->
<!-- <amp-fit-text width="400" height="400" layout="responsive" max-font-size="42">
HELLO
</amp-fit-text> --><!-- 尝试创建一小段很高的文字 -->
<!-- 突出显示报道中的精彩语段结束 -->
<!-- 简单的图片轮换展示 -->
<amp-carousel layout="responsive" width="418" height="196" type="slides" autoplay delay="2000" loop>
<amp-img src="./img/p2.png" width="418" height="196" layout="responsive"></amp-img>
<amp-img src="./img/p3.png" width="418" height="196" layout="responsive"></amp-img>
</amp-carousel>
<!-- 简单的图片轮换展示结束 -->
<!-- 轮换展示内容组合 -->
<amp-carousel layout="fixed-height" height="250" type="carousel">
<amp-img src="./img/p4.png" width="300" height="250"></amp-img>
<amp-ad width="300" height="250" type="doubleclick" data-slot="/35096353/amptesting/image/static">
<div placeholder>This ad is still loading.</div>
</amp-ad>
<amp-fit-text width="300" height="250" layout="fixed">Big, bold article quote goes here.</amp-fit-text>
</amp-carousel>
<!-- 轮换展示内容组合结束 -->
<!-- 返回到首页的链接 -->
<!-- 返回到首页的链接结束 -->
</body>
</html>