技术难点:
1,如何保证遮罩层mask占满整个屏幕,并且锁定当前屏幕区
2,保证div元素垂直水平居中(我下篇文章有个小总结哦!在css3样式分类里)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .mask{ /*让div占满整个屏幕*/ position: fixed; top: 0;right: 0; bottom: 0;left: 0; background-color: rgba(55,55,55,.5); } .mask>p{ width:300px; height:200px; background:#fff; /*让div在父容器居中*/ position: absolute; top: 0;right: 0; bottom: 0;left: 0; margin: auto; text-align:center; line-height:1.5em; border-radius:10px; border:1px solid #edcf72; font-size:40px; font-weight:bold; padding-top:15px; font-family:Arial; } .mask>p>a{ padding:10px; background:#9f8d77; color:#fff; border-radius: 6px; text-decoration: none; } </style> </head> <body> <div class="mask"> <p> GAME OVER!<br> SCORE: <span id="final">0</span><br> <a href="javascript:void(0)">TRY AGAIN!</a> </p> </div> </body> </html>
运行结果:
