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

项目虽然结束了，但是接下来的这个项目可就不是我一个人可以搞定的了，太多的未知数（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. ASP.NET MVC 5 局部视图不支持异步问题

    [ChildActionOnly] public async Task<ActionResult> TopLeftFlowPartialView() { var user = Sessio ...

  2. java生成解析xml的另外两种方法Xstream

    Xstream生成和解析xm和JAXB生成和解析xml的方法. 一,Xstream Xstream非jdk自带的,需要到入Xstream-1.4.3.jar和xpp3_min-1.1.4.jar 1. ...

  3. 【Linux】——sleep无法正常休眠

    最近在开发项目的时候遇到一个问题,当使用 sleep(2) 的时候,程序居然没有按照指定的时间去休眠,但是连续执行两次 sleep(2) 的时候,程序可以正常的休眠 2 秒.真是见鬼了.最后查看了以下 ...

  4. [iOS Xcode8]上传AppStore 无法构建版本 没有➕号

    最近iOS10出来了 Xcode也跟着升级到了8 想着App做个更新 于是修改好了代码打算上传新包 ,无奈总是发现构建不了新版本 经过各种蛋疼的查找.我列一下我的经验 1.如果是收费的App,那么是要 ...

  5. C++虚函数与虚函数表

    多态性可分为两类:静态多态和动态多态.函数重载和运算符重载实现的多态属于静态多态,动态多态性是通过虚函数实现的. 每个含有虚函数的类有一张虚函数表(vtbl),表中每一项是一个虚函数的地址, 也就是说 ...

  6. android中的提示信息显示方法（toast应用）

    android中的提示信息显示方法(toast应用) (2011-10-17 11:02:06) 转载▼ 标签: android toast 杂谈 分类: Android android中toast的 ...

  7. 【原】SQL ROW_NUMBER() OVER

    语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) SELECT ROW_NUMBER() OVER(ORDER BY CASE Col ...

  8. 理解RxJava:(四)Reactive Android

    在前三部分,我在通用层面介绍了RxJava的工作原理.但是作为一个Android开发者,如何在工作中使用它呢?下面是一些给Android开发者的RxJava的具体应用. RxAndroid RxAnd ...

  9. LInux : du命令

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...

  10. 【开源】EFW框架系列文章索引

    开源轻量级.Net框架EnterpriseFrameWork详解 ——自己动手写框架 ——适合中小企业的开发框架 ——Ajax+JqueryEasyUI+NotNetBar+MVC+WebServic ...