快捷导航
收起左侧

简洁暗色调密码登录单页源码

[复制链接]
查看: 8120|回复: 3
  • TA的每日心情
    郁闷
    2024-1-13 20:31
  • 签到天数: 11 天

    连续签到: 1 天

    [LV.3]偶尔看看II

    发表于 2018-7-16 01:20:59 | 显示全部楼层 |阅读模式
    <
    w.jpg.jpg

    单页HTML密码访问页面,效果图附上,拿来做简单技术应用还是不错的
    HTML代码:
    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>您访问的网站开启密码保护功能,请输入访问密码</title>
            <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body style="position: static;">
            <div id="psdp-wrap">
                    <div class="psdp-cont">
                            <span class="psdp-title">您访问的网站开启密码保护功能,请输入访问密码</span>
                            <form id="editForm" action="http://api.com" method="post" target="coreIframe">
                                    <div class="psdp-input">
                                            <input class="psdp-btn" type="submit" value="确定">
                                            <input class="psdp-pwd" type="password" name="accessPassword" id="accessPassword" placeholder="访问密码" autocomplete="off">
                                            <div class="cfb"></div>
                                            <span class="padp-hint" id="notice_accessPassword" style="display:none">请输入访问密码!</span>
                                    </div>
                            </form>
                            <p class="psdp-text">Copyright 盒子社区 2018</p>
                    </div>
            </div>
    </body>
    </html>

    接下来是CSS:
    [CSS] 纯文本查看 复制代码
    *{margin:0;padding:0;font-family:Arial,Helvetica,"华文细黑","微软雅黑",sans-serif}
    body,html{width:100%;height:100%}
    body{background-color:#313946}
    .cfb{clear:both}
    .psdp-title{color:#d3d4d4;display:block;text-align:center}
    .psdp-text{color:#818284;text-align:center}
    .psdp-input{position:relative}
    .psdp-input input:focus{outline:0}
    .psdp-input .psdp-pwd{display:inline-block;color:#797b7e;border:0;background:#444a56}
    .psdp-input .psdp-btn{display:inline-block;color:#f5fbf7;border:0;background:#24c673;float:right;cursor:pointer}
    .psdp-input label{text-indent:10px !important}
    .padp-hint{display:block;color:#ed4e62;margin-top:10px}
    @media(max-width:319px){#psdp-wrap{width:100%;height:100%;background:url(../psdp-top.jpg) center 90px no-repeat;background-size:100% auto}
    .psdp-cont{padding-top:360px}
    .psdp-title{font-size:13px;margin-bottom:30px}
    .psdp-text{font-size:12px;margin:70px 10px 30px 10px;line-height:20px}
    .psdp-input{width:284px;margin:0 auto}
    .psdp-input .psdp-pwd{font-size:13px;height:40px;line-height:40px;width:186px;padding-left:10px}
    .psdp-input .psdp-btn{font-size:13px;height:40px;line-height:40px;width:80px;background:#24c673}
    .padp-hint{font-size:13px}
    .psdp-input label{line-height:40px !important}
    }
    @media(min-width:320px) and (max-width:479px){#psdp-wrap{width:320px;margin:0 auto;height:100%;background:url(../psdp-top.jpg) center 90px no-repeat;background-size:320px auto}
    .psdp-cont{padding-top:300px}
    .psdp-title{font-size:13px;margin-bottom:10px}
    .psdp-text{font-size:12px;margin:10px auto 0 auto;line-height:20px}
    .psdp-input{width:296px;margin:0 auto}
    .psdp-input .psdp-pwd{font-size:13px;height:40px;line-height:40px;width:186px;padding-left:10px}
    .psdp-input .psdp-btn{font-size:13px;height:40px;line-height:40px;width:80px;background:#24c673}
    .padp-hint{font-size:13px}
    .psdp-input label{line-height:40px !important}
    }
    @media(min-width:480px) and (max-width:767px){#psdp-wrap{width:400px;margin:0 auto;height:100%;background:url(../psdp-top.jpg) center 90px no-repeat;background-size:400px auto}
    .psdp-cont{padding-top:400px}
    .psdp-title{font-size:18px;margin-bottom:42px}
    .psdp-text{font-size:14px;margin:70px 10px 30px 10px}
    .psdp-input{width:400px;margin:0 auto}
    .psdp-input .psdp-pwd{font-size:16px;height:55px;line-height:55px;width:262px;padding-left:10px}
    .psdp-input .psdp-btn{font-size:16px;height:55px;line-height:55px;width:110px}
    .padp-hint{font-size:16px}
    .psdp-input label{line-height:55px !important}
    }
    @media(min-width:768px){#psdp-wrap{width:660px;margin:0 auto;height:100%;background:url(../psdp-top.jpg) center 90px no-repeat;background-size:400px auto}
    .psdp-cont{padding-top:400px}
    .psdp-title{font-size:18px;margin-bottom:42px}
    .psdp-text{font-size:16px;margin:30px auto;width:480px}
    .psdp-input{width:660px;margin:0 auto}
    .psdp-input .psdp-pwd{font-size:16px;height:62px;line-height:62px;width:445px;padding-left:10px}
    .psdp-input .psdp-btn{font-size:16px;height:62px;line-height:62px;width:185px}
    .padp-hint{font-size:16px}
    .psdp-input label{line-height:62px !important}
    }
  • TA的每日心情
    郁闷
    2024-1-13 20:31
  • 签到天数: 11 天

    连续签到: 1 天

    [LV.3]偶尔看看II

     楼主| 发表于 2018-9-12 22:30:25 | 显示全部楼层
    回的人少,我来小顶一下
    回复
  • TA的每日心情
    郁闷
    2024-1-13 20:31
  • 签到天数: 11 天

    连续签到: 1 天

    [LV.3]偶尔看看II

     楼主| 发表于 2018-9-16 17:09:18 | 显示全部楼层
    会不会自己手写!快速回复用多了,看到关小黑屋!
    回复
  • TA的每日心情
    奋斗
    2020-1-4 22:22
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初来乍到

    发表于 2019-7-2 02:26:38 | 显示全部楼层
    支持下 这个应该简单易懂 但是我用不到 哈哈! 顶辛苦!
    回复
    [发帖际遇]: Sales 捡了钱没交公 经验 降了 1 点 . 幸运榜 / 衰神榜

    本版积分规则

    精彩推荐

    [影视APP]五级分销版全网VIP影视APP源码,

    2019-01-19 APP源码

    [双端影视]影视双端APP带商城系统,全新后

    2019-06-18 APP源码

    [双端盒子]影视双端直播盒子源码,自定义资

    2019-08-20 APP源码

    [影视APP]代理全局广告版五级分销全网VIP影

    2019-02-27 APP源码

    [影视双端]360影视双端H5源码2.0三级分销版

    2019-09-25 APP源码

    [影视双端]双端影视APPV3全新后台,下载页

    2019-06-29 APP源码

    [影视双端主题]无限代理版星空极简双端H5前

    2019-03-05 APP源码

    [影视双端]360影视双端H5源码,ThinkPHP新

    2019-06-26 APP源码
    嗨,AV8D ~!X

    喜欢给你阳光,让你充满活力!

    • 反馈建议:2308883803@qq.com
    • 工作时间:周一~周五

    云服务支持

    精彩内容,快速检索

    关注我们

    Copyright© 盒子云 - 你笑起来真好看~  Powered by Discuz!    ( 蜀ICP备18033287号-3 )