鼠标流光背景特效（乱起的名别太在意 :@(献花) ），canvas画布配合JS即可实现，这个版本是我从一个人单页里面抄下来的，顺便优化了一下后将其加入到了本站夜间模式

{card-default label="快速实现" width=""}

<canvas id="sbcanvas" class="sbcanvas"></canvas>
<script src="https://www.iarc.top/CDN/js/sbxg.js"></script>
<style>
.sbcanvas{
    display: block;
   position: fixed;
   top: 0;
   z-index: -9;
}
</style>

{/card-default}

将特效设为博客夜间模式

1.先在body写入

<canvas id="sbcanvas" class="sbcanvas"></canvas>
<script src="https://www.iarc.top/CDN/js/sbxg.js"></script>

2.更改css属性display为none（日间模式不显示该元素）

.sbcanvas{
    display: none;
   position: fixed;
   top: 0;
   z-index: -9;
}
</style>

3.在joe.mode.css文件夹最下面加入以下代码

html[data-night='night'] .sbcanvas{display:block;}

完成以上操作即可大功告成，快去开启夜间模式试一下吧

前言

博客之前经常有人回复一些无意义的内容，导致很多垃圾评论

所以我在想既然很多游客喜欢回复一些垃圾评论，不如我直接设置一个随机一言，让他们省去了垃圾评论的打字时间，同时又能让我的评论区少一些无意义的评论

而且那些真正认真回复的人只需要一键删除即可，也不会很影响评论体验，所以就给自己的评论框添加了随机一言

效果展示

先来一波效果展示

本教程仅以Joe主题为例，其他主题可自行发挥能力，如有技术问题，博主可提供简单的指导

教程开始

一、添加后台控制

在 Joe/functions.php内添加以下代码

// 评论框随机语录功能
$Comment_Citation = new Typecho_Widget_Helper_Form_Element_Select(
    'Comment_Citation',
    array('off' => '关闭（默认）', 'on' => '开启'),
    'off',
    '是否开启评论框随机语录功能',
    '介绍：开启后，评论框自动随机填充随机语录'
);
$Comment_Citation->setAttribute('class', 'joe_content joe_other'); 
$form->addInput($Comment_Citation->multiMode());

//评论框随机语录链接/文字 
$Comment_Citation__text = new Typecho_Widget_Helper_Form_Element_Textarea(
    'Comment_Citation__text',
    NULL,
    "https://api.vvhan.com/api/ian",
    '评论框随机语录',
    '介绍：用于修改评论框随机语录（可以为api地址） <br />
     格式：一行一个，可以为api地址，也可为文字，可以填写多个API地址<br />
     注意：必须填写JSON格式的API，API需要开启跨域权限才能调取，否则会调取失败！<br />
     如果为api地址可在前台按钮刷新内容，如果为文字只能刷新页面来刷新内容（建议使用api地址）<br />
     推荐API：https://api.vvhan.com/api/ian'
);
$Comment_Citation__text->setAttribute('class', 'joe_content joe_other');
$form->addInput($Comment_Citation__text);

二、添加刷新按钮（可省略）

在 Joe/public/comment.php 添加以下代码，不添加则不设置刷新按钮

<?php if ($this->options->Comment_Citation !== "off") : ?>
                            <div class="Comment_Citation" title="语录">
                                <div class='comment_box'>
                                    <i class='fa fa-fw fa-refresh' aria-hidden='true'></i>
                                    <span class="title">语录</span>
                                </div>
                            </div>
                        <?php endif; ?>

三、添加内容获取

1、添加后端获取

在 Joe/core/function.php 添加以下代码

/* 获取评论框随机语录 */
function _getComment_Citation() 
{
    $CitationRandom = explode("\r\n", Helper::options()->Comment_Citation__text);
    echo $CitationRandom[array_rand($CitationRandom)];
}

2、添加前端获取

在 Joe/public/config.php 添加以下代码

CITATION: `<?php _getComment_Citation() ?>`, // 评论随机语录

四、添加核心代码

{hide}

在 Joe/assets/js/joe.global.min.js 添加以下代码

if ($(".Comment_Citation").length) {function e() {let e = Joe.CITATION,t = /(https?:\/\/[^\s]+)/g;t.test(e)? $.ajax({url: e,dataType: "text",success: (e) => $(".joe_comment__respond-form .body textarea").val(e),}) : $(".joe_comment__respond-form .body textarea").val(e);}e(),$(".Comment_Citation").click(function () { e(); });}

{/hide}

五、添加刷新按钮样式（可省略）

这是刷新按钮样式，如果前面没添加刷新按钮，可跳过此步骤

在 Joe/assets/css/joe.global.min.css添加以下代码

.joe_owo__contain {
      position: static;
      .box { 
        position: absolute;
        bottom: 100%;
        margin-bottom: 6px;
        left: 0px;
        padding-top: 5px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-color: transparent;
        box-shadow: 0 0 10px 8px rgb(116 116 116 / 8%);
      }
    }
.comment_box {
      cursor: pointer;
      text-align: center;
      color: var(--routine);
      height: 26px;
      line-height: 26px;
      background: var(--background);
      opacity: 0.85;
      border-radius: 13px;
      width: 70px;
      margin-left: 5px;
      &:hover {
        background: var(--theme);
        color: #fff;
      }}

结语

教程稍有点复杂，但其实是沿用侧栏随机一言的方法，所以如果你能看懂核心js的话，可以仅修改 第四步 中ajax的 url 来实现，那样会简单很多很多

新表设置主键

我们先添加一个int自增值字段，比如，我在表A里新增一个字段名为id、数据类型为INT的字段并将其设置为主键，所执行的SQL语句为：

alter table A add column id int auto_increment primary key;

语法格式如下：

alter table 表名 add column 字段名 数据类型 auto_increment primary key;

设置主键

到’结构’选项卡，选中刚才添加的字段，选择’主键’，然后点确定就好了

回到浏览，即可看到，已经可以进行编辑

phpmysql给字段增加自增属性

在mysql中，可以通过给字段添加“AUTO_INCREMENT”属性来给字段增加自增属性，语法“alter table 表名 add column 字段名 数据类型 AUTO_INCREMENT;”

通过给字段添加 AUTO_INCREMENT 属性来实现字段自增长。语法格式如下：

字段名 数据类型 AUTO_INCREMENT

默认情况下，AUTO_INCREMENT 的初始值是 1，每新增一条记录，字段值自动加 1。

一个表中只能有一个字段使用 AUTO_INCREMENT 约束，且该字段必须有唯一索引，以避免序号重复（即为主键或主键的一部分）。

AUTO_INCREMENT 约束的字段必须具备 NOT NULL 属性。

AUTO_INCREMENT 约束的字段只能是整数类型（TINYINT、SMALLINT、INT、BIGINT 等）。

AUTO_INCREMENT 约束字段的最大值受该字段的数据类型约束，如果达到上限，AUTO_INCREMENT 就会失效。

自增字段一般用于主键中。
当主键定义为自增长后，这个主键的值就不再需要用户输入数据了，而由数据库系统根据定义自动赋值。每增加一条记录，主键会自动以相同的步长进行增长。

分类接口

接口地址：http://wp.birdpaper.com.cn/intf/getCategory

返回格式：JSON

请求方式：GET

请求示例：http://wp.birdpaper.com.cn/intf/getCategory

请求参数说明：直接请求

返回参数说明：

返回示例：

{
        errno: 0,
        msg: "",
        data: [
            {
                category: "4K专区",
                show_name: "4K",
                position: "100",
                hot_tag: [],
                old_id: "36"
            },
            {
                category: "美女模特",
                show_name: "美女",
                position: "99",
                hot_tag: [
                    {
                        tag: "清纯",
                        show_tag: "清纯"
                    },
                    {
                        tag: "YOU物馆",
                        show_tag: "YOU物馆"
                    },
                    {
                        tag: "性感女神",
                        show_tag: "性感女神"
                    },
                    {
                        tag: "文艺古风",
                        show_tag: "文艺古风"
                    }
                ],
                old_id: "6"
            },


        ]
    }

分类详情

接口地址：http://wp.birdpaper.com.cn/intf/GetListByCategory?cids=分类ID&pageno=1&count=10

返回格式：JSON

请求方式：GET

请求示例：http://wp.birdpaper.com.cn/intf/GetListByCategory?cids=36&pageno=1&count=10

请求参数说明：

返回参数说明：

示例代码：

{
        errno: 0,
        msg: "",
        data: {
            total_count: 2000,
            total_page: 200,
            pageno: 1,
            count: 10,
            list: [
                {
                    id: "2023166",
                    category: "4K专区",
                    tag: "战斗机,飞机,跑道",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/3650801a856228d3997177edb8a1af85--2407623804.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "36"
                },
                {
                    id: "2023154",
                    category: "4K专区",
                    tag: "春意盎然,草原,牧场,辽阔",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/1d14e3582128cc37c000732f978e8f1f--367037341.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "36"
                },
                {
                    id: "2023151",
                    category: "4K专区",
                    tag: "春意盎然,草原,蓝天,云朵,护眼",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/041032637716209918e845fa5ad71f84--3089467778.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "36"
                },
                {
                    id: "2022431",
                    category: "4K专区",
                    tag: "国漫,鬼刀,冰公主",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/475b89875e937bd2b3c66ab671399629--4138468370.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "36"
                },
                {
                    id: "2022428",
                    category: "4K专区",
                    tag: "护眼壁纸,蒲公英",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/b53b176f0834948e28180a23512aa2b2--694726005.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "36"
                },
                {
                    id: "2021933",
                    category: "4K专区",
                    tag: "夏威夷海滩,,黄昏,,",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/e567cb40c5774304783516299e518be4--1848356019.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "36"
                },
                {
                    id: "2021927",
                    category: "4K专区",
                    tag: "夏威夷,,海滩,,航拍",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/c2a52d1c2fc64ab43e4b1308cb200645--2561210487.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "36"
                },
                {
                    id: "2021917",
                    category: "4K专区",
                    tag: "绿巨人,漫威,钢铁侠",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/98dc794cf51b17a81972be1b119bae09--605464834.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "36"
                },
                {
                    id: "2021811",
                    category: "4K专区",
                    tag: "金发,美女,精灵,兽耳",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/2a2ffaeeddfcedeabe6cbd6568b75cd9--2249190785.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "36"
                },
                {
                    id: "2021810",
                    category: "4K专区",
                    tag: "森林,丛林,河流,航拍",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/682e17b213552fc3083e393b5da4b4b6--2092649417.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "36"
                }
            ]
        }
    }

搜索功能

接口地址：http://wp.birdpaper.com.cn/intf/search?content=搜索关键字&pageno=1&count=10

返回格式：JSON

请求方式：GET

请求示例：http://wp.birdpaper.com.cn/intf/search?content=模特&pageno=1&count=10

请求参数说明：

返回参数说明：

示例代码：

{
        errno: 0,
        msg: "",
        data: {
            total_count: 2000,
            total_page: 200,
            pageno: 1,
            count: 10,
            list: [
                {
                    id: "324680",
                    tag: "美女模特",
                    category: "美女模特",
                    url: "http://cdn-ali-img-staticbz.shanhutech.cn/bizhi/staticwp/201903/761350b68e44fca315cff737d409b19f.jpg",
                    class_id: "6"
                },
                {
                    id: "324678",
                    tag: "美女模特",
                    category: "美女模特",
                    url: "http://cdn-ali-img-staticbz.shanhutech.cn/bizhi/staticwp/201903/e83a9930f71dc0d9cb0d184a9027c7f2.jpg",
                    class_id: "6"
                }
            ]
        }
    }

最新壁纸

接口地址：http://wp.birdpaper.com.cn/intf/newestList?pageno=1&count=10

返回格式：JSON

请求方式：GET

请求示例：http://wp.birdpaper.com.cn/intf/newestList?pageno=1&count=10

请求参数说明：

返回参数说明：

示例代码：

{
        errno: 0,
        msg: "",
        data: {
            total_count: 180,
            total_page: 18,
            pageno: 1,
            count: 10,
            list: [
                {
                    id: "2022854",
                    category: "动漫卡通",
                    tag: "二次元,教室,桌椅,黑板",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/d675b9065438991b26f1b842824c49a8--1570210833.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "26"
                },
                {
                    id: "2022848",
                    category: "风景大片",
                    tag: "油菜花,平原,田野,广阔",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/f2e18b5f43f5a2a4e8ba826e58cd3bdd--774278070.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "9"
                },
                {
                    id: "2022845",
                    category: "风景大片",
                    tag: "自然风光,山顶,雾,群山",
                    url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/9b8ad17988a067f2af48dfbd1403a88a--2871356798.jpg",
                    status: "1",
                    live_open: false,
                    class_id: "9"
                },
                
            ]
        }
    }

备注

壁纸下载站：

戳我前往

Github开源地址:https://github.com/metowolf/Meting
Meting自带的接口目前无法解析网易云黑胶音乐了（只能放40秒），所以圆弧免费为广大站长提供一个能解析网易云黑胶和QQ音乐VIP歌曲的MetingApi接口：https://v.iarc.top/

在Meting.js文件里第40行左右的API替换成上面的即可

再附上一个第三方接口:https://api.mizore.cn/meting/api.php
第个直接请求会403，并非接口失效，带上参数请求即可，例：https://api.mizore.cn/meting/api.php?server=netease&type=playlist&id=7783760543&r=:r

{abtn icon="fa-bandcamp" color="#ff6800" href="https://www.iarc.top/57.html" radius="17.5px" content="Meting使用方法"/}

该解析接口的网易云黑胶不会到期。

绿钻到期了，QQ音乐只能解析非会员音乐了。

PHPMyAdmin激活高级功能

版本

phpMyAdmin：4.9

前期准备

将phpMyAdmin文件夹中（你的phpMyAdmin安装路径，宝塔面板一般是在www/server中）

/phpMyAdmin/sql/

中的

create_tables.sql

下载到本地！

第一步

将create_tables.sql导入到phpMyAdmin

导入后可能会报一下错，不过这并不影响

第二步

打开phpmyadmin文件夹下的“config.sample.inc.php”文件并复制，重命名为“config.inc.php”（如果已经有“config.inc.php”文件，直接修改即可）

第三步

将“config.inc.php”文件中的

/ Storage database and tables /

到

/* End of servers configuration */

之间的代码全部删除注释即可

第四步

注销phpmyadmin之后并重新登录。大功告成！
这时再去看数据库工具栏里就多出来“事件、程序、设计器等功能”

定时执行SQL语句

1、首先查看计划事件是否开启：

在phpmyadmin的SQL查询框中填入“show variables like '%scheduler%';”并执行

当显示event_scheduler的“Value”为“ON”时，表示计划事件已开启；

当显示event_scheduler的“Value”为“OFF”时，表示计划事件未开启。

2、如果计划事件未开启，可按以下操作开启：

到mysql配置文件my.cnf新增一项，在mysqld后面添加event_scheduler = on（或是event_scheduler = 1），保存后重启mysql服务器即可。

在phpmyadmin的“事件”功能里，“事件计划状态”显示为“开”即计划事件已正常开启。

3、添加定时任务

在phpmyadmin的“事件”功能里，点击“新建”下的“添加事件”

根据弹窗填写表格

其中状态

“ENABLED”为“启用”

“DISABLED”为“不启用”

“SLAVESIDE_DISABLED“为“在从库上不启用该事件“

事件类型

"RECURRING"为“循环执行”

"ONE TIME"为“只执行一次”

运行周期即根据需要选择执行的周期时间

起始时间即开始执行的时间

终止时间即结束时间，留空表示一直执行下去

定义即执行的SQL语句

用户按"数据库用户名@数据库地址"的格式填写

最后点击"执行"即创建定时任务完成。

最后

这里记录下防以后踩坑！

UPDATE 表名 SET B列名=A列名

需求：把一个表某个字段内容复制到另一张表的某个字段。

实现sql语句1:

代码如下:

UPDATE file_manager_folder f1
LEFT OUTER JOIN file_manager_folder f2 
 ON f1.name = f2.name AND f2.parentId = 54
SET f1.parentId = 54 
WHERE f2.name IS NULL AND f1.id IN (1,2,3);

实现sql语句2:

代码如下:

update B set extra = A.extra from A join B on (A.id = B.id);

实现sql语句3:

代码如下:

update b set b.sms = (select a.sms from a where a.id = b.id)

需要确定两张表中的id都是主键或者唯一

实现sql语句4:

代码如下:

UPDATE A SET A.SMS = (SELECT B.SMS FROM B WHERE A.ID = B.ID) WHERE EXISTS (SELECT 1 FROM B WHERE A.ID = B.ID);

实现sql语句5:
复制一个表字段数据到另外一个表的字段，可以这么写：
实现sql语句5:

代码如下:

UPDATE tb_1 INNER JOIN tb_2 ON tb_1.tid = tb_2.tid
SET tb_1.tcontent = tb_2.tcontent

附：同表复制

需求：把同一张表的一个字段内的内容复制到另一个字段里

例1：
我想把article表中A字段的内容复制到article表中B字段里面sql语句为：

代码如下:

update article set B=A;

例2：
有时候，我们需要复制某个字段一整列的数据到另外一个新的字段中，这很简单，SQL可以这么写：

代码如下:

UPDATE tb_1 SET content_target = content_source;

大概写法如下：

代码如下:

Update {your_table} set {source_field} = {object_field} WHERE cause

现有表A和表B，希望更新A表，当 A.bid = B.id时，a.x = b.x, a.y=b.y：

update a inner join b on a.bid=b.id set a.x=b.x,a.y=b.y;

代码：

将下面代码加在head标签或者body中即可

<!-- 灯笼代码 -->
<meta charset="utf-8">
<div class="deng-box2">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">年</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c">
            </div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<div class="deng-box3">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">新</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c"></div>
            <div class="shui-b">
            </div>
        </div>
    </div>
</div>
<div class="deng-box1">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">乐</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c"></div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<div class="deng-box">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">快</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c">
            </div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<style type="text/css">
    .deng-box {
        position: fixed;
        top: -40px;
        right: 150px;
        z-index: 9999;
        pointer-events: none;
    }
    .deng-box1 {
        position: fixed;
        top: -30px;
        right: 10px;
        z-index: 9999;
        pointer-events: none
    }
    .deng-box2 {
        position: fixed;
        top: -40px;
        left: 150px;
        z-index: 9999;
        pointer-events: none
    }
    .deng-box3 {
        position: fixed;
        top: -30px;
        left: 10px;
        z-index: 9999;
        pointer-events: none
    }
    .deng-box1 .deng,
    .deng-box3 .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, .8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 5s infinite ease-in-out;
        box-shadow: -5px 5px 30px 4px #fc903d
    }
    .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, .8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 3s infinite ease-in-out;
        box-shadow: -5px 5px 50px 4px #fa6c00
    }
    .deng-a {
        width: 100px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, .1);
        margin: 12px 8px 8px 8px;
        border-radius: 50% 50%;
        border: 2px solid #dc8f03
    }
    .deng-b {
        width: 45px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, .1);
        margin: -4px 8px 8px 26px;
        border-radius: 50% 50%;
        border: 2px solid #dc8f03
    }
    .xian {
        position: absolute;
        top: -20px;
        left: 60px;
        width: 2px;
        height: 20px;
        background: #dc8f03
    }
    .shui-a {
        position: relative;
        width: 5px;
        height: 20px;
        margin: -5px 0 0 59px;
        -webkit-animation: swing 4s infinite ease-in-out;
        -webkit-transform-origin: 50% -45px;
        background: orange;
        border-radius: 0 0 5px 5px
    }
    .shui-b {
        position: absolute;
        top: 14px;
        left: -2px;
        width: 10px;
        height: 10px;
        background: #dc8f03;
        border-radius: 50%
    }
    .shui-c {
        position: absolute;
        top: 18px;
        left: -2px;
        width: 10px;
        height: 35px;
        background: orange;
        border-radius: 0 0 0 5px
    }
    .deng:before {
        position: absolute;
        top: -7px;
        left: 29px;
        height: 12px;
        width: 60px;
        content: " ";
        display: block;
        z-index: 999;
        border-radius: 5px 5px 0 0;
        border: solid 1px #dc8f03;
        background: orange;
        background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
    }
    .deng:after {
        position: absolute;
        bottom: -7px;
        left: 10px;
        height: 12px;
        width: 60px;
        content: " ";
        display: block;
        margin-left: 20px;
        border-radius: 0 0 5px 5px;
        border: solid 1px #dc8f03;
        background: orange;
        background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
    }
    .deng-t {
        font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;
        font-size: 3.2rem;
        color: #dc8f03;
        font-weight: 700;
        line-height: 85px;
        text-align: center
    }
    .night .deng-box,
    .night .deng-box1,
    .night .deng-t {
        background: 0 0 !important
    }
    @-moz-keyframes swing {
        0% {
            -moz-transform: rotate(-10deg)
        }
        50% {
            -moz-transform: rotate(10deg)
        }
        100% {
            -moz-transform: rotate(-10deg)
        }
    }
    @-webkit-keyframes swing {
        0% {
            -webkit-transform: rotate(-10deg)
        }
        50% {
            -webkit-transform: rotate(10deg)
        }
        100% {
            -webkit-transform: rotate(-10deg)
        }
    }
</style>

水平垂直居中

margin: auto;

{margin-left:auto;margin-right:auto;}

缩写形式为:

{margin:0 auto;}

0为上下边距，可按自己需要设置成不同的

实现最高渲染性能的去除下边框css

div { 　border: 1px solid; 　border-bottom: 0 none;  /**key code here**/}

增加icon按钮点击区域

点击 区域 大小 从 16 × 16 一下子 提升 到 38 × 38

.icon- clear { 　width: 16px; 　height: 16px; 　border: 11px solid transparent; 　 /**key code here**/}

永远居中的dialog(可兼容到IE7)

<html lang="en"><head><meta charset="UTF-8"><title>demotitle><style>       .container {           position: fixed;           top:0;           right: 0;           left: 0;           bottom: 0;           background-color: rgba(0,0,0,.5);           text-align: center;           font-size: 0;           white-space: nowrap;           overflow: auto;       }       .container:after {           content: '';           display: inline-block;           height: 100%;           vertical-align: middle;       }       .content {           width: 240px;           height: 120px;           padding: 20px;       }       .dialog {           display: inline-block;           vertical-align: middle;           border-radius: 6px;           background-color: #fff;           font-size: 14px;           white-space: normal;       }style>head><body><div class="container"><div class="dialog"><div class="content">这dialog永远居中div>div>div>body>html>

去除页面默认滚动条(PC端有效)

/**good code**/html {overflow: hidden;}/**bad code**/html, body {    overflow: hidden;}

一、引用1个JS

<script src="https://cdn.jsdelivr.net/gh/xh8039/static-assets/Joe/assets/js/joe.autoc.min.js?version=1.23"></script>

二、添加一段css

打开文件:/usr/themes/Joe/assets/css/joe.autoc.css
在此文件最下方加入这一行代码即可：

/*外部*/
.outline-outside {
    background: var(--background);
}

/*章节*/
.outline-chapter {
    font-size: 0.95rem;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outline-subject {
    padding: 0 10px;
}

.outline-chapter-code {
    padding-right: 5px;
}

.outline-link:link,
.outline-link:visited {
    color: var(--routine);
    text-decoration: none;
    transition: 0.15s;
}

.outline-link:hover {
    color: var(--theme);
}