C#实现简单网页

太过爱你忘了你带给我的痛 2022-02-22 02:52 463阅读 0赞

⑴ 创建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();
            } 
        }
    }

实现数据的前后台调用

实现样式如下:

![20190408204729424.png][]

⑵ DIV/CSS布局

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70][]

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">
         <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：

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 1][]

（3）简单表单设计

实现如下界面;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 2][]

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>

[20190408204729424.png]: /images/20220222/2d4dfd4cae8146ff8b9c54a3ff9c2da1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70]: /images/20220222/2d6440c4ef3a40f4ba4fc41d772a1d4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 1]: /images/20220222/a7a719dbb56145358efcc727d53bf676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 2]: /images/20220222/3e98d4b8508e468780a91811970f6786.png