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

项目虽然结束了，但是接下来的这个项目可就不是我一个人可以搞定的了，太多的未知数（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的更多相关文章

  1. 用RecyclerView做一个小清新的Gallery效果 - Ryan Lee的博客

    一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...

  2. 做为一个前端工程师，是往node方面转，还是往HTML5方面转

    文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...

  3. 做了一个sublime text插件

    做了一个sublime text插件,可以方便地查看C++/python的调用图.插件的演示视频在这里: http://list.youku.com/albumlist/show?id=2820226 ...

  4. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  5. PHP MVC简单介绍，对PHP当前主流的MVC做了一个总结

    东抄西抄,对PHP当前主流的MVC做了一个总结PPT. 希望对初学者有点帮助! PHP MVC初步.ppt

  6. 用MVVM做了一个保存网页的工具-上篇

    前言: 你是否有过收藏了别人博客或文章,当想用的时候却找不到?你是否有过收藏了别人博客或文章,却因为没有网络而打不开网页?OK,下面是我做的一个工具,有兴趣的同学们可以download 玩下,哈哈^. ...

  7. php大力力 [042节] 今天做了一个删除功能

    php大力力 [042节] 今天做了一个删除功能 if(isset($_GET['action'])){ if($_GET['action']=="del"){ $sql = &q ...

  8. 做了一个简易的git 代码自动部署脚本

    做了一个简易的git 代码自动部署脚本 http://my.oschina.net/caomenglong/blog/472665 发表于2个月前(2015-06-30 21:08)   阅读(200 ...

  9. 用原生javascript做的一个打地鼠的小游戏

    学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...

随机推荐

  1. DRY原则和Shy原则

    保障可维护性的主要诀窍是遵循DRY原则和Shy原则. 在一个系统的整个生命周期里,理解和改动这类维护工作的比例一般非常之高.为了维护的方便,要尽量将系统划分为可以独立理解与改动的模块.这就要在设计的时 ...

  2. 301 redirect Domain Name using global.asax

    void Application_BeginRequest(object sender, EventArgs e) { if (HttpContext.Current.Request.Url.ToSt ...

  3. System.Diagnostics.Stopwatch

    System.Diagnostics.Stopwatch 注意:此类在 .NET Framework 2.0 版中是新增的.MSDN Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量 ...

  4. HTTP协议学习

    面试过程中又一个常见的问题,http协议,因为做服务器开发如果用http协议的话,现在各种开源软件都封装好了,python中只需要简单的继承定义好的类,重写get或者post等方法,几行代码就可以搭建 ...

  5. Text3d

    有小bug,先弄这么多吧,晚了,碎觉了 ---------------------------------

  6. Fabric自动部署太方便了

    之前不知道有Fabric工具,每次发布程序到服务器上的时候,基本流程:本地打包程序 -> Ftp上传 -> 停服务器Apache -> 覆盖文件 -> 启动Apache, 非常 ...

  7. android SDK Manager 上载失败

    android SDK Manager 下载失败如题,利用android SDK Manager 无法下载各个版本的SDK,是最近无法连接上谷歌的服务器吗?我用了网上说的在C:\WINDOWS\sys ...

  8. [转]使用ant让Android自动打包的build.xml,自动生成签名的apk文件(支持android4.0以上的版本)

    在android4.0以后的sdk里那个脚本就失效了,主要是因为 apkbuilder这个程序不见了: 人家sdk升级,我们的脚本也要跟上趟,修改一下喽. 上网一查,大家的文章还停留在我去年的脚本程度 ...

  9. __get,__set

    __get,__set 为php的magic方法,在类中定义为 public 类型. class UserModel { private $id; public $name; public funct ...

  10. ASP.NET绑定控件语法

    1.DropDownList 前端代码aspx: <asp:DropDownList ID="ddl_meetingroom" runat="server" ...