晒自己做的一个管理系统（清新风格）EasyUI

最近项目结束了，现在也要自己总结一下自己的成果了，总结会加深自己对项目的印象的。这里我就先晒一些作品图片了，希望大家看了会赞美一个！

项目虽然结束了，但是接下来的这个项目可就不是我一个人可以搞定的了，太多的未知数（X）伴随着我们IT男！

首先是登录界面—登录界面我一直比较喜欢的风格就是简单，大气，没有太多的信息展示，毕竟是一个管理系统，不是前台网站

当初设计这个界面的时候也是想了很久的，当然这个页面可以有很多的背景图片风格的。你可以任意的单配图片！个人比较喜欢冷色调的

这就是登录界面的代码了！

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="WD_Web.Dzd.login" %><html>
<head><title>后台管理员登录</title><link href="css/progressbar.css" rel="stylesheet" /><style type="text/css">* { margin: 0px; padding: 0px; font-family: 微软雅黑; list-style: none; }#u { background-color: white; width: 327px; text-align: left; border: 1px solid #ccc; z-index: 10; display: none; margin: 0px; color: #B3B3B3; position: relative; top: 0px; left: 0px; }#u ul li { padding: 5px; height: 20px; line-height: 20px; }input { background-color: transparent; color: #B3B3B3; border: none; font-size: 16px; }#btnLogin { border-radius: 2px; font-size: 16px; color: #fff; text-shadow: 0 1px 0 rgba(117,155,0,0.65); width: 74px; height: 53px; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; background-color: #84af00; }</style><script src="../Scripts/jquery-1.7.1.min.js"></script><script src="../artDialog4.1.6/artDialog.js?skin=aero"></script><script src="../js/Jquery.form.js"></script><script type="text/javascript">var email = new Array("163.com", "126.com", "yeah.net", "qq.com", "gmail.com", "hotmail.com", "sina.com", "yahoo.com");var imgs = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg");var tips = function (mess, icon){art.dialog({ content: mess, title: '消息', lock: true, opacity: 0.2, icon: icon, ok: function () { this.close(); } });}function randImg(){var i = Math.floor((Math.random() * 10));var path = "img/bg/";if (i <= imgs.length - 1){$('#bgImg').fadeIn(600).attr("src", path + imgs[i]);}}function loading(percent){$('.container').show();$('.progress span').animate({ width: percent }, 1000, function (){$(this).children().html(percent);if (percent == '100%'){$(this).children().html('登陆成功,正在转向后台...    ');setTimeout(function (){$('.container').fadeOut();}, 1000);}})}$(function (){randImg();var k = 0;setBg();$('#btnLogin').click(function (){var icon = "warning";if ($('#txtUserName').val() == ''){tips('<p>请输入账号</p>', icon)$('#txtUserName').focus();return false;}if ($('#txtPassword').val() == ''){tips('<p>请输入密码</p>', icon);$('#txtPassword').focus();return false;}return true;})window.onresize = function (){setBg();}function setBg(){$("#login").css({ "margin-top": $(window).height() > $("#login").height() ? ($(window).height() - $("#login").height()) / 2 : 0 });$("#bg img").width($(window).width()).height($(window).height());}})</script>
</head>
<body style="overflow: hidden;"><div id="bg" style="text-align: center; background-repeat: no-repeat; background-attachment: fixed;"><div id="login" style="width: 800px; height: 53px; margin: 0px auto; display: block;"><form id="form1" runat="server"><div style="width: 339px; height: 53px; float: left;"><asp:TextBox ID="txtUserName" runat="server" BorderColor="#cccccc" BackColor="White" BorderStyle="Solid" BorderWidth="1" Style="height: 53px; margin-right: 10px; padding-left: 10px; line-height: 53px; width: 317px;" MaxLength="25" placeholder="账号" Text="sysadmin"></asp:TextBox><ul id="u"></ul></div><div style="width: 339px; height: 53px; float: left; margin-right: 10px;"><asp:TextBox ID="txtPassword" runat="server" BorderColor="#cccccc" BackColor="White" BorderStyle="Solid" BorderWidth="1" TextMode="Password" Style="height: 53px; line-height: 53px; width: 317px; padding-left: 10px; margin-right: 10px;" MaxLength="25" placeholder="密码" Text="123456"></asp:TextBox></div><div style="width: 74px; height: 53px; float: left;"><asp:Button ID="btnLogin" runat="server" Text="登陆" OnClick="btnLogin_Click" /></div><%--      <section class="container"><div class="progress"><span class="blue" style="width: 0%;"><span>0%</span></span></div></section>--%></form></div><div style="position: absolute; z-index: -1; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; filter: alpha(opacity=100);"><img id="bgImg" style="margin-left: 0px; visibility: visible; opacity: 1;" /></div></div>
</body>
</html>

View Code

是不是要赞美我一下的设计风格呢！个人设计，希望大家看了可以帮助到大家

下面就是登陆过后的主界面了！哈哈，这是一种小清新的感觉了!你们要喜欢哦！

再来一张吧！就是锁屏的界面了。这是一个小功能！希望大家看了喜欢！

当然我这里所有使用的都是EasyUI的框架！所以希望大家可以好好的学习一下，不要怕懒，有时候不得不逼自己一下，不然你真的不知道自己其实很优秀！

小弟不才，只是放了一下自己的成果！大家如果喜欢可以和我联系！

晒自己做的一个管理系统（清新风格）EasyUI相关推荐

网站留言板防重复留言_如何做一个2000年风格复古的个人网站（3）创建个人小站-主页...
上一章,我们创建了首页. 下面我们准备开始做主页. 先新建一个页面:home.htm 主页相对于展现个性的首页,内容要多很多,那么就要讲究排版了. 当时流程的排版还是用 table,div 大概是 2 ...
用C语言做了一个外卖管理系统
用C语言做了一个外卖管理系统,则希望可以模拟网上订餐,店家工作,专人管理的过程.并实现注册与登录以及基本信息的输出.各位大佬不喜勿喷管理员端可以查看店铺信息,店铺信息修改(分为增删改查),处理申请店 ...
用java编码图书查询系统_用java做的一个图书管理系统的源代码
<用java做的一个图书管理系统的源代码>由会员分享,可在线阅读,更多相关<用java做的一个图书管理系统的源代码(42页珍藏版)>请在人人文库网上搜索. 1.用java做的一 ...
iis10 asp 如何连接mdb_如何做一个2000年风格复古的个人网站（4）留言板保存留言功能...
表设计我们使用 Access 2000 做为我们的数据库.Office 2000 安装过程就不表了. 打开 Access 2000,新建空数据库,存放在 D:websiteguestbook 目录下 ...
怎么用Android做一个信息管理系统,从零开始设计一个管理系统
本文将以介绍一个管理系统设计实现为例,让您了解管理Excel, 并可以使用管理Excel设计出契合实际需求的管理系统. 本次设计目标是设计一个基本的采购销售管理系统: 1.采购管理 2.销售管理 3. ...
基于thinkphp5做的一个物流管理系统
开发环境用的是phpstudy,这个比较适合初学者,这个项目也是我自己自学php和数据库之后尝试做的,总体偏简单前台主页(ui界面用的是bootstrap): 点击在线下单会先跳出登录界面成功登录 ...
“小清新”风格的视觉表现
"小清新",近些年才流行起来的一个新名词,用来描述一种文化现象,定义某一类音乐.文学.摄影作品的风格,也随之衍生成为对爱好这类风格的人的称谓.在平时工作中经常能听到耳熟能详的交谈: ...
portainer忘记用户名密码_【20201122】做个用户管理系统（6）——忘记密码页面、重置密码方式页面的模板制作...
1. 介绍 1.1 介绍今天福哥跟大家完成忘记密码页面和重置密码方式页面的模板的制作,这里面忘记密码和重置密码方式是一个操作流程的前两步,是连续的表里的设计.这种多步骤表单在的设计需要一些技巧的,我 ...
++库照片风格转换风格_怦然心动的小清新风格照片拍摄，这四点很关键
最近一直在学习日系写真拍摄,相信大家从我发的微头条已经早有知晓.这一拍摄题材,是我以前很少去关注的,自从我在网上看到一组印象颇为深刻的日系写真后,被照片里面真实自然的情感表达.纯净温情的画面所触动,让 ...

晒自己做的一个管理系统（清新风格）EasyUI

晒自己做的一个管理系统（清新风格）EasyUI相关推荐

最新文章

热门文章