【前端开发实例】HTML CSS - 微信端悬浮引导关注 -（六）

Question. 问题

微信端商城首页制作一个引导关注公众号的二维码，对于公众号的引流可以起到很大的作用。一般商城上的二维码有按照某种逻辑被动推送的形式，比如未关注过公众号的用户，第一次进入商城跳出一个二维码；另一种是用户主动点击某个按钮，触发二维码的展示，有点类似苹果手机上的小黑点（AssistiveTouch）。

Solution. 解决

HTML 部分：

<!-- 触发按钮 -->
<div class="alert-click" id="alert-click"></div>

<!-- 底部透明灰色层 -->
<div class='mask'></div>
<!-- 二维码层 -->
<div class='board'>
    <div class="logo"><span>德玛乃康</span></div>
    <div class='qrcode'><img src='images/qrcode.jpg'></div>
    <div class="heart"><span>关注</span></div>
    <div class='text'>长按二维码关注公众号</div>
</div>

HTML部分主要构建触发按钮和二维码部分，二维码部分由两个层组成，底部的透明灰色层，和底部的二维码层。

CSS 部分：

/* 触发按钮 */
.alert-click {
    width: 40px; height: