资讯专栏INFORMATION COLUMN

一步一步实现web程序信息管理系统之一----登陆界面实现

sixgo / 567人阅读

摘要:一步一步实现程序信息管理系统一步一步实现程序信息管理系统在程序中特别是信息管理系统,登陆功能必须有而且特别重要。每一个学习程序开发或以后工作中,都会遇到实现登陆功能的需求。本篇记录一下登陆功能的前端界面的实现。

一步一步实现web程序信息管理系统

在web程序中特别是信息管理系统,登陆功能必须有而且特别重要。每一个学习程序开发或以后工作中,都会遇到实现登陆功能的需求。而登陆功能最终提供给客户或展现给客户的最基本的就是2个文本框一个按钮用户名与密码,外加一个登陆按钮。本篇记录一下登陆功能的前端界面的实现。

1.界面布局


整个页面的布局分为3个部分

  1. 上部 可以放置公司logo
  2. 中部 登陆功能主体部分
  3. 尾部 可以放置 说明信息、版权等

    2.实现

  • 头部实现
    html代码
 

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代码

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代码
 

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.最终整体界面效果图

到此,整个登陆界面完成。

资源下载链接
一步一步实现web程序信息管理系统之一----登陆界面源码下载

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1588.html

相关文章

  • 计算机毕业设计之微信小程序的商城 购物系统 app论文

    摘要:可以使用微信扫码登陆开发者工具,开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。小程序开发框架的目标是通过尽可能简单高效的方式让开发者可以在微信中开发具有原生小程序体验的服务。 ...

    Drummor 评论0 收藏0
  • 步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper

    摘要:前言上一篇一步一步创建程序三,我们完成了引用使用对类的改造并成功使用来查询到了数据,今天我们来创建一个新的服务层以及安装配置依赖注入框架组件等。项目创建成功后,删除自动生成的文件。本文同步发表至码友网一步一步创建程序四 前言 上一篇《一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](三)》,我们完成了: * 引用S...

    yy13818512006 评论0 收藏0
  • ChemiCloud:cPanel主机/国外主机/外贸主机月付3.95USD/附WordPress建

    摘要:安装建站程序域名解析做完,下一步是安装建站程序,然后才能开始建站。 官方网站 点击直达ChemiCloud官网 方案整理 可选数据中心包括:达拉斯(美国),法兰克福(EU),布加勒斯特(EU),伦敦(英国),班加罗尔(亚洲),新加坡(亚洲)和悉尼(澳大利亚),所有型号均赠送免费的域名注册。 Web Hosting S...

    caoym 评论0 收藏0
  • 计算机毕业设计之微信小程序的点餐系统 网上订餐app的论文

    摘要:所以微信点餐系统渐渐成为人们关注的焦点。首先,微信点餐系统,网上获取信息的实时性便捷性要远远高于传统媒介。研究目的虽然目前已有很多基于平台的微信点餐系统,但尚未出现更详细的功能显示和信息查询。 ...

    EsgynChina 评论0 收藏0
  • 步一实现Tomcat之一——实现一个简单的Web服务器

    摘要:原书中主要内容是一步一步实现一个类似于的容器。图一协议处于协议栈的应用层,传递的内容是报文,报文就相当于语言中的短语和句子用来表明意图。类表示一次客户端请求解析请求待实现解析待实现类表示返回值发送静态页面的相应报文待实现。 前言 最近在读《How Tomcat Works》,收获颇丰,在编写书中示例的过程中也踩了不少坑。不知你有没有体会,编程就一门是不试不知道,一试吓一跳的实践艺术。所...

    Edison 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<