html 如何让微信里的html应用d出“点击右上角分享到朋友圈”的

一个分享按钮，一个隐藏的图片（这个图片绝对定位在右上角）然后就是点击显示，点击隐藏了。

<a href="javascript:" onclick="document.getElementById('mcover').style.display='block'">分享到朋友圈</a>

<div id="mcover" onclick="document.getElementById('mcover').style.display=''" style="display: none">

<img src="/public/images/guide.png">

</div>

对应样式如下：

#mcover {

position: fixed

top: 0

left: 0

width: 100%

height: 100%

background: rgba(0, 0, 0, 0.7)

display: none

z-index: 20000

}

#mcover img {

position: fixed

right: 18px

top: 5px

width: 260px

height: 180px

z-index: 999

}

1、首先打开dw之后，新建一个html简单项目，输入项目名称后，就能新建一个html文件了。

2、这时候在dw中就可以看到简单的基本代码，此时就能添加按钮并设置跳转页面。

3、为了测试点击按钮跳转的测试，在这里利用button标签新建一个按钮。

4、然后在这里可以添加一个a标签，然后编写一个测试的Http地址。

5、但是只要测试，对于href属性，只要写上一个井号就能测试按钮的跳转。

6、最后在这里按下预览这个命令按钮，就能成功开始测试在dw中，按钮跳转页面的命令。

有两种方法来：

方法一：绝对定位布局，利用定位，可以将按钮放到任意位置

1）将包含按钮的父级标签设置为相对定位

.d2{

width:500px

height:300px

background:#660099

position:relative/*设置源相对定位*/

}

2）将按钮设置为绝对定位，百设置左边的距离，顶部的距离

.btn2{

background:#99ff00

position:absolute

left:100px

top:120px

}

3）运行查看结果：度按钮02 离左边100px ,顶部120px

方法二：浮动定位，利用设置按钮为浮动，缺点是不能很精确的定位到某个位置

1）代码如下：利用float:right 设置靠右

2）运行结果如下：

总结：如果需要定位到某个精确的位置，采用定位布局，即方法一

---