feats: 添加holder.js插件学习静态站点

2 years ago · 6137b4021e
parent 020926dd89
commit 6137b4021e
6 changed files with 3172 additions and 0 deletions
--- a/静态站点/Bootstrap5/pages/holder/holder.html
+++ b/静态站点/Bootstrap5/pages/holder/holder.html
@ -0,0 +1,45 @@
 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
    <meta charset="utf-8" />
    <title>holder.js 插件学习</title>
    <link rel="icon" type="image/png" href="favicon.png" />
    <script src="/plugs/holder/holder.js"></script>
    <script>
        //自定义主题
        Holder.addTheme("custom-theme", {
            bg: "#B0E3E6",
            fg: "#FF0000",
            size: 15,
            font: "微软雅黑",
            fontweight: "normal"
        });
    </script>
 </head>
 <body>
    <!--默认：指定完与高x是小字字母x -->
    <img class="card-body" data-src="holder.js/300x200">
    <!--指定参数：完x高?参数名1=参数值1&参数名2=参数值2&参数名3=参数值3 -->
    <!--指定显示文本-->
    <img class="card-body" data-src="holder.js/300x200?text=自定义显示文本">
    <!--指定主题：默认6个，可自定义-->
    <img class="card-body" data-src="holder.js/300x200?theme=sky&text=sky 主题">
    <img class="card-body" data-src="holder.js/300x200?theme=vine&text=vine 主题">
    <img class="card-body" data-src="holder.js/300x200?theme=gray&text=gray 主题">
    <img class="card-body" data-src="holder.js/300x200?theme=industrial&text=industrial 主题">
    <img class="card-body" data-src="holder.js/300x200?theme=social&text=social 主题">
    <img class="card-body" data-src="holder.js/300x200?theme=lava&text=lava 主题">
    <img class="card-body" data-src="holder.js/300x200?random=yes&text=随机主题">
    <img class="card-body" data-src="holder.js/300x200?theme=custom-theme&text=自定义主题 custom-theme">
    <img class="card-body" data-src="holder.js/300x200?fg=#ccc&text=指定前景色 cccccc">
    <img class="card-body" data-src="holder.js/300x200?bg=#666&text=指定背景色 666666">
    <!--百分比完和高: p-->
    <img class="card-body" data-src="holder.js/100px200?text=百分之百宽度" style="margin-bottom: 5px;">
    <img class="card-body" data-src="holder.js/300x200?auto=yes&text=自动大小">
    <img class="card-body" data-src="holder.js/300x200?outline=yes&text=显示对角线">
 </body>
 </html>
--- a/静态站点/UseHolder插件/favicon.png
+++ b/静态站点/UseHolder插件/favicon.png
--- a/静态站点/UseHolder插件/icon-192.png
+++ b/静态站点/UseHolder插件/icon-192.png
--- a/静态站点/UseHolder插件/index.html
+++ b/静态站点/UseHolder插件/index.html
@ -0,0 +1,50 @@
 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>holder.js 插件学习</title>
    <link rel="icon" type="image/png" href="favicon.png" />
    <style>
        *{
            margin: 1px;
            padding: 1px;
        }
    </style>
    <script src="/plugs/holder/holder.js"></script>
    <script>
        //自定义主题
        Holder.addTheme("custom-theme", {
            bg: "#B0E3E6",
            fg: "#FF0000",
            size: 15,
            font: "微软雅黑",
            fontweight: "normal"
        });
    </script>
 </head>
 <body>
    <!--默认：指定完与高x是小字字母x -->
    <img class="card-body" data-src="holder.js/290x200">
    <!--指定参数：完x高?参数名1=参数值1&参数名2=参数值2&参数名3=参数值3 -->
    <!--指定显示文本-->
    <img class="card-body" data-src="holder.js/290x200?text=自定义显示文本">
    <!--指定主题：默认6个，可自定义-->
    <img class="card-body" data-src="holder.js/290x200?theme=sky&text=sky 主题">
    <img class="card-body" data-src="holder.js/290x200?theme=vine&text=vine 主题">
    <img class="card-body" data-src="holder.js/290x200?theme=gray&text=gray 主题">
    <img class="card-body" data-src="holder.js/290x200?theme=industrial&text=industrial 主题">
    <img class="card-body" data-src="holder.js/290x200?theme=social&text=social 主题">
    <img class="card-body" data-src="holder.js/290x200?theme=lava&text=lava 主题">
    <img class="card-body" data-src="holder.js/290x200?random=yes&text=随机主题">
    <img class="card-body" data-src="holder.js/290x200?theme=custom-theme&text=自定义主题 custom-theme">
    <img class="card-body" data-src="holder.js/290x200?fg=#ccc&text=指定前景色 cccccc">
    <img class="card-body" data-src="holder.js/290x200?bg=#666&text=指定背景色 666666">
    <img class="card-body" data-src="holder.js/290x200?outline=yes&text=显示对角线">
    <img class="card-body" data-src="holder.js/290x200?auto=yes&text=自动大小">
    <!--百分比完和高: p-->
    <img class="card-body" data-src="holder.js/100px200?text=百分之百宽度" style="margin-bottom: 5px;">
 </body>
 </html>
--- a/静态站点/UseHolder插件/plugs/holder/holder.js
+++ b/静态站点/UseHolder插件/plugs/holder/holder.js
--- a/静态站点/UseHolder插件/plugs/holder/holder.min.js
+++ b/静态站点/UseHolder插件/plugs/holder/holder.min.js