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              100%;
 17             height: 1200px;
 18             background-color: #483D8B;
 19             position: relative;
 20         }
 21 
 22         #div_2-1 {
 23              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              100%;
 39             height: 700px;
 40             top: 100px;
 41             position: relative;
 42         }
 43 
 44         #div_2-2-1 {
 45              40%;
 46             height: 700px;
 47             left: 30%;
 48             background-color: cadetblue;
 49             position: relative;
 50         }
 51 
 52         #div_2-2-1-1 {
 53              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              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              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              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>密&nbsp;&nbsp;&nbsp;码：</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              100%;
 17             height: 1200px;
 18             background-color: #483D8B;
 19             position: relative;
 20         }
 21 
 22         #div_2-1 {
 23              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              100%;
 39             height: 700px;
 40             top: 50px;
 41             position: relative;
 42         }
 43 
 44         #div_2-2-1 {
 45              40%;
 46             height: 700px;
 47             left: 30%;
 48             background-color: cadetblue;
 49             position: relative;
 50         }
 51 
 52         #div_2-2-1-1 {
 53              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              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              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              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>用&nbsp;&nbsp;户&nbsp;&nbsp;名：</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>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</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>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</span><asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
125                         <br />
126                         <br />
127                         <br />
128                         <span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</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>民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族：</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

效果图

相关阅读:
pytorchdeeplabxception Public 分割模型训练
 浪潮服务器使用远控安装centos图文步骤
 某系统开发全程记录（20220608）
计算机网络协议
 使用ACME工具来生成TSL证书
 数据库日志文件ldf过大解决方案
 20192404 202120222 《网络与系统攻防技术》实验八实验报告
 收缩日志
 .NET Core WebAPI文件下载+断点续传+取消下载
 以管理员身份运行WinForm程序
原文地址：https://www.cnblogs.com/tonyhere/p/5690935.html