ASP.NET 小练习--主界面-注册-
前台布局
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title></title> 9 <style type="text/css"> 10 * { 11 margin: 0px; 12 padding: 0px; 13 } 14 15 #div_1 { 16 width: 100%; 17 height: 1200px; 18 background-color: #483D8B; 19 position: relative; 20 } 21 22 #div_2-1 { 23 width: 100%; 24 height: 100px; 25 text-align: center; 26 position: relative; 27 } 28 29 #div_2-1 span { 30 top: 70px; 31 font-size: 40px; 32 font-family: 微软雅黑; 33 color: white; 34 position: relative; 35 } 36 37 #div_2-2 { 38 width: 100%; 39 height: 700px; 40 top: 100px; 41 position: relative; 42 } 43 44 #div_2-2-1 { 45 width: 40%; 46 height: 700px; 47 left: 30%; 48 background-color: cadetblue; 49 position: relative; 50 } 51 52 #div_2-2-1-1 { 53 width: 100%; 54 height: 150px; 55 position: relative; 56 text-align: center; 57 } 58 59 #div_2-2-1-1 span { 60 top: 30px; 61 font-size: 40px; 62 font-family: 微软雅黑; 63 position: relative; 64 } 65 66 #div_2-2-1-2 { 67 width: 100%; 68 height: 400px; 69 top: 100px; 70 position: relative; 71 text-align: center; 72 } 73 74 #div_2-2-1-2 span { 75 font-family: 微软雅黑; 76 font-size: 20px; 77 } 78 79 #div_2-2-1-3 { 80 width: 100%; 81 height: 150px; 82 text-align: center; 83 position: relative; 84 } 85 86 #button1 { 87 font-family: 微软雅黑; 88 font-size: 40px; 89 top: 50px; 90 background-color: DarkOrange; 91 color: white; 92 position: relative; 93 border: 0px; 94 } 95 96 #div_2-3 { 97 width: 100%; 98 height: 200px; 99 top: 150px; 100 position: relative; 101 text-align: center; 102 } 103 </style> 104 </head> 105 <body> 106 <form id="form1" runat="server"> 107 <div id="div_1"> 108 <div id="div_2-1"> 109 <span>战网</span> 110 </div> 111 <div id="div_2-2"> 112 <div id="div_2-2-1"> 113 <div id="div_2-2-1-1"><span>用户登录</span></div> 114 <div id="div_2-2-1-2"> 115 <span>用户名：</span><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Label ID="Label1" runat="server" Text=""></asp:Label><br /> 116 <br /> 117 <br /> 118 <br /> 119 <span>密 码：</span><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 120 </div> 121 <div id="div_2-2-1-3"> 122 <asp:Button ID="Button1" runat="server" Text="登录" OnClick="Button1_Click"></asp:Button> 123 </div> 124 </div> 125 </div> 126 <div id="div_2-3"> 127 <span>战网游戏官方版权所有，侵权必究！</span> 128 </div> 129 </div> 130 </form> 131 </body> 132 </html>
后台代码
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 public partial class Default1 : System.Web.UI.Page 9 { 10 protected void Page_Load(object sender, EventArgs e) 11 { 12 13 } 14 protected void Button1_Click(object sender, EventArgs e) 15 { 16 Label1.Text = "用户名错误"; 17 } 18 }
效果图
注册
前台布局
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title></title> 9 <style type="text/css"> 10 * { 11 margin: 0px; 12 padding: 0px; 13 } 14 15 #div_1 { 16 width: 100%; 17 height: 1200px; 18 background-color: #483D8B; 19 position: relative; 20 } 21 22 #div_2-1 { 23 width: 100%; 24 height: 100px; 25 text-align: center; 26 position: relative; 27 } 28 29 #div_2-1 span { 30 top: 70px; 31 font-size: 40px; 32 font-family: 微软雅黑; 33 color: white; 34 position: relative; 35 } 36 37 #div_2-2 { 38 width: 100%; 39 height: 700px; 40 top: 50px; 41 position: relative; 42 } 43 44 #div_2-2-1 { 45 width: 40%; 46 height: 700px; 47 left: 30%; 48 background-color: cadetblue; 49 position: relative; 50 } 51 52 #div_2-2-1-1 { 53 width: 100%; 54 height: 100px; 55 position: relative; 56 text-align: center; 57 } 58 59 #div_2-2-1-1 span { 60 font-size: 40px; 61 font-family: 微软雅黑; 62 position: relative; 63 } 64 65 #div_2-2-1-2 { 66 width: 100%; 67 height: 500px; 68 position: relative; 69 left: 150px; 70 } 71 72 #div_2-2-1-2 span { 73 font-family: 微软雅黑; 74 font-size: 20px; 75 } 76 77 #div_2-2-1-3 { 78 width: 100%; 79 height: 100px; 80 text-align: center; 81 position: relative; 82 } 83 84 #div_2-2-1-3 button1 { 85 font-family: 微软雅黑; 86 font-size: 40px; 87 top: 50px; 88 background-color: DarkOrange; 89 color: white; 90 position: relative; 91 } 92 93 #div_2-3 { 94 width: 100%; 95 height: 200px; 96 top: 200px; 97 position: relative; 98 text-align: center; 99 } 100 </style> 101 </head> 102 <body> 103 <form id="form1" runat="server"> 104 <div id="div_1"> 105 <div id="div_2-1"> 106 <span>战网</span> 107 </div> 108 <div id="div_2-2"> 109 <div id="div_2-2-1"> 110 <div id="div_2-2-1-1"><span>用户注册</span></div> 111 <div id="div_2-2-1-2"> 112 <span>用 户 名：</span><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Label ID="Label1" runat="server" Text=""></asp:Label> 113 <br /> 114 <br /> 115 <br /> 116 <span>密 码：</span><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 117 <br /> 118 <br /> 119 <br /> 120 <span>重复密码：</span><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 121 <br /> 122 <br /> 123 <br /> 124 <span>昵 称：</span><asp:TextBox ID="TextBox4" runat="server"></asp:TextBox> 125 <br /> 126 <br /> 127 <br /> 128 <span>性 别：</span><asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow"> 129 <asp:ListItem Selected="True">男</asp:ListItem> 130 <asp:ListItem>女</asp:ListItem> 131 </asp:RadioButtonList> 132 <br /> 133 <br /> 134 <br /> 135 <span>出生年月：</span><asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>年<asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>月<asp:DropDownList ID="DropDownList3" runat="server"></asp:DropDownList>日 136 <br /> 137 <br /> 138 <br /> 139 <span>民 族：</span><asp:DropDownList ID="DropDownList4" runat="server"></asp:DropDownList> 140 </div> 141 <div id="div_2-2-1-3"> 142 <asp:Button ID="Button1" runat="server" Text="注 册"></asp:Button> <asp:Button ID="Button2" runat="server" Text="重 置" /> 143 </div> 144 </div> 145 </div> 146 <div id="div_2-3"> 147 <span>战网游戏官方版权所有，侵权必究！</span> 148 </div> 149 </div> 150 </form> 151 </body> 152 </html>
效果图
