html 从Popcode导出。点击导入：https：//popcode.org/？gist = 856eb9e6bf9e32380cee97503504c9d4

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 从Popcode导出。点击导入：https：//popcode.org/？gist = 856eb9e6bf9e32380cee97503504c9d4相关的知识，希望对你有一定的参考价值。

body {
    background: #F7F7F7;
}

store-coupon {
    float: left;
    margin: 0.5em;
    border: 1px dashed #343a40;
    background: #FFF;
    font-family: 'Cabin';
    -webkit-font-smoothing: antialiased;
}
class StoreCoupon extends HTMLElement {
    constructor() {
        // Always call super first in constructor
        super();
      
        // Create a shadow root
        var shadow = this.attachShadow({ mode: "open" });
        
        // Create all the info
        var discount = this.getAttribute("data-discount");
        var promoCode = this.getAttribute("data-code");
        
        // Create a standard all the element for the coupon and set their attributes.
        
        var discountTxt = document.createElement("span");
        discountTxt.style.display = "inline-block";
        discountTxt.style.fontWeight = "bold";
        discountTxt.style.color = "#28a744";
        discountTxt.style.marginRight = "3px";
        discountTxt.style.marginLeft = "10px";
        discountTxt.style.marginTop = "10px";
        discountTxt.style.marginBottom = "10px";
        discountTxt.style.border = "1px solid #28a744";
        discountTxt.innerText = discount + " Off!";
        
        shadow.appendChild(discountTxt);
        
        var promoTxt = document.createElement("span");
        promoTxt.style.display = "inline-block";
        promoTxt.style.marginRight = "10px";
        promoTxt.style.marginTop = "10px";
        promoTxt.style.marginBottom = "10px";
        promoTxt.style.color = "#343a40";
        promoTxt.innerText = "Promo Code: " + promoCode;
        
        shadow.appendChild(promoTxt);
        
        // Add the elements to the shadow root.
        shadow.style.paddingRight = "10px";
        shadow.style.display = "inline-block";
        shadow.style.background = "#FFF";
        
        // Add an event listener to the coupon.
        shadow.addEventListener("click", () => {
            window.location = this.getAttribute("data-url");
        });
    }
}

// Define the new element
customElements.define('store-coupon', StoreCoupon);
<!DOCTYPE html>
<html>
  <head>
    <!-- Title -->
    <title>L&amp;L Custom Elements: &lt;store-coupon&gt;</title>
    
    <!-- Meta Data -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.rawgit.com/RailRunner16/e6a49f43e5941de02b74afffa271d709/raw/76561918b2a99730c65096d99777af6016f3de31/%C3%A6-fonts.css" integrity="sha384-X8L2ocGNRC1QjCN0kioGHBakPfWzT8RJgKrrI79++l+5S9TUm6lsWLu/Eq8lvoiP" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-3 pacifico-font">&lt;store-coupon&gt;</h1>
        <p class="lead cabin-font">The &lt;store-coupon&gt; element gives you the ability to promote your products with discounts!</p>
      </div>
    </div>
    <div class="container mx-5">
      <div class="row">
        <p class="lead cabin-font">If nothing appeared below, then your browser does not support Custom Elements yet.</p>
      </div>
      <div class="row">
        <store-coupon data-discount="25%" data-code="ASDF"></store-coupon>
        <store-coupon data-discount="$10" data-code="SAVE10"></store-coupon>
        <store-coupon data-discount="90%" data-code="LO$$"></store-coupon>
        <store-coupon data-discount="50%" data-code="MONEYBAGS"></store-coupon>
        <store-coupon data-discount="100%" data-code="BANKRUPCY"></store-coupon>
      </div>
    </div>
    
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

以上是关于html 从Popcode导出。点击导入：https：//popcode.org/？gist = 856eb9e6bf9e32380cee97503504c9d4的主要内容，如果未能解决你的问题，请参考以下文章

002.谷歌浏览器Chrome如何导出或导入书签

如何导出谷歌浏览器Chrome的书签

怎么从navicat导出数据库

Excel每一列导出为HTML文件？

Xmanager会话文件如何导出

mysql使用Navicat 导出和导入数据库