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

项目虽然结束了，但是接下来的这个项目可就不是我一个人可以搞定的了，太多的未知数（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. OpenCV 2.4.8组件结构全解析

    转自: http://blog.csdn.net/huang9012/article/details/21811271 之前啃了不少OpenCV的官方文档,发现如果了解了一些OpenCV整体的模块架构 ...

  2. Linux 升级 Python 至 3.x

    https://docs.python.org/3.5/library/json.html 在线手册 (1)下载wget https://www.python.org/ftp/python/3.5.2 ...

  3. System.Net.WebException : The remote server returned an error: (415) UNSUPPORTED MEDIA TYPE

    I am having problems with a bit of code that accesses a restful web service. Running this code, it e ...

  4. Xcode7.x中安装Alcatraz

    将Xcode升级了,发现Alcatraz失效了: xcode7.x安装插件命令:curl -fsSL https://raw.github.com/supermarin/Alcatraz/master ...

  5. is running beyond physical memory limits. Current usage: 2.0 GB of 2 GB physical memory used; 2.6 GB of 40 GB virtual memory used

    昨天使用hadoop跑五一的数据,发现报错: Container [pid=,containerID=container_1453101066555_4130018_01_000067] GB phy ...

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

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

  7. BZOJ 1001 [BeiJing2006] 狼抓兔子（平面图最大流）

    题目大意 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的.而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个网格的地形: ...

  8. php分页类代码带分页样式效果(转)

    php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...

  9. 【转】Oracle RAC 环境下的连接管理

    文章转自:http://www.oracle.com/technetwork/cn/articles/database-performance/oracle-rac-connection-mgmt-1 ...

  10. DB2 v9.1 RACF 瞎学笔记

    一.DB2 RACF control module 定义在prefix.SDSNSAMP(DSNXRXAC)中,查找一下数据集 符合*.SDSNSAMP数据集有两个,我这里使用的DB V9,自然pre ...