【代码浮窗新玩法】如何把 “代码” 玩到极致&HTML5教程

重要提示：此类插入代码操作有风险，无代码基础者请谨慎使用。

悬浮窗口，想换就换，还改就改。

首先，你得要会把有赞给的那些悬浮代码上到微页面去，所以我先教大家如何制作简单的浮窗

我们先看看效果图

（本节浏览器google）

在这之前，我们首先要去开通QQ的跳转授权，地址http://shang.qq.com/v3/index.html

点进去后授权

具体步骤如下：

1.新建一个为页面

2.创建一个富文本

3.我们在富文本随便的输入几个字例如“马生”，右键点击“审查元素”

4.然后按CTRL+F，输入【contenteditable】，会有黄色框出现，我们点击“小三角”展开它，会看到“马生”两个字

5.右键点击代码段，选择【Edit as HTML】

6.然后把代码“<p>马生</p>”删减掉。换成以下代码（数字是我们的QQ，“召唤掌柜” 是可以换的）

<div class="custom-richtext">

<p><a href="http://wpa.qq.com/msgrd?v=3&uin=94484480&site=qq&menu=yes" style=" z-index:9999; text-decoration:none; font-weight:bold; position: fixed; z-index: 999; right: -6px; bottom: 220px; display: inline-block; width: 20px; border-top-left-radius: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 10px; color: white; font-size: 17px; line-height: 17px; box-shadow: rgb(102, 102, 102) 0px 0px 5px; word-wrap: break-word; padding: 8px 6px; border: 2px solid white; background: rgb(242, 12, 12);">召唤掌柜</a></p></div>

7.然后我们，点击“富文本”的随便一个地方，浮窗就出来了，出现了以下两个窗口才算成功喔，不然保存后不会出现浮窗效果的

如何改字？我们在刚刚那窜代码中找到“召唤掌柜”修改成我们需要修改的文字就好了

重点在这里：我们会看到这里有一串数值，这是我们自己的QQ，只要修改我们自己的QQ，顾客在点击我们的浮窗的时候，就可以自己转跳到聊天的页面（94484480修改成我们自己的QQ）

（提示一下：一个富文本最好是用一个浮窗，多个富文本格式可以实现多浮窗效果）

（提示一下：如何实现多页面浮窗效果呢？我们可以在公共广告里设置浮窗喔）

悬浮窗口

如何改成我们自己想要的图片效果呢

首先我们得学会以上的教程

话不多说

预览！

（随便做的，做的有点丑，勿喷！）

扫一扫

（本节浏览器google）

具体步骤如下：

1.新建一个为页面

2.创建一个富文本

3.插入一张你要悬浮的图片（图片的尺寸建议78*117像素）

4.按F12审查元素.我们会看到一个放大镜的图标，点击它，然后把它移到我们的图上去

5.点击我们的图片，右键点击代码段，选择【Edit as HTML】，把代码复制下来(在这里我要告诉大家，图片它是也是一连串的代码)

6.下面是我帮大家整理出来的代码，把我们刚刚复制的图片代码替换到下面蓝色的代码，数字是我们的QQ，img那个是我们的图片代码！（改好后记得复制）

7.复制好之后，我们回到富文本，按F12审查元素，然后按CTRL+F搜索，输入【contenteditable】，展开代码段，右键点击代码段，选择【Edit as HTML】把刚刚的图片代码删去打开代码段，然后粘贴我们的刚刚复制好的代码.

8.这时候我们就会看到图片悬浮在窗那了

9.如果你不想做客服的悬浮窗，想做一个超链接悬浮窗，也可以的，给大家整理出来了，和刚刚一样，只需要替换蓝色字体的代码进就完成了。

游客，如果您要查看本帖隐藏内容请回复

我要看隐藏

支持！！！！！！

我要得代码代码代码~~~

复古风格

回复才能看

1111111111111111111

6666666666666666666666

这个会慈和违法未

<section label="Copyright © 2016 playhudong All Rights Reserved." style="
border:none;
border-style:none;
width: 94%;
margin:1em auto;
color:#000;" id="shifu_spri_001" donone="shifuMouseDownPayStyle(&#39;shifu_spri_001&#39;)">
    <section style="width:100%;
height:auto;
overflow:hidden;
padding:1.5em 1.5em;
box-sizing:border-box;
box-shadow:0px 0px 10px #666">
        <section style="width:100%;">
            <img src="http://1251001145.cdn.myqcloud.com/1251001145/stylenew/viptemplet/spri_001.png" style="width:100%;
border:1px solid #ddd;"/>
        </section>
        <section style="width:100%;
margin:0 auto;
margin-top:2em;
box-sizing:border-box;
">
            <section class="wihudong" style="
width: 100%;
font-size: 3em;
font-family: arial;
color: #A6CE4D;
line-height: 1em;
font-weight: bolder; ">
                “
            </section>
            <section style="text-align:center;
font-size:1em;
margin-top:-1.5em;
line-height:2em;
color:#6B6C6E;">
                <p style="margin:0;">
                    盼望着，<br/>盼望着，<br/>东风来了，<br/>春天的脚步近了。
                </p>
            </section>
            <section class="wihudong" style="
width: 100%;
font-size: 3em;
font-family: arial;
color: #A6CE4D;
text-align:right;
line-height: 1em;
font-weight: bolder; ">
                ”
            </section>
            <section style="width:100%;
font-size:1em;
line-height:1.4em;
text-align:right;
color:#A9A9A9;">
                <p style="margin:0">
                    ---朱自清《春》
                </p>
            </section>
        </section>
    </section>
</section>
<p>
    <br/>
</p>

好像很厉害的