Question

我的HTML文件代码是：

 <!DOCTYPE html>
    <html ⚡="">
    <head>
      <meta charset="utf-8">
      <title>Amp</title>
      <link rel="canonical" href="">
      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
      <script async="" src="https://cdn.ampproject.org/v0.js"></script>
      <style amp-boilerplate=""></style>
      <script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp- 
                     carousel-0.1.js" async=""></script>
      <style amp-custom=""></style>
    </head>
    <body> 
      <header class="ampstart-headerbar">
             Amp pages
      </header>
    </body>
    </html>

当我在浏览器中打开此文件时，style的{{1}}无法注入。在AMP页面中如果要提供自定义样式，则需要使用具有header属性的内部样式来提供此样式，但是为什么不注入AMP组件样式？我无法理解此代码缺少什么库？我是第一次探索AMP。如果还有其他建议需要注意，请告诉我。

Answer 1

这是需要定义amp-custom的方式。

尝试从39-41行的以下文件添加CSS。这应该可以解决此问题。 https://github.com/saichandu415/AMP-Ecommerce-Apsara/blob/master/Website/templates/landing.amp.html

<!doctype html>
  <head>
            <script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async></script>  
    ...
    <style amp-custom>
      /* any custom styles go here. */
      body {
        background-color: white;
      }
      amp-img {
        border: 5px solid black;
      }

      amp-img.grey-placeholder {
        background-color: grey;
      }
    </style>
    ...
  </head>

点击下面的链接以获取更多详细信息

https://www.ampproject.org/docs/design/responsive_amp

让我们知道这是否有帮助。谢谢！

在AMP页面中，组件的默认CSS无法正常工作

1 个答案: