动手篇：简易的首页登陆界面

HTML：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>学习</title>
 6     <link href="layer/layer.css" rel="stylesheet" />
 7     <link href="css/demo.css" rel="stylesheet" />
 8     <script src="js/jquery-2.0.0.min.js"></script>
 9     <script src="layer/layer.js"></script>
10     <script src="js/demo.js"></script>
11 </head>
12 <body>
13     <div id="header">
14         <div id="header-con">
15             <div><a href="javascript:;" id="blogin" onclick="ShowLoginBox();">登录</a></div>
16             <div><a href="javascript:;" id="breg" onclick="ShowRegBox();">注册</a></div>
17             </div>
18     </div>
19 
20     <div id="loginBox">
21         <div class="login-item"><input type="text" id="txtUserName" placeholder="请输入用户名" /></div>
22         <div class="login-item"><input type="password" id="txtPwd" placeholder="请输入密码" /></div>
23         <div class="login-item"><a href="javascript:;" onclick="Login();">登录</a></div>
24     </div>
25 
26     <div id="regbox">
27         <div class="login-item"><input type="text" id="txtRegUserName" placeholder="请输入用户名" /></div>
28         <div class="login-item"><input type="password" id="txtRegPwd" placeholder="请输入密码" /></div>
29         <div class="login-item"><input type="text" id="txtRegQQ" placeholder="请输入QQ号" /></div>
30         <div class="login-item"><input type="text" id="txtRegEmail" placeholder="请输入邮箱" /></div>
31         <div class="login-item"><input type="text" id="txtRegTel" placeholder="请输入手机" /></div>
32         <div class="login-item"><a href="javascript:;" onclick="Reg();">注册</a></div>
33     </div>
34 
35     <div id="dimgbox">
36         <div></div>
37     </div>
38 </body>
39 </html>

CSS：

 1 *{
 2     padding:0px;
 3     margin:0px;
 4     font-family:"微软雅黑"；
 5 }
 6 #header{
 7     width:100%;
 8     height:40px;
 9     background-color:#000;
10 }
11 #header-con{
12     width:900px;
13     height:40px;
14     border:solid 1px;
15     margin:0 auto;
16 }
17 #header-con div{
18     float:right;
19     line-height:40px;
20     margin-left:10px;
21 }
22 a{
23     text-decoration:none;
24 }
25 #header-con div a{
26     color:#fff;
27 }
28 .login-item input{
29     width:350px;
30     height:40px;
31 }
32 .login-item a{
33     display:block;
34     width:354px;
35     height:50px;
36     background-color:#5fd2dd;
37     text-align:center;
38     line-height:50px;
39     color:#fff;
40     font-size:30px;
41 }
42 
43 .login-item{
44     margin-top:25px;
45     margin-left:20px;
46 }
47 
48 #loginBox,#regbox{
49     display:none;
50 }

JS：

function Login()
{
    var username = $("#txtUserName").val();
    var pwd = $.md5($.trim($("#txtPwd").val()));
    if (username == "" || pwd == "")
    {
        layer.alert("用户名密码不能为空！", {title:"提示",icon:5});
    }
    else
    {
        $.post("/demo.ashx", { "username": username, "pwd": pwd ,"cmd":"login"}, function (data) {
            if(data=="登录成功")
            {
                layer.alert("登录成功", {
                    title: "提示",
                    icon:6
                });
            }
            else
            {
                //layer.msg
                layer.alert("用户名或者密码错误", {
                    title: "提示",
                    icon: 5
                });
            }
        });
    }
}

string username = context.Request.Form["username"];
string pwd = context.Request.Form["pwd"];
string strSql = string.Format("select * from Login where username='{0}' and pwd='{1}'", username, pwd);
if (SqlHelper.Exists(strSql))
{
　　context.Response.Write("登录成功"); 
}
else
{
　　context.Response.Write("登录失败"); 
}

连接字符串：

<connectionStrings>
    <add name="con" connectionString="Database=MyStudy;Server=192.168.163.107;Integrated Security=false;Uid=sa;Password=1234;" providerName="System.Data.SqlClient"/>
</connectionStrings>

需要引入SqlHelper；layer；jquery