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

项目虽然结束了，但是接下来的这个项目可就不是我一个人可以搞定的了，太多的未知数（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. Windows 7下安装MongoDB

    1.下载mongodb-win32-x86_64-2008plus-2.6.7-signed.msi(如今最新版本号已经到了3.0) 2.如果为64位操作系统则双击 mongodb-win32-x86 ...

  2. 微软MVC对架构的一点思考

    毕业即将三年,在学校学习.做毕设一直使用拖控件的 Winform\WebForm,工作后公司采用MVC3架构做项目. 下面使用mvc的个人总结 : 1.架构上分层清晰.便于研发,耦合性好 2.缓存机制 ...

  3. 【汇总】iOS开发及Xcode使用中遇到的一些报错问题汇总

    这里整合下在开发过程中遇到过的一些报错问题和解决办法:(今天开始逐渐增加)   Xcode编译错误集锦:http://www.cnblogs.com/ios-wmm/p/3402261.html   ...

  4. 使用wireshark抓取wcf生成的soap消息

    在使用wcf的时候想看下生成的soap的格式是怎样的,就想到了抓包. 平时用惯的抓包工具是需要破解,另外有时会不太好用. 于是就想起来用wireshark. 首先遇到几个问题: 1.wireshart ...

  5. 关于app.config不能即时保存读取的解决方案

    public void saveValue(string Name, string Value) { ConfigurationManager.AppSettings.Set(Name, Value) ...

  6. Query Object--查询对象模式(下)

    回顾 上一篇对模式进行了介绍,并基于ADO.NET进行了实现,虽然现在ORM框架越来越流行,但是很多中小型的公司仍然是使用ADO.NET来进行数据库操作的,随着项目的需求不断增加,业务不断变化,ADO ...

  7. [转]非OpenVZ下利用谷歌TCP-BBR协议单边加速你的VPS

    前段时间谷歌推出了新的 TCP-BBR 开源算法,可以起到单边加速 TCP 连接的效果,也就是不用客户端的配合,用来替代收费的锐速再合适不过,毕竟开源免费.TCP-BBR 的目的是要尽量跑满带宽,并且 ...

  8. [转]Android dex分包方案

    转载自:https://m.oschina.net/blog/308583 当一个app的功能越来越复杂,代码量越来越多,也许有一天便会突然遇到下列现象: 1. 生成的apk在2.3以前的机器无法安装 ...

  9. 解决访问StackOverFlow太慢的问题

    Stackoverflow加载时访问了被屏蔽的站点ajax.googleapis.com,导致加载缓慢,把这个站点加到Hosts里,指向127.0.0.1即可

  10. Spring.Net.FrameworkV3.0 版本发布了，感谢大家的支持

    Spring.Net.FrameworkV3.0 版本发布了,感谢大家的支持. Spring.Net.Framework,基于.NET的快速信息化系统开发.整合框架,为企业或个人在.NET环境下快速开 ...