微信公众平台气泡对话框是怎么做出来的

html-css010

微信公众平台气泡对话框是怎么做出来的,第1张

这是用css+html实现的,不是公众号自带的功能。先用制作网页的软件设计出来,然后把效果复制粘贴到公众号编辑器,就可以实现。想要自己设计就需要有一点css代码基础,也有一些现成的可以直接抄来用。你从别人帐号上直接复制过来,并不是通用的HTML格式,当然不能用了。要提取代码自己另存才可以的。

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html charset=UTF-8">

        <title>无标题文档</title>

        <style type="text/css">

            body,html{

             margin:0px

             height:100%

            }

            .autoHeight{

             width:100px

             height:100%

             background:red

            }

</style>

<style type="text/css">

 div{ background: #FFF

font-family: "微软雅黑"

top: 10%

position: absolute

left: 50%

display: inline-block

padding: 10px

border-radius: 10px

box-shadow: 1px 1px 3px rgba(0,0,0,0.2)}

  div:before {

left: -10px

top: 50%

margin-top: -6px

position: absolute

z-index: -1

content: ""

width: 0

height: 0

border-top: 8px solid transparent

border-bottom: 8px solid transparent

border-right: 11px solid rgba(0, 0, 0, 0.1)

border-left: 0

}

div:after {

left: -11px

top: 50%

margin-top: -8px

position: absolute

content: ""

width: 0

height: 0

border-top: 8px solid transparent

border-bottom: 8px solid transparent

border-right: 11px solid #FFF

border-left: 0

}</style></head>

<body style="

    background: #369

">

  <div>你好</div>

</body>

</html>

根据你的图做的,应该合适了。