<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)运行结果如下:
总结:如果需要定位到某个精确的位置,采用定位布局,即方法一
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)