晒自己做的一个管理系统（清新风格）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>
是不是要赞美我一下的设计风格呢！个人设计，希望大家看了可以帮助到大家
下面就是登陆过后的主界面了！哈哈，这是一种小清新的感觉了!你们要喜欢哦！
再来一张吧！就是锁屏的界面了。这是一个小功能！希望大家看了喜欢！
当然我这里所有使用的都是EasyUI的框架！所以希望大家可以好好的学习一下，不要怕懒，有时候不得不逼自己一下，不然你真的不知道自己其实很优秀！
小弟不才，只是放了一下自己的成果！大家如果喜欢可以和我联系！
晒自己做的一个管理系统（清新风格）EasyUI的更多相关文章
- 用RecyclerView做一个小清新的Gallery效果 - Ryan Lee的博客
一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...
- 做为一个前端工程师，是往node方面转，还是往HTML5方面转
文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...
- 做了一个sublime text插件
做了一个sublime text插件,可以方便地查看C++/python的调用图.插件的演示视频在这里: http://list.youku.com/albumlist/show?id=2820226 ...
- bootstrap做了一个表格
花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...
- PHP MVC简单介绍，对PHP当前主流的MVC做了一个总结
东抄西抄,对PHP当前主流的MVC做了一个总结PPT. 希望对初学者有点帮助! PHP MVC初步.ppt
- 用MVVM做了一个保存网页的工具-上篇
前言: 你是否有过收藏了别人博客或文章,当想用的时候却找不到?你是否有过收藏了别人博客或文章,却因为没有网络而打不开网页?OK,下面是我做的一个工具,有兴趣的同学们可以download 玩下,哈哈^. ...
- php大力力 [042节] 今天做了一个删除功能
php大力力 [042节] 今天做了一个删除功能 if(isset($_GET['action'])){ if($_GET['action']=="del"){ $sql = &q ...
- 做了一个简易的git 代码自动部署脚本
做了一个简易的git 代码自动部署脚本 http://my.oschina.net/caomenglong/blog/472665 发表于2个月前(2015-06-30 21:08) 阅读(200 ...
- 用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...
随机推荐
- algo_预备
章 C + +程序设计 大家好!现在我们将要开始一个穿越" 数据结构.算法和程序" 这个抽象世界的特殊旅程,以解决现实生活中的许多难题.在程序开发过程中通常需要做到如下两点:一是高 ...
- IOS开发 图形绘制，绘制线条，矩形，和垂直和居中绘制文字
概述 吐槽下IOS下 的图形绘图,代码冗长,不得不自己重新封装方法.整理形成本文. 绘制线 // 绘制直线 + (void)toDrawLineFromX:(CGFloat)x1 Y:(CGFloat ...
- Arcgis10.2 破解注意问题
Arcgis10.2 破解注意问题 2014年11月17日 20:22 按照网上教程直接替换service.txt和arcgis.exe之后 需要重新启动license服务 可是无法启动 解决办法 修 ...
- Quiz（贪心，快速幂乘）
C. Quiz time limit per test 1 second memory limit per test 256 megabytes input standard input output ...
- [原]如何在Android用FFmpeg+SDL2.0解码显示图像
如何在Android上使用FFmpeg解码图像参考文章[原]如何在Android用FFmpeg解码图像 ,如何在Android上使用SDL2.0来显示图像参考[原]零基础学习SDL开发之在Androi ...
- JavaScript进阶内容1：各种对象类型判断
该文章主要用来介绍JavaScript中常用的一些对象检测判断方法,整理资源来自书本和网络,如有错误或说明不详之处,望评论提出,本菜定提名感谢……(本文章知识比较基础,大牛请提些意见再绕道,三克油^_ ...
- java攻城狮之路(Android篇)--MP3 MP4、拍照、国际化、样式主题、图片移动和缩放
一.MP3播放器 查看Android API文档可以看到MediaPlayer状态转换图: 练习: package com.shellway.mp3player; import java.io.Fil ...
- 调皮的MySQL服务 请你不要再躲猫猫
问题说明 Win10企业版 64位: MySQL5.6 64位: 临时在本机部署一套系统,需要用到MySQL,发现Windows服务下居然找不到MySQL这个服务,原先配置好的GUI以及应用程序都连不 ...
- 移动安全时代，如何保护你的app
Android系统的安全性历来备受诟病,在强大的反编译工具下,APK中的代码逻辑一览无余:重打包技术使得各种盗版软件层出不穷,充斥着Android市场,特别是对于金融.电商.游戏等产品的盗版应用,严重 ...
- 发现新大陆-JMX
今天接触到这个东西,觉得好有趣,可以用很多第三方的显示层jar包直接在UI界面上操作指定的java对象,网上将这个东西的也挺多的,我个人觉得这个比webServer还强大了.webserver只是公布 ...