<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
}
/* 最简单的做法- 假定有两页
- 页a：div_a
- 页b：div_b
当点击第一个“圈圈”，把第一个显示(display:xxxxx)，第二个（其他）隐藏（display:none）
*/
<!DOCTYPE HTML><html>
<meta charset="UTF-8" />
<head>
<title></title>
</head>
<style type="text/css">
* {
margin: 0
padding: 0
}
li {
list-style: none
}
.th li {
float: left
border: 1px solid #000000
width: 20%
text-align: center
box-sizing: border-box
font-family: "微软雅黑"
font-weight: bold
}
.tb li {
float: left
border: 1px solid #000000
width: 20%
text-align: center
box-sizing: border-box
}
.th2 li {
float: left
border: 1px solid #000000
width: 100%
text-align: center
box-sizing: border-box
}
</style>
<body>
<div class="tab" style="width: 500px">
<div class="tr">
<ul class="th">
<li>姓名</li>
<li>性别</li>
<li>星座</li>
<li>生肖</li>
<li>爱好</li>
</ul>
</div>
<div class="tr">
<ul class="tb">
<li>张三</li>
<li>男</li>
<li>白羊</li>
<li>鼠</li>
<li>学习</li>
</ul>
</div>
<div class="tr">
<ul class="th2">
<li>总结：在XX月份XX时间段做XX事比较事半功倍</li>
</ul>
</div>
<div class="tr">
<ul class="th">
<li>工作</li>
<li>是否结婚</li>
<li>名族</li>
<li>特长</li>
<li>毕业学校</li>
</ul>
</div>
<div class="tr">
<ul class="tb">
<li>待业</li>
<li>否</li>
<li>汉</li>
<li>头发特长</li>
<li style="border-right:#fff border-bottom:#fff ">学校</li>
</ul>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）