html5+css3 登录页面

效果图

代码如下:

css文件

该文件命名为 login.css

/*

 login.html 页面中使用的css样式

*/
.container{
    position: relative;
}

#bg_div{
    margin:0px auto;
    background: url(../img/bg.jfif) no-repeat; /* 设置背景图片, 注意图片的位置,可以更改*/
    width: 1280px;
    height:730px;
    text-align: center;
}

.form_div{
    position: absolute;/* 设置绝对布局*/
    top:  100px;
    right:300px;
    width: 400px;
    height: 400px;
    background-color: #fff;
    opacity: 0.6;/* 设置透明度*/
}
.form_div h2{
    text-align: center;
    font-weight: 700;
    color: black;
    margin:30px;
}
.form_div .form-group{
    text-align: center;
}
.form_div .form-group input{
    width:300px;
    display: inline-block;
    margin:15px;
    line-height:35px;
    
}
.form_div .form-group input:focus{
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);/* 设置阴影位置*/ 
}
.form-group-left{
    text-align: left;
    margin:15px;
    width:300px;
}
.form-group-right{
    text-align: right;
    margin-right:50px;
}
.form-group-left a{
    color:#55aaff;
    font-size: 16px;
    padding-left: 32px;
    text-decoration: none;/* 设置 去掉文本装饰 (去掉超链接默认的下划线)*/
}
.form-group-right button{
    background-color: blue;
    color: #FFFFFF;
    border-radius: 10px;/* 设置 边框圆角半径 10px*/
    border: none;
    width:300px;
    height:40px;
}
 

html 源码

该文件命名为login.html

    
        
        
           
    
    
        

            
          

          
          

              

登录

              
              

                  

                      
                  

                  

                           
                  

                  

                           没有账号,立即注册
                  

                  

                       登录
                  

                   
              

              
          

        

    

背景图自己随意替换即可,  只需要将css文件 放入到css目录下, 然后在html引入即可