HTML/CSS 遮罩层登录框

秒速五厘米 2022-12-31 13:19 265阅读 0赞

###  HTML/CSS 遮罩层登录框 ###

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .nav { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .3); } .nav .content { width: 400px; height: 400px; line-height: 400px; /* border: 1px solid red; */ background-color: #fff; margin: 200px auto; text-align: center; font-size: 0; } .nav .content img{ vertical-align: middle; } </style>
    </head>
    <body>
        <div class="nav">
            <div class="content">
                <img src="./img/qr-code.png" alt="">
            </div>
        </div>
        
    </body>
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221120/4d6355bb744e42d3bfd0db7b03e55049.png

发表评论取消回复

表情：

评论列表（有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 378 阅读

相关 HTML/CSS 遮罩层登录框

HTML/CSS 遮罩层登录框代码： <!DOCTYPE html> <html lang="en"> <head>

秒速五厘米/ 2022年12月31日 13:19/ 0 赞/ 266 阅读

相关原生模态框,遮罩层

<! DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" /> < meta nam

秒速五厘米/ 2022年10月02日 14:55/ 0 赞/ 303 阅读

相关 js遮罩层弹出框

昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了一定指出呀 <s

待我称王封你为后i/ 2022年08月06日 11:03/ 0 赞/ 362 阅读

相关遮罩层特效，登录界面的应用

今天上午的自己写了下遮罩层，和登陆界面的关闭，总之都是很简单的JS代码，我因为思路问题，所以敲了好长时间，最后再群友的帮助下完成了今天的任务，下午可能还会更新一章，具体什么，还

布满荆棘的人生/ 2022年08月03日 00:51/ 0 赞/ 91 阅读

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 364 阅读

相关 [jquery]弹框，遮罩层

之前使用semantic的modal作为遮罩层。出现了一些关乎源代码的bug。所以自己必须要写一个自己的弹框以达到目的： ![这里写图片描述][SouthEast]

拼搏现实的明天。/ 2022年06月03日 04:18/ 0 赞/ 412 阅读

相关弹出框的遮罩层

css样式： .shade { // 遮罩层的实现方法 position: fixed; top: 0;

末蓝、/ 2022年02月24日 12:16/ 0 赞/ 473 阅读

相关原生模态框,遮罩层

<! DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" /> < meta nam

曾经终败给现在/ 2022年01月07日 08:25/ 0 赞/ 445 阅读

相关遮罩层代码

1. 目的 : 直接复制来用, 加快工作效率 <div class="cover"></div> .cover{

我会带着你远行/ 2021年09月17日 04:18/ 0 赞/ 587 阅读