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

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

    1.查看签名: jarsigner -verify app_signed.apk 查看是否签名,如果已经签名会打印 "jar verified". jarsigner -verif ...

  2. Red Hat dhclient

    如果你是通过dhcp动态获取ip进行上网,我们一般情况下需要对/etc/sysconfig/network-scripts目录下对应的网卡配置进行修改,将BOOTPROTO改为dhcp.更简单的方法是 ...

  3. nlog(n)解动态规划--最长上升子序列(Longest increasing subsequence)

    最长上升子序列LIS问题属于动态规划的初级问题,用纯动态规划的方法来求解的时间复杂度是O(n^2).但是如果加上二叉搜索的方法,那么时间复杂度可以降到nlog(n).  具体分析参考:http://b ...

  4. 关于bootstrapValidator提交问题的解决

    关于bootstrapValidator的AJAX提交有几种方法: 1.form中一定要放一个类型为submit的按钮,然后添加 success.form.bv 事件,如下 on('success.f ...

  5. Android 自定义View实现多行RadioGroup (MultiLineRadioGroup)

    一.项目概况 我们都知道RadioGroup可以实现选择框,但它有一个局限性,由于它是继承自LinearLayout的,所以只能有一个方向,横向或者纵向:但有时候仅一行的RadioGroup并不能满足 ...

  6. BZOJ 1251 序列终结者（Splay）

    题目大意 网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这样的,真是没技术 ...

  7. java基本加密算法

    简单的java加密算法有: BASE64 严格地说,属于编码格式,而非加密算法 MD5(Message Digest algorithm 5,信息摘要算法) SHA(Secure Hash Algor ...

  8. 403 Forbidden client denied by server configuration[apache2, linux]

    在LAMP的配置过程中, 由于APACHE的版本问题, 即使是APACHE2和APACHE2.2也有很大的不同. 一般都有同一个环境配置多个虚拟网站的情况, 如果你在配置过程中遇到APACHE的不同版 ...

  9. 用 .NET Reflector 8 查看 System.Windows.Controls 命名空间下的类

    为了学习自定义控件,就想看看WPF基本元素的代码.使用到工具.NET Reflector. System.Windows.Controls 命名空间在PresentationFramework.dll ...

  10. ios auto layout demystified (一)

    Ambiguous Layout 在开发过程中,你可以通过调用hasAmbiguousLayout 来测试你的view约束是否足够的.这个会返回boolean值.如果有一个不同的frame就会返回ye ...