摘要：一步一步實(shí)現(xiàn)程序信息管理系統(tǒng)一步一步實(shí)現(xiàn)程序信息管理系統(tǒng)在程序中特別是信息管理系統(tǒng)，登陸功能必須有而且特別重要。每一個(gè)學(xué)習(xí)程序開(kāi)發(fā)或以后工作中，都會(huì)遇到實(shí)現(xiàn)登陸功能的需求。本篇記錄一下登陸功能的前端界面的實(shí)現(xiàn)。

一步一步實(shí)現(xiàn)web程序信息管理系統(tǒng)

在web程序中特別是信息管理系統(tǒng)，登陸功能必須有而且特別重要。每一個(gè)學(xué)習(xí)程序開(kāi)發(fā)或以后工作中，都會(huì)遇到實(shí)現(xiàn)登陸功能的需求。而登陸功能最終提供給客戶(hù)或展現(xiàn)給客戶(hù)的最基本的就是2個(gè)文本框一個(gè)按鈕用戶(hù)名與密碼，外加一個(gè)登陸按鈕。本篇記錄一下登陸功能的前端界面的實(shí)現(xiàn)。

1.界面布局

整個(gè)頁(yè)面的布局分為3個(gè)部分

1. 上部 可以放置公司logo
2. 中部 登陸功能主體部分

3. 尾部 可以放置 說(shuō)明信息、版權(quán)等

   2.實(shí)現(xiàn)

• 頭部實(shí)現(xiàn)
  html代碼

 

        

            
賬號(hào)登錄
            

                
關(guān)于我們
                
幫助中心
            
        
    

css代碼

.ops-logo{
    height: 74px;
    line-height: 74px;
}
.ops-main-content{
    margin:0 auto;
    width:1200px;
}
.ops-logo h1{
    float:left;
}
.ops-logo h1 a{
    display: block;
    height: 74px;
    padding-left: 170px;
    line-height: 80px;
    font-weight: bold;
    font-size: 18px;
    color:#000;
    background:url("../images/login/login_logo2.png?14622422798") left center no-repeat;
}
.ops-logo h1 a:hover{
    text-decoration:none;
}
.ops-logo .ops-login-header-linker{
    float:right;
}
.ops-logo .ops-login-header-linker li{
    float:left;
    margin-left:20px;
    font-size:12px;
}
.ops-logo .ops-login-header-linker li a{
    color:#808080;
}

最終效果展示

• 中間主體部分
  html代碼

        

            

                

                    
用戶(hù)登錄
                
                

                    

                        

                            
登錄名：
                            
                        

                        

                            
登錄密碼：
                            
                        

                        

                            
驗(yàn)證碼：
                            
                            
                        
                        
登錄
                    
                    
忘記密碼？聯(lián)系我們
                
            
        
    

css代碼

.ops-login-bd{
    margin-bottom: 38px;
    height:529px;
    background: #00a2ca; /*#29a176*/
}
.ops-login-bd .ops-main-content{
    position: relative;
    height:100%;
    background: url("../images/login/loginbg.png?14622422798") no-repeat;
}
.ops-login-bd .ops-input-box{
    position: absolute;
    right: 80px;
    top:50%;
    margin-top:-200px;
    background:#fff;
    box-shadow: 2px 2px 3px #696363,-2px 0 3px #696363;
}
.ops-login-bd .ops-input-box .ops-input-title{
    margin-top:22px;
    padding:0 10px;
    border-left:4px solid #fc880c;
    font-size:22px;
    color:#000;
}
.ops-login-bd .ops-input-box .ops-input-title h2{
    padding-bottom:8px;
    border-bottom:1px solid #d9d9d9;
    font-size: 20px;
}

.ops-login-bd .ops-input-box .ops-input-area{
    padding:0 22px;
    padding-top:20px;
}
.ops-login-bd .ops-input-box .ops-input-area .ops-input-item{
    margin-bottom:15px;
}
.ops-login-bd .ops-input-box .ops-input-area .ops-input-item p{
    margin-bottom:5px;
    font-size:12px;
    font-weight:bold;
}
.ops-login-bd .ops-input-box .ops-input-area .ops-input-item img{
    cursor:pointer;
    width:98px;
    height:32px;
}
.ops-login-bd .ops-input-box .ops-input-area input{
    padding:0 10px;
    border:1px solid #cacaca;
    width:264px;
    height:32px;
    outline:none;
    border-radius: 3px;
    background:url("../images/login/logininputbg.png?14622422798");
}
.ops-login-bd .ops-input-box .ops-input-area .ops-img-code{
    float:left;
    width:160px;
    margin-right:5px;
    border-radius: 3px;
}
.ops-login-bd .ops-input-box .ops-input-area .ops-login-btn{
    display:block;
    width:100%;
    height:36px;
    line-height: 36px;
    text-align:center;
    background:#00a2ca;
    border-radius: 4px;
    border:none;
    color:#fff;
    cursor: pointer;
    font-size:16px;
    outline:none;
}
.ops-login-bd .ops-input-box .ops-input-other{
    padding:22px;
    text-align:right;
}

.ops-login-bd .ops-input-box .ops-input-other a{
    margin-left:10px;
}

效果圖展示

• 尾部信息
  html代碼

 

        

            

                關(guān)于我們
                法律聲明
                服務(wù)條款
                聯(lián)系方式
                
地址：xxxxxxxxxxxxxxxx  xxxxxxxxxx許可證B1-20160901  COPYRIGHT  ?  2010-2016uimaker 版權(quán)所有 ICP證：蘇A2-20160101
                
xxxxxxx許可證B1-20150962  xxxxx  版權(quán)所有
            

        
    

css代碼

.ops-login-footer{
    padding-top:20px;
    padding-bottom: 35px;
    border-top:1px solid #e5e5e5;
    font-size:12px;
}
.ops-login-footer .ops-footer-copyright{
    text-align: center;
}
.ops-login-footer .ops-footer-copyright p{
    color:#999;
    margin-top:10px;
}
.ops-login-footer .ops-footer-copyright p:first-child{
    margin-top:0px;
}
.ops-login-footer .ops-footer-copyright .ops-links a {
    margin-left:15px;
    color:#666666;
}
.ops-login-footer .ops-footer-copyright .ops-links a:first-child {
    margin-left:0
}

3.最終整體界面效果圖

到此，整個(gè)登陸界面完成。

資源下載鏈接
一步一步實(shí)現(xiàn)web程序信息管理系統(tǒng)之一----登陸界面源碼下載