iOS-html-Login Home Page

综合演练:Login Home Page

3.1 技术点

• 面板布局
• 图片居中: vertical-align: middle;
• 定位

需求

html

    
    
    
    


    
    

        
        

            
欢迎登录SeeMyGo教育系统
        
        
        

           
           

               ![](images/icon_people.png)
               
           
            
           

               ![](images/icon_password.png)
               
           

            
            

                下次自动登录
               忘记密码?
            

            
            登 录

            
            

                还没账号?  立即注册
            
        
        
        

             社交账号登录:  
             ![](images/sina.png)
             ![](images/weixin.png)
             ![](images/qq.png)
        
    

css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
    color: black;
}

body{
    /*设置背景颜色*/
    background: url("../images/bg.png") no-repeat;
    /*设置背景的尺寸*/
    background-size: cover;

    text-align: center;
}

/*面板*/
#panel{
    background-color: white;
    /*改变标签的类型*/
    display: inline-block;
    /*重写*/
    text-align: left;
    /*上边距*/
    margin-top: 150px;
    /*设置内边距*/
    padding: 20px;

    border-radius: 5px;
    box-shadow: -10px 20px 100px black;
}

.panel-header h2{
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 20px;
    /*下划线*/
    border-bottom: 1px solid #dddddd;
}

/*中间的主要内容*/
.panel-content{

}

.panel-content .user-pwd{
   /*background-color: red;*/
   margin-bottom: 15px;
   height: 40px;

   position: relative;
}

.panel-content .user-pwd img{
   position: absolute;
   top: 7px;
   left: 6px;
}

.panel-content .user-pwd input{
   width: 100%;
   height: 100%;
   box-sizing: border-box;
    /*设置内边距*/
   padding-left: 38px;
   border-radius: 5px;
   border:1px solid #dddddd;

}

.panel-content .user-pwd input:focus{
    outline: none;
    border: 1px solid orange;
    box-shadow: 0 0 10px orange;
}

.setting a{
    color: darkgray;
    font-size: 13px;
}

.setting a.pull-right{
    float: right;
}

/*按钮*/
.login-btn{
  margin: 15px 0;
  width: 100%;
  height: 38px;
  background-color: orangered;
  /*去除边框*/
  border: 0;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}

.login-btn:focus{
    outline: none;
}

.reg{
    text-align: center;
    margin-bottom: 15px;
    color: darkgray;
    font-size: 13px;
}

.reg a{
    color: orangered;
}


/*尾部*/
.panel-footer{
    /*background-color: red;*/
    height: 44px;
    line-height: 44px;
}

.panel-footer img{
    width: 30px;
    /*图片居中*/
    vertical-align: middle;
}