<![CDATA[木子屋 - HTML/CSS]]> http://www.mzwu.com/ zh-cn PBlog2 v2.4 木子屋 http://www.mzwu.com/images/logos.gif http://www.mzwu.com/ 木子屋 http://www.mzwu.com/article.asp?id=5247 <![CDATA[Markdown 语法入门指南]]> service@mzwu.com(dnawo) Fri,28 Aug 2026 19:35:27 +0800 http://www.mzwu.com/default.asp?id=5247

Markdown 是一种轻量级标记语言，让你用纯文本编写格式化的文档。它语法简洁、易学易用，广泛应用于笔记、博客、文档写作等场景。下面从零开始，带你快速掌握 Markdown 的核心语法。

■ 标题

使用 # 号表示标题，1~6 个 # 分别对应一级到六级标题，# 与文字之间需要加一个空格。
引用内容 引用内容
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

建议：一篇文章只使用一个一级标题，其余用二级及以下标题组织内容层次。

■ 文本样式

Markdown 支持多种文本强调方式：
引用内容 引用内容
加粗    **文字** 或 __文字__
斜体     *文字* 或 _文字_
删除线 ~~文字~~

说明：可以组合使用，比如 ***加粗斜体*** 可以同时加粗并倾斜。

■ 代码

行内代码：用反引号包裹代码片段
引用内容 引用内容
使用 `console.log()` 可以在控制台输出信息。

代码块：用三个反引号包裹多行代码，并可指定语言实现语法高亮
引用内容 引用内容
```python
def hello():
    print("Hello, World!")

```

说明：常见的语言标识有：python、javascript、java、html、css、bash 等。

■ 引用

使用 > 表示引用，可以嵌套使用：
引用内容 引用内容
> 这是一段引用文字。
>
> > 这是嵌套引用。

说明：引用块内也可以使用其他 Markdown 语法，如加粗、列表等。

■ 链接和图片

链接：
引用内容 引用内容
[链接文本](链接地址)
[链接文本](链接地址 "鼠标悬停提示")

图片：
引用内容 引用内容
![替代文字](图片地址)

■ 表格

用 | 分隔列，用 - 分隔表头和内容，用 : 控制对齐方式：
引用内容 引用内容
| 左对齐 | 居中对齐 | 右对齐 |
|:-------|:-------:|-------:|
| 内容1  | 内容2   | 内容3  |
| 内容4  | 内容5   | 内容6  |

说明：表格的对齐符号 - 至少需要 3 个，: 的位置决定对齐方向。

■ 任务列表（复选框）

使用 - [ ] 表示未完成，- [x] 表示已完成：
引用内容 引用内容
- [x] 学习 Markdown 基本语法
- [x] 练习标题和列表
- [ ] 掌握表格和代码块
- [ ] 写一篇完整的 Markdown 文档

■ 列表

无序列表：使用 -、* 或 + 作为列表标记
引用内容 引用内容
- 苹果
- 香蕉
- 橙子

有序列表：使用数字加英文句点
引用内容 引用内容
1. 第一步：打开编辑器
2. 第二步：编写内容
3. 第三步：保存文件

嵌套列表：在子项前添加缩进（2 个或 4 个空格）即可实现嵌套
引用内容 引用内容
- 水果
  - 苹果
  - 香蕉
- 蔬菜
  - 西红柿
  - 黄瓜

■ 分割线

使用三个或以上的 -、* 或 _（单独一行）来创建分割线：
引用内容 引用内容
---

■ 转义字符

如果你想显示 Markdown 中的特殊符号本身，可以在前面加反斜杠 \ 进行转义：
引用内容 引用内容
\*这不是斜体\*
\# 这不是标题

■ HTML 混用

Markdown 兼容 HTML 标签，当 Markdown 语法无法满足需求时，可以直接使用 HTML：
引用内容 引用内容
这是普通文字。<br>这是换行后的文字。

Markdown 文件通常以 .md 或 .markdown 为后缀，掌握了以上语法，已经能够应对绝大多数的 Markdown 写作场景了。Markdown 的魅力在于：专注于内容本身，而不是排版格式。]]> http://www.mzwu.com/article.asp?id=4982 <![CDATA[DIV使用opacity设置透明后子元素不能取消透明解决方法]]> service@mzwu.com(dnawo) Tue,19 Jul 2022 10:15:17 +0800 http://www.mzwu.com/default.asp?id=4982
复制内容到剪贴板程序代码 程序代码
<style>
    div{background-color: #000; opacity: 0.5;}
    span{opacity: 1;}
</style>

<div>
    <span>hello,world.</span>
</div>

将opacity放在background-color中设置可解决此问题：

复制内容到剪贴板程序代码 程序代码
<style>
    div{background-color: rgb(0, 0, 0, 0.5);}
</style>

<div>
    <span>hello,world.</span>
</div>


相关链接

[1].CSS的opacity设置背景透明字体不透明：https://blog.csdn.net/qq_52070860/article/details/124374739]]> http://www.mzwu.com/article.asp?id=4981 <![CDATA[基于CSS3属性Animation和transform实现类似翻书效果[转]]]> service@mzwu.com(dnawo) Mon,18 Jul 2022 09:36:18 +0800 http://www.mzwu.com/default.asp?id=4981

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<head>
    <meta charset="utf-8">
    <title>基于CSS3属性Animation及transform实现类似翻书效果</title>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        .book{
            width: 460px;
            height: 300px;
            position: relative;
            margin: 150px 400px;
            transform: rotatex(15deg);
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
        }
        .page{
            width: 230px;
            height: 300px;
            border: 1px solid #666;
            position: absolute;
            right: 0;
            transform-origin: left;
            transform-style: preserve-3d;
            backface-visibility:hidden;
            font-size: 60px;
            text-align: center;
            line-height: 300px;
        }
        .page span{
            display: block;
            width: 100%;
            position: absolute;
            background-color: #00FFFF;
        }
        .page span:nth-child(2){
            transform: rotatey(-180deg);
            backface-visibility:hidden;
        }

        /*翻上一页动画*/
        @keyframes prev {
            0%{
                transform: rotatey(-180deg);
                z-index: 10;
            }
            100%{
                transform: rotatey(0deg);
            }
        }
        /*翻下一页动画*/
        @keyframes next {
            0%{
                transform: rotatey(0deg);
            }
            100%{
                transform: rotatey(-180deg);
                z-index: 10;
            }
        }
    </style>
</head>
<body>
    <!-- 所展示的书的内容 -->
    <div class="book">
        <div class="page">
            <span>1</span>
            <span>2</span>
        </div>
        <div class="page">
            <span>3</span>
            <span>4</span>
        </div>
        <div class="page">
            <span>5</span>
            <span>6</span>
        </div>
        <div class="page">
            <span>7</span>
            <span>8</span>
        </div>
        <div class="page">
            <span>9</span>
            <span>10</span>
        </div>
    </div>
    <!-- 用来控制上一页和下一页操作 -->
    <input type="button" value="上一页" id="prev"/>
    <input type="button" value="下一页" id="next"/>

    <script>
        $(document).ready(function(){
            let pageno = 0;
            let pagecount = $(".page").length;

            //设置每一页z-index
            let i=0;
            $(".page").each(function(){
                i++;
                $(this).css("z-index", pagecount-i);
            })

            //翻上一页
            $("#prev").click(function(){
                if(pageno > 0){
                    pageno--;
                    $(".page:eq("+pageno+")").css("animation", "prev 1.5s linear 1 forwards");
                }else{
                     pageno = 0;
                }
            })

            //翻下一页
            $("#next").click(function(){
                if(pageno < pagecount){                    
                    $(".page:eq("+pageno+")").css("animation", "next 1.5s linear 1 forwards");
                    pageno++;
                }else{
                     pageno = pagecount;
                }
            })
        });
    </script>
</body>
</html>

原文链接：https://www.cnblogs.com/LUOQIANangel/p/5598512.html]]> http://www.mzwu.com/article.asp?id=4979 <![CDATA[CSS3动画学习笔记]]> service@mzwu.com(dnawo) Sun,17 Jul 2022 21:14:53 +0800 http://www.mzwu.com/default.asp?id=4979

CSS3动画需@keyframes规则和animation属性一起配合使用才能生效，@keyframes规则定义了一组样式，它设置了多个关键点时元素的样式(也称关键帧)，animation属性定义了动画使用的规则、时长、速度等信息。

1、@keyframes规则

@keyframes规则定义了一组样式，它设置了多个关键点时元素的样式，它有两种写法：

复制内容到剪贴板程序代码 程序代码
@keyframes styles {
    /*0%、50%、100%分别对应动画0%、50%、100%时的状态*/
    0% {left: 0px;}
    50% {left: 180px;}
    100% {left: 200px;}
}

或者：

复制内容到剪贴板程序代码 程序代码
@keyframes styles {
    /*from为动画开始时的状态，to为动画结束时的状态*/
    from {left: 0px;}
    to {left: 200px;}
}

from等同于0%，to等同于100%，显然0%-100%形式可以更加精确的控制动画。为能兼容各种浏览器，推荐写法：

复制内容到剪贴板程序代码 程序代码
@keyframes styles {
    0% {left: 0px;}
    100% {left: 200px;}
}
@-webkit-keyframes styles {
    0% {left: 0px;}
    100% {left: 200px;}
}
@-moz-keyframes styles {
    0% {left: 0px;}
    100% {left: 200px;}
}

2、animation属性

animation属性定义了动画使用的规则、时长、速度等信息，animation的属性有：

引用内容 引用内容
animation-name：指定要绑定到的关键帧的名称；
animation-duration：指定动画需要多少秒或毫秒完成；
animation-timing-function：设置动画将如何完成一个周期；
animation-delay：设置动画在启动前的延迟间隔；
animation-iteration-count：定义动画的播放次数；
animation-direction：指定是否应该轮流反向播放动画；
animation-fill-mode：规定当动画不播放时，要应用到元素的样式；
animation-play-state：指定动画是否正在运行或已暂停；

animation属性写法如下：

复制内容到剪贴板程序代码 程序代码
.todo {
    animation-name: styles;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

animation属性支持简写：

引用内容 引用内容
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation属性简写的写法：

复制内容到剪贴板程序代码 程序代码
.todo {
    animation: styles 3s linear forwards;
}

同样为能兼容各种浏览器，推荐写法：

复制内容到剪贴板程序代码 程序代码
.todo {
    animation: styles 3s linear forwards;
    -webkit-animation: styles 3s linear forwards;
    -moz-animation: styles 3s linear forwards;
}

完整示例：

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<head>
    <meta charset="utf-8">
    <title>CSS3 Animation</title>
    <style>
        div{
            width: 10px;
            height: 10px;
            background-color: #000;
            position: relative;
        }

        @keyframes styles {
            0% {left: 0px;}
            100% {left: 200px;}
        }
        @-webkit-keyframes styles {
            0% {left: 0px;}
            100% {left: 200px;}
        }
        @-moz-keyframes styles {
            0% {left: 0px;}
            100% {left: 200px;}
        }

        .todo {
            animation: styles 3s linear forwards;
            -webkit-animation: styles 3s linear forwards;
            -moz-animation: styles 3s linear forwards;
        }
    </style>
</head>
<body>
    <div class="todo"></div>
</body>
</html>

相关链接

[1].CSS3 动画：https://www.runoob.com/css3/css3-animations.html
[2].@keyframes 规则：https://www.runoob.com/cssref/css3-pr-animation-keyframes.html
[3].animation属性：https://www.runoob.com/cssref/css3-pr-animation.html]]> http://www.mzwu.com/article.asp?id=4933 <![CDATA[DIV铺满全屏的三种方法]]> service@mzwu.com(dnawo) Thu,07 Apr 2022 08:18:18 +0800 http://www.mzwu.com/default.asp?id=4933
复制内容到剪贴板程序代码 程序代码
<style>
    * {margin:0; padding:0;}
    html,body{height:100%;}
    .box {height:100%;}
</style>

<div class="box"></div>

2.定位法：
复制内容到剪贴板程序代码 程序代码
<style>
    * {margin:0; padding:0;}
    .box {position:absolute; width:100%; height:100%;}
</style>

<div class="box"></div>

复制内容到剪贴板程序代码 程序代码
<style>
    * {margin:0; padding:0;}
    .box {position:absolute; top:0; bottom:0; left:0; right:0;}
</style>

<div class="box"></div>
]]> http://www.mzwu.com/article.asp?id=4810 <![CDATA[jQuery-1.8.0触发checkbox表单click事件的一个坑及解决方法]]> service@mzwu.com(dnawo) Tue,06 Apr 2021 10:09:10 +0800 http://www.mzwu.com/default.asp?id=4810
复制内容到剪贴板程序代码 程序代码
<input type="checkbox"/>
<script type="text/javascript">
    $(":checkbox").click(function(){
        alert($(this).is(":checked"));
    });            
</script>

手动点击checkbox触发click事件一切正常，改用jQuery触发click事件就不正常了：

复制内容到剪贴板程序代码 程序代码
setInterval("$(':checkbox').click();", 2000);

页面总是先alert然后checkbox状态才改变，顺序反了，表现很怪异：明明alert显示的是false但checkbox却是选中状态，正常应该先checkbox状态变为选中然后alert显示true才对，查了下原因：

引用内容 引用内容
jQuery低版本在模拟点击时，首先触发click回调函数，回调函数执行完后再去修改checkbox的状态。

最终解决方法：

改用change事件 或 升级jQuery到1.9.0(含)以上版本 都可解决！！！]]> http://www.mzwu.com/article.asp?id=4803 <![CDATA[HTML打开WEB版百度地图标点和导航示例]]> service@mzwu.com(dnawo) Mon,29 Mar 2021 23:16:22 +0800 http://www.mzwu.com/default.asp?id=4803
URI API提供以下功能：

>.标注：根据名称或经纬度，调起百度地图产品展示一个标注点，如，分享位置，标注店铺；
>.POI（地点）检索：根据关键字进行本地检索、周边检索、区域检索，调起百度地图产品展示POI检索结果页；
>.公交、地铁线路查询：根据线路名称，调起百度地图产品展示公交、地铁线路图；
>.公交、驾车、步行导航：根据起/终点名称或经纬度，调起百度地图产品展示路径规划方案页；
>.地址解析/查询：根据经纬度或地址信息，进行地址查询或坐标查询，调起百度地图产品展示该位置；

URI API常用功能示例

1).地图标点功能

复制内容到剪贴板程序代码 程序代码
http://api.map.baidu.com/marker?location=30.264079,120.157796&title=西湖&content=断桥残雪&output=html&src=webapp.baidu.openAPIdemo#测试链接

2).驾车导航

复制内容到剪贴板程序代码 程序代码
http://api.map.baidu.com/direction?origin=latlng:30.334685,120.101293|name:三墩&destination=latlng:30.264079,120.157796|name:西湖&region=杭州&mode=driving&output=html&src=webapp.baidu.openAPIdemo#测试链接

复制内容到剪贴板程序代码 程序代码
http://api.map.baidu.com/direction?destination=latlng:30.264079,120.157796|name:西湖&region=杭州&mode=driving&output=html&src=webapp.baidu.openAPIdemo#测试链接



参考资料

[1].地图调起API：http://lbsyun.baidu.com/index.php?title=uri]]> http://www.mzwu.com/article.asp?id=4790 <![CDATA[DIV+CSS 网页布局之：两列布局[转]]]> service@mzwu.com(dnawo) Fri,19 Mar 2021 11:34:15 +0800 http://www.mzwu.com/default.asp?id=4790 1、宽度自适应两列布局

两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。

当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。

两列宽度自适应，只需要将宽度按照百分比来设置，这样当浏览器窗口调整时，内容会根据窗口的大小，按照百分比来自动调节内容的大小。

复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>宽度自适应两列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
    height:50px;
    background:blue;
}
.main-left{
    width:30%;
    height:800px;
    background:red;
    float:left;
}
.main-right{
    width:70%;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    clear:both;
    height:50px;
    background:gray;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div class="main-left">左列</div>
<div class="main-right">右列</div>
<div id="footer">页脚</div>
</body>
</html>

2、固定宽度两列布局

要实现固定宽度的两列布局，也很简单，只需要把左右两列包裹起来，也就是给他们增加一个父容器，然后固定父容器的宽度，父容器的宽度固定了，那么这两列就可以设置具体的像素宽度了，这样就实现了固定宽度的两列布局。

复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>固定宽度两列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
    height:50px;
    background:blue;
}
#main{
    width:960px;
    margin:0 auto;
    overflow:hidden;
}
#main .main-left{
    width:288px;
    height:800px;
    background:red;
    float:left;
}
#main .main-right{
    width:672px;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    width:960px;
    height:50px;
    background:gray;
    margin:0 auto;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div id="main">
    <div class="main-left">左列</div>
    <div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>
</body>
</html>

3、两列居中自适应布局

同理，只需要给定父容器的宽度，然后让父容器水平居中。

复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>两列居中自适应布局</title>
<style>
*{margin:0;padding:0;}
#herder{
    height:50px;
    background:blue;
}
#main{
    width:80%;
    margin:0 auto;
    overflow:hidden;
}
#main .main-left{
    width:20%;
    height:800px;
    background:red;
    float:left;
}
#main .main-right{
    width:80%;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    width:80%;
    height:50px;
    background:gray;
    margin:0 auto;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div id="main">
    <div class="main-left">左列</div>
    <div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>
</body>
</html>

4、固定宽度横向两列布局

和单列布局相同，可以把所有块包含在一个容器中，这样做方便设置，但增加了无意义的代码，固定宽度就是给定父容器的宽度，然后中间主体使用浮动。

复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>横向两列布局</title>
<style>
*{margin:0;padding:0;}
#warp{
    width:960px;
    margin:0 auto;
    margin-top:10px;
}
#herder{
    height:50px;
    background:blue;
}
#nav{
    height:30px;
    background:orange;
    margin:10px 0;
}
#main{
    width:100%;
    margin-bottom:10px;
    overflow:hidden;
}
#main .main-left{
    width:640px;
    height:200px;
    background:yellow;
    float:left;
}
#main .main-right{
    width:300px;
    height:200px;
    background:pink;
    float:right;
}
#content{
    width:100%;
    overflow:hidden;
}
#content .content-left{
    width:640px;
    height:800px;
    background:lightgreen;
    float:left;
}
#content .content-right-sup{
    width:300px;
    height:500px;
    background:lightblue;
    float:right;
}
#content .content-right-sub{
    width:300px;
    height:240px;
    background:purple;
    margin-top:20px;
    float:right;
}
#footer{
    height:50px;
    background:gray;
    margin-top:10px;
}
</style>
</head>
<body>
<div id="warp">
    <div id="herder">页头</div>
    <div id="nav">导航</div>
    <div id="main">
        <div class="main-left">左-上</div>
        <div class="main-right">右-上</div>
    </div>
    <div id="content">
        <div class="content-left">左-下</div>
        <div class="content-right-sup">右-上</div>
        <div class="content-right-sub">右-下</div>
    </div>
    <div id="footer">页脚</div>
</div>
</body>
</html>
]]> http://www.mzwu.com/article.asp?id=4544 <![CDATA[HTML5基本页模板]]> service@mzwu.com(dnawo) Thu,27 Feb 2020 08:56:40 +0800 http://www.mzwu.com/default.asp?id=4544 1、jQuery基本页

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
    <script>
        $(document).ready(function(){
            alert("jQuery " + $.fn.jquery + " is ready.");
        });
    </script>
</body>
</html>

2、Vue基本页

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cn.vuejs.org/js/vue.min.js"></script>
</head>

<body>
    <div id="example">
        <a :href="url">Vue</a> {{ver}} is ready.
    </div>
    <script>
        var vm = new Vue({
            el: '#example',
            data: {
                url: 'https://cn.vuejs.org/',
                ver: Vue.version
            }
        })
    </script>
</body>
</html>
]]> http://www.mzwu.com/article.asp?id=4411 <![CDATA[HTML5<video>报错Uncaught (in promise) DOMException解决方法[转]]]> service@mzwu.com(dnawo) Tue,30 Jul 2019 16:27:01 +0800 http://www.mzwu.com/default.asp?id=4411
复制内容到剪贴板程序代码 程序代码
<video src="YOUR_VIDEO_URL" autoplay></video>

如果你用 javascript 代码显式调用play方法：

复制内容到剪贴板程序代码 程序代码
<video></video>
<script type="text/javascript">
    var vdo = $("video")[0]; //jquery
    vdo.src = "YOUR_VIDEO_URL";
    vdo.oncanplay = function(){
        this.play();
    };
</script>

你将会在控制台看到如下异常：

引用内容 引用内容
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Firefox也有类似的异常提示：

引用内容 引用内容
NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

这是因为，Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频。其实，严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频，而视频其实是不受限制的。但因为视频文件同样包含了音频，所以也一同被禁止了。Chrome这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。

既然知道了原因，那就开始找解决方法。

比较常规的做法是，为video标签设置muted属性，使它静音，这样视频就能自动播放了，但是没有声音:

复制内容到剪贴板程序代码 程序代码
<video src="YOUR_VIDEO_URL" autoplay muted></video>

然后待用户在网页上有了任意触发后，再将muted去掉，或者让用户手动去打开音频（腾讯视频就是这样做的）：

复制内容到剪贴板程序代码 程序代码
document.body.addEventListener('mousedown', function(){
    var vdo = $("video")[0]; //jquery
    vdo.muted = false;
}, false);  

好了，我们来看看大厂的解决方案：




优酷页面打开后视频不自动播放，需用户点击按钮才开始播放，B站解决方法和优酷一样，爱奇艺页面打开后视频自动开始播放，但声音需用户手工开启，所以暂时不要去想什么hack的方法了，有办法这些大厂早用了，还是老老实实引导用户手工点一下吧。

]]>