jquery +css 自定义登录框

客官°小女子只卖身不卖艺 2023-10-16 23:26 17阅读 0赞

效果展示：

![Center][]

自定义登录框样式文件（dialog.css）

/* input */
    .ipt {
    	border: solid 1px #d2d2d2;
    	border-left-color: #ccc;
    	border-top-color: #ccc;
    	border-radius: 2px;
    	box-shadow: inset 0 1px 0 #f8f8f8;
    	background-color: #fff;
    	padding: 4px 6px;
    	height: 21px;
    	line-height: 21px;
    	color: #555;
    	width: 180px;
    	vertical-align: baseline;
    }
    .ipt-mini {
    	width: 140px;
    	padding: 1px 3px;
    }
    .ipt:focus {
    	border-color: #95C8F1;
    	box-shadow: 0 0 4px #95C8F1;
    }
    /* btn */
    .btn {
    	position: relative;
    	cursor: pointer;
    	display: inline-block;
    	vertical-align: middle;
    	font-size: 12px;
    	font-weight: bold;
    	height: 27px;
    	line-height: 27px;
    	min-width: 52px;
    	padding: 0 12px;
    	text-align: center;
    	text-decoration: none;
    	border-radius: 2px;
    	border: 1px solid #ddd;
    	color: #666;
    	background-color: #f5f5f5;
    	background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
    	background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
    	background: linear-gradient(top, #F5F5F5, #F1F1F1);
    }
    input.btn {
    	height: 29px;
    }
    .btn:hover {
    	border-color:#c6c6c6;
    	color:#333;
    	background-color:#f8f8f8;
    	background:-webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
    	background:-moz-linear-gradient(top, #f8f8f8, #f1f1f1);
    	background:linear-gradient(top, #f8f8f8, #f1f1f1);
    	box-shadow:#ddd 0 1px 1px 0;
    }
    .btn:active, .btn.btn-active {
    	box-shadow:#ddd 0 1px 2px 0 inset;
    	border-color:#c6c6c6;
    }
    .btn:focus {
    	border-color:#4d90fe;
    	outline:none
    }
    .btn-primary {
    	border-color: #3079ED;
    	color: #F3F7FC;
    	background-color: #4D90FE;
    	background: -webkit-linear-gradient(top, #4D90FE, #4787ED);
    	background: -moz-linear-gradient(top, #4D90FE, #4787ED);
    	background: linear-gradient(top, #4D90FE, #4787ED);
    }
    .btn-primary:hover {
    	border-color:#2F5BB7;
    	color:#fff;
    	background-color: #4D90FE;
    	background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
    	background: -moz-linear-gradient(top, #4D90FE, #357AE8);
    	background: linear-gradient(top, #4D90FE, #357AE8);
    }
    .btn-primary:active, .btn-primary.btn-active {
    	box-shadow:#2176D3 0 1px 2px 0 inset;
    	border-color: #3079ED;
    }
    .btn-primary:focus {
    	border-color:#4d90fe;
    	outline:none
    }
    /* 代码整理：懒人之家 www.lanrenzhijia.com */
    .theme-buy {
    	margin-top:10%;
    	text-align: center;
    }
    .theme-gobuy, .theme-signin {
    	font-size: 15px;
    }
    .theme-price {
    	position: relative;
    	bottom: -6px;
    	font-family: microsoft yahei, Arial, Helvetica, sans-serif;
    	margin-right: 20px;
    	font-weight: bold;
    	color: #f60;
    	line-height: 32px;
    	font-size: 24px;
    	display: inline-block;
    }
    .theme-price dfn {
    	font-style: normal;
    	font-size: 18px;
    	margin-right: 2px;
    }
    .theme-desc {
    	padding: 30px;
    }
    .theme-version {
    	padding: 30px;
    }
    .theme-popover-mask {
    	z-index: 9998;
    	position:fixed;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	background:#000;
    	opacity:0.4;
    	filter:alpha(opacity=40);
    	display:none
    }
    .theme-popover {
    	z-index:9999;
    	position:fixed;
    	top:50%;
    	left:50%;
    	width:660px;
    	height:360px;
    	margin:-180px 0 0 -330px;
    	border-radius:5px;
    	border:solid 2px #666;
    	background-color:#fff;
    	display:none;
    	box-shadow: 0 0 10px #666;
    }
    .theme-poptit {
    	border-bottom:1px solid #ddd;
    	padding:12px;
    	position: relative;
    }
    .theme-popbod {
    	padding:60px 15px;
    	color:#444;
    	height: 148px;
    }
    .theme-popbom {
    	padding:15px;
    	background-color:#f6f6f6;
    	border-top:1px solid #ddd;
    	border-radius:0 0 5px 5px;
    	color:#666
    }
    .theme-popbom a {
    	margin-left:8px
    }
    .theme-poptit .close {
    	float:right;
    	color:#999;
    	padding:5px;
    	margin:-2px -5px -5px;
    	font:bold 14px/14px simsun;
    	text-shadow:0 1px 0 #ddd
    }
    .theme-poptit .close:hover {
    	color:#444;
    }
    .btn.theme-reg {
    	position: absolute;
    	top: 8px;
    	left: 43%;
    	display: none
    }
    .inp-gray, .feed-mail-inp {
    	border:1px solid #ccc;
    	background-color:#fdfdfd;
    	width:220px;
    	height:16px;
    	padding:4px;
    	color:#444;
    	margin-right:6px
    }
    .dform {
    	padding:80px 60px 40px;
    	text-align: center;
    }
    .dform .ipt_error {
    	background-color:#FFFFCC;
    	border-color:#FFCC66
    }
    .dform-tip {
    	display:none;
    	background-color:#080;
    	color:#fff;
    	line-height:42px;
    	margin-top:10px;
    display:;
    	font-size: 14px;
    }
    .dform-tip-errer {
    	background-color: #CF301A;
    }
    .dform-tip a {
    	display: inline-block;
    	padding: 0 20px;
    	margin-left:10px;
    	background-color: #FFE924;
    	color: #CF301A;
    }
    .dform-login {
    	padding:0;
    	height: 270px;
    	overflow: hidden;
    }
    .dform-login iframe {
    	height: 470px;
    	margin-top: -180px;
    }
    .theme-signin {
    	margin: -50px -20px -50px 90px;
    	text-align:left;
    	font-size: 14px;
    }
    .theme-signin h4 {
    	color:#999;
    	font-weight:100;
    	margin-bottom: 20px;
    	font-size: 12px;
    }
    .theme-signin li {
    	padding-left: 80px;
    	margin-bottom: 15px;
    }
    .theme-signin li strong {
    	float: left;
    	margin-left: -80px;
    	width: 80px;
    	text-align: right;
    	line-height: 32px;
    }
    .theme-signin .btn {
    	margin-bottom: 10px;
    }
    .theme-signin p {
    	font-size: 12px;
    	color: #999;
    }
    .theme-desc, .theme-version {
    	padding-top: 0
    }

jquery 相关代码：

[Center]: https://img-blog.csdn.net/20160408231549233?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center