C#实现简单网页

⑴ 创建ASP.NET网站

新建MyWebSite网站，添加一个WebForm1网页，其中包含一个文本框TextBox1一个按钮Button1（计算）和一个标签Label1（""）。在文本框中输入一个数，当点击“计算”按钮时，在标签中显示此数的平方根。

WebForm1.aspx文件内容如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="shiyan1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .TextBox1 {
            width: 20px;
            height: 5px;
            right: 50%;
            left: 50%;
            margin-top: 20px;
            margin-right: 400px;
        }
        .Button1
        {
            width: 10px;
            height: 4px;
            right: 500px;
            left: 500px;
        }
    </style>
</head>
<body class="TextBox1">
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" ontextchanged="TextBox1_TextChanged"></asp:TextBox>
    </div>
    <p>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="计算" 
            Width="73px" Height="29px" />
    </p>
    </form>
</body>
</html>

WebForm1.aspx.cs文件如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace shiyan1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Button1_Click(object sender, EventArgs e)
        {
            double num = Convert.ToDouble(TextBox1.Text);
            Label1.Text = Math.Sqrt(num).ToString();
        } 
    }
}

实现数据的前后台调用

实现样式如下:

⑵ DIV/CSS布局

使用HTML标签设计如下所示表单

Webform1.aspx文件：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="shiyan112.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>实验1</title>
      <style type="text/css">
        *{
            left: 50px;
            padding: 0px;
            margin: 0px;
            border: 1px solid #FFFFFF;
        }
        #div0
        {
            left: 50px;
            width: 600px;
            margin: auto;
            border-style: solid;
            border-width: 1px;
        }
        fieldset
        {
            border: 1px solid #000000;
            margin: -15px 0px 0px 0px;
            width: 500px;
            height: 362px;
            padding-left: 150px;
        }
        label
        {
            font-weight: bold;
            font-size: 12px;
            height: 19px;
            float: none;
            margin-left: 0px;
            text-align: right;
        }
        #name01, #pass01, #pass02, #zjhm, #dh
        {
            border: 1px solid #3ca1af;
            height: 19px;
            width: 130px;
        }
        .juli
        {
            line-height: 21px;
            width: 130px;
            float: left;
            display: block;
            padding-right: 0px;
            height: 19px;
            clip: rect(auto, auto, auto, 0px);
        }
        #button
        {
            margin: 0px 0px 0px 150px;
            font-size: 12px;
            font-family: 黑体;
            font-weight: bold;
            padding: 0px;
            height: 16px;
            width: 48px;
            float: none;
        }
        #zjzl
        {
            width: 140px;
            height: 22px;
        }
        a
        {
            font-size: 12px;
        }
        .c1
        {
            border: 1px solid #00FFFF;
            padding: 0px;
            width: 80px;
            height: 20px;
            margin-left: 424px;
            margin-top: 50px;
            font-size: 14px;
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
  <form id="form1" runat="server">
    &nbsp;<input  type="button" class="c1" value="用户注册" onclick="return button_onclick()" />
    <div id="div0">
        <fieldset >           
            <br />
            <label for="name01" class="juli">用户名：</label>
            <input type="text" id="name01" />
            <br />
            <br />
            <label for="pass01" class="juli">密码：</label>
            <input type="password" id="pass01" />
            <br />
            <br />
            <label for="pass02" class="juli"> 确认密码：</label>
            <input type="password" id="pass02" />
            <br />
            <br />
            <label for="zjzl" class="juli">密码保护问题：</label>
                 <select id="zjzl" onclick="return zjzl_onclick()">
                    <option id="zjzl1">请选择密码提示问题</option>
                    <option id="zjzl2">问题一</option>
                 </select>
            <br />
            <br />
            <label for="zjhm" class="juli">密码保护问题的答案:</label>
            <input type="text" id="zjhm" />
            <br />
            <br />
            <label class="juli">性别：</label>
            <input type="radio" name="dx" value="单选" id="dx_0" />
            <label for="dx_0">男</label>
            <input type="radio" name="dx" value="单选" id="dx_1" />       
            <label for="dx_1">女</label>
            <br />
            <br />
            <label class="juli"> 同意服务条款：</label>
            <input type="checkbox" name="vehicle" value="Bike" /><a href="#">查看服务条款？</a>
            <br />
            <br />
            <input type="button" id="button" value="提 交"  /></fieldset>    
    </div>
    </form>
</body>
</html>

小Tips：

如何给前端页面添加样式:

点击设计 -- > 选择格式  --- 》新建样式

（3）简单表单设计

实现如下界面;

ThisPage.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div0">
       <fieldset>
           <legend>填写信息</legend>
           <br />
           <label for="name01">用户名:</label>
           <input type="text" id="name01" />
           <br /><br />
           <label for="pass01">密码:</label>
           <input type="password" id="pass01" />
           <br /><br />
           <label for="pass02">确认密码:</label>
           <input type="password" id="pass02" />
           <br /><br />
           <label for="sfz">证件种类:</label>
           <select id="sfz">
              <option id="sfz1">身份证</option>
              <option id="sfz2">学生证</option>
           </select>
           <label for="number">证件号码:</label>
           <input type="text" id="number" />
           <br /><br />
           <label for="tel">联系方式:</label>
           <input type="radio" name="dx" value="单选" id="dx_0" />
           <label for="dx_0">手机</label>
           <input type="radio" name="dx" value="单选" id="dx_1" />
           <label for="dx_1">座机</label>
           <input type="text" id="tel" />
           <br /><br />
           <input type="button" id="button" value="确定" />
       </fieldset>

    </div>
    </form>
</body>
</html>