一个好看的密码提取页面美化源码分享

唯爱网络

发表文章数:317

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 网站源码 » 一个好看的密码提取页面美化源码分享
摘要:CSS3、js、jQuery、手机移动端等网页特效的手机与分享。所有的资源都免费提供广大童鞋下载学习...

一个好看的密码提取页面美化源码分享

前端代码

<!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 Youngxj 2018</p>
		</div>
	</div>
</body>
</html>

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(https://ws3.sinaimg.cn/large/005BYqpgly1ftbp90nmhwj30b406pjrn.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(https://ws3.sinaimg.cn/large/005BYqpgly1ftbp90nmhwj30b406pjrn.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(https://ws3.sinaimg.cn/large/005BYqpgly1ftbp90nmhwj30b406pjrn.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(https://ws3.sinaimg.cn/large/005BYqpgly1ftbp90nmhwj30b406pjrn.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}
}

样式只是提供参考,喜欢的拿走

未经允许不得转载:作者:唯爱网络, 转载或复制请以 超链接形式 并注明出处 唯爱资源网
原文地址:《一个好看的密码提取页面美化源码分享》 发布于2018-08-25

分享到:
赞(1) 生成海报

评论 4

7 + 3 =
  1. #1

    转了

    清风徐来2年前 (2018-09-08)回复
  2. #2

    他这个密码设置在哪里呢?

    托马斯2年前 (2018-10-25)回复
  3. #3

    看看

    L2年前 (2018-11-04)回复
  4. #4

    看看

    37983080342年前 (2018-12-19)回复

长按图片转发给朋友

Vieu4.6主题
WordPress全站响应式布局自适应模板。新增商品分销在线商城微信支付宝支付,支持文章付费、独立下载。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册