amp学习

淡淡的烟草味﹌ 2022-05-17 09:20 122阅读 0赞

<!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>
        <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
        <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">
          <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>
        </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>
        
        
        
        
        
        
        
        
        <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-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>