最近項目結束了，現在也要自己總結一下自己的成果了，總結會加深自己對項目的印象的。這里我就先曬一些作品圖片了，希望大家看了會贊美一個！
項目雖然結束了，但是接下來的這個項目可就不是我一個人可以搞定的了，太多的未知數（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的框架！所以希望大家可以好好的學習一下，不要怕懶，有時候不得不逼自己一下，不然你真的不知道自己其實很優秀！
小弟不才，只是放了一下自己的成果！大家如果喜歡可以和我聯系！