html登录教程,CSS+html登录界面（菜鸟学前端）

html>

龙首观景苑-登录

body

{

background:url(image/8.gif );

background-size:1900px 1000px;

background-repeat:no-repeat;

padding-top:40px;

}

#login_wrap {

width:100%;

min-width: 1300px;

overflow: hidden;

position: relative;

}

.login-box {

width: 360px;

height: 450px;

position: absolute;

top: 50px;

left:170px;

background:rgba(49, 29, 3, 0.397);

}

.title {

height: 80px;

line-height: 80px;

background: #f1f0ed36;

font-size: 22px;

padding:0 30px;

}

.title img {

float: left;

margin-top: 12px;

margin-right: 15px;

}

.login_inner {

overflow: hidden;

padding: 30px 50px;

}

.alert {

margin: 0 auto;

padding: 6px 10px;

border: 1px solid transparent;

text-align: left;

color: #a94442;

background-color: #f2dede;

border-color: #ebccd1;

margin-bottom: 17px;

font-size: 12px;

}

.login_inner form{

width: 100%;

overflow: hidden;

padding-bottom: 15px;

border-bottom: 1px solid #eee;

}

.login_inner input {

display: inline-block;

width: 246px;

height: 26px;

border: 1px solid #d8d8d8;

font-size: 14px;

color: #666;

line-height: 28px;

padding: 6px 0 6px 12px;

box-shadow: 0 0 5px #fff;

outline: none;

transition: box-shadow 0.25s linear 0s;

-webkit-transition: box-shadow 0.25s linear 0s;

margin-bottom: 17px;

}

.verify input {

width: 95px;

margin-right: 20px;

float: left;

margin-bottom: 0;

}

.submit_btn button {

width: 120px;

height: 40px;

border: none;

background-color: #ffa800;

text-align: center;

line-height: 40px;

color: #000;

font-size: 18px;

font-weight: bold;

cursor: pointer;

float: left;

}

.auto_login {

margin-top: 15px;

}

.submit_btn .checkbox {

float: left;

width: 17px;

margin: 7px 5px 0 54px;

}

.submit_btn  span {

line-height: 35px;

}

.reg {

border-top: 1px solid #eeeeee;

margin-top: 15px;

width: 100%;

height: 40px;

line-height: 40px;

background: #f1f1f1;

text-align: center;

font-size: 16px;

}

.reg a {

color: #fc7f7f;

}

欢迎登录龙首观景苑

 

//图片点击事件

function changeCheckCode(img) {

img.src="checkCode?"+new Date().getTime();

}

登录

自动登录

没有账户？ 立即注册