ASP.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程

从我们第1节创建的模板创建一个新的web页面，对页面进行布局，如图1.

 

asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="single_div">
        <fieldset>
            <fieldset>
                <div class="section_title">
                    <p>
                        请注意：带有*的项目必须填写。</p>
                    <div>
                                    </div>
                </div>
                <legend>请选择您的用户名</legend>
                <table class="table">
                    <tr>
                        <th class="fleld_lable">
                            <label>
                                <i>*</i>用户名：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxUserName" runat="server" CssClass="general_input"></asp:TextBox>
                        </td>
                        <td class="desc">
                            ●由<em>字母a～z</em>(不区分大小写)、<em>数字0～9</em>、<em>点</em>、<em>减号</em>或<em>下划线</em>组成<br />
                            ●只能以<em>数字</em>或<em>字母</em>开头和结尾，例如：beijing.2008<br />
                            ●用户名长度为<em>4～18</em>个字符
                            </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend>请填写安全设置<span>(&nbsp;以下信息对保护您的帐号安全极为重要，请您慎重填写并牢记&nbsp;)</span></legend>
                <table class="table">
                    <tr>
                        <th class="fleld_lable">
                            <label for="password">
                                <i>*</i>登录密码：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxPassword" runat="server" CssClass="general_input" TextMode="Password"></asp:TextBox>
                        </td>
                        <td class="desc">
                            密码长度6～16位，字母区分大小写
                            </td>
                    </tr>
                    <tr>
                        <th class="fleld_lable">
                            <label for="repassword">
                                <i>*</i>重复登录密码：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxRePassword" runat="server" CssClass="general_input" TextMode="Password"></asp:TextBox>
                        </td>
                        <td class="desc">
                            &nbsp;</td>
                    </tr>
                </table>
                <div class="hr">
                </div>
                <table class="table">
                    <tr>
                        <th class="fleld_lable">
                            <label for="question">
                                密码保护问题：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:DropDownList ID="DropDownList1" runat="server" Width="191px">
                                <asp:ListItem>我就读的第一所学校的名称？</asp:ListItem>
                                <asp:ListItem>我最喜欢的休闲运动是什么？</asp:ListItem>
                                <asp:ListItem>我最喜欢的运动员是谁？</asp:ListItem>
                                <asp:ListItem>我最喜欢的物品的名称？</asp:ListItem>
                            </asp:DropDownList>
                        </td>
                        <td rowspan="2" class="desc">
                            答案长度6～30位，字母区分大小写，一个汉字占两位。用于修复帐号密码
                        </td>
                    </tr>
                    <tr>
                        <th class="fleld_lable">
                            <label for="answer">
                                您的答案：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxAnswer" runat="server" CssClass="general_input"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <div class="hr">
                </div>
                <table class="table">
                    <tr>
                        <th class="fleld_lable">
                            <label>
                                <i>*</i>出生日期：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxYear" runat="server" MaxLength="4" Width="40px"></asp:TextBox><label
                                for="year">年</label>
                            <asp:DropDownList ID="DropDownListMonth" runat="server">
                                <asp:ListItem>01</asp:ListItem>
                                <asp:ListItem>02</asp:ListItem>
                                <asp:ListItem>03</asp:ListItem>
                                <asp:ListItem>04</asp:ListItem>
                                <asp:ListItem>05</asp:ListItem>
                                <asp:ListItem>06</asp:ListItem>
                                <asp:ListItem>07</asp:ListItem>
                                <asp:ListItem>08</asp:ListItem>
                                <asp:ListItem>09</asp:ListItem>
                                <asp:ListItem>10</asp:ListItem>
                                <asp:ListItem>11</asp:ListItem>
                                <asp:ListItem>12</asp:ListItem>
                            </asp:DropDownList>
                            <label>
                                月</label>
                            <asp:DropDownList ID="DropDownListDay" runat="server">
                                <asp:ListItem>01</asp:ListItem>
                                <asp:ListItem>02</asp:ListItem>
                                <asp:ListItem>03</asp:ListItem>
                                <asp:ListItem>04</asp:ListItem>
                                <asp:ListItem>05</asp:ListItem>
                                <asp:ListItem>06</asp:ListItem>
                                <asp:ListItem>07</asp:ListItem>
                                <asp:ListItem>08</asp:ListItem>
                                <asp:ListItem>09</asp:ListItem>
                                <asp:ListItem>10</asp:ListItem>
                                <asp:ListItem>11</asp:ListItem>
                                <asp:ListItem>12</asp:ListItem>
                                <asp:ListItem>13</asp:ListItem>
                                <asp:ListItem>14</asp:ListItem>
                                <asp:ListItem>15</asp:ListItem>
                                <asp:ListItem>16</asp:ListItem>
                                <asp:ListItem>17</asp:ListItem>
                                <asp:ListItem>18</asp:ListItem>
                                <asp:ListItem>19</asp:ListItem>
                                <asp:ListItem>20</asp:ListItem>
                                <asp:ListItem>21</asp:ListItem>
                                <asp:ListItem>22</asp:ListItem>
                                <asp:ListItem>23</asp:ListItem>
                                <asp:ListItem>24</asp:ListItem>
                                <asp:ListItem>25</asp:ListItem>
                                <asp:ListItem>26</asp:ListItem>
                                <asp:ListItem>27</asp:ListItem>
                                <asp:ListItem>28</asp:ListItem>
                                <asp:ListItem>29</asp:ListItem>
                                <asp:ListItem>30</asp:ListItem>
                                <asp:ListItem>31</asp:ListItem>
                            </asp:DropDownList>
                            <label for="day">
                                日</label>
                        </td>
                        <td class="desc">
                            <span>用于修复帐号密码，请填写您的真实生日</span>
                        </td>
                    </tr>
                    <tr>
                        <th class="fleld_lable">
                            <label>
                                <i>*</i>性别：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:RadioButtonList ID="RadioButtonListSex" runat="server" RepeatColumns="2">
                                <asp:ListItem Value="0">男</asp:ListItem>
                                <asp:ListItem Value="1">女</asp:ListItem>
                            </asp:RadioButtonList>
                        </td>
                    </tr>
                    <tr>
                        <th class="fleld_lable">
                            <label for="firstname">
                                真实姓名：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxRealName" runat="server" CssClass="general_input"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <div class="hr">
                </div>
                <table class="table">
                    <tr>
                        <th class="fleld_lable">
                            <label for="mail">
                                <i>*</i>邮箱：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxMail" runat="server" CssClass="general_input"></asp:TextBox>
                        </td>
                        <td class="desc">
                            填写、验证保密邮箱，安全有保障
                            </td>
                    </tr>
                </table>
                <div class="hr">
                </div>
                <table>
                    <tr>
                        <th class="fleld_lable">
                            <i>*</i>
                        </th>
                        <td>
                            <asp:CheckBox ID="CheckBoxAgree" runat="server" />
                            我已看过并同意《<a href="#" target="_blank">服务条款</a>》<br />
                            <font size="2"><span></span></font>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <div class="button">
                &nbsp;<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="注册帐号" />
            </div>
        </fieldset>
    </div>
</asp:Content>

CSS代码：

body
{}{
}
/**//*master*/
.page
{}{
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    position: fixed;
    font-size: 9pt;
}
.header_div
{}{
    clear: both;
    margin: auto;
    width: 1000px;
    height: 90px;
}
.mybr
{}{
    height: 10px;
}
.footer_br
{}{
    height:20px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #CCFFCC;
}
.footer
{}{
    float: right;
    text-align: right;
    font-size: 14px;
    color: #8B8B8B;
    margin-right: 100px;
}
.footerdiv
{}{
    width: 980px;
    padding-right: 10px;
}
.mainbody
{}{
}
.pagebody
{}{
}
/**//*menu*/
.mainmenu
{}{
    background: #e5ecf9;
    margin: auto auto 20px;
    width: 975px;
    border-bottom: #2652a4 0px solid;
    height: 26px;
}

.menu_select_box
{}{
    border-right: red 0px solid;
    border-top: red 0px solid;
    background: none transparent scroll repeat 0% 0%;
    border-left: red 0px solid;
    width: 180px;
    border-bottom: red 0px solid;
}
.menu_select
{}{
    border-right: #2652a4 1px solid;
    border-top: #2652a4 1px solid;
    padding-left: 0px !important;
    font-size: 14px;
    background: white;
    left: 100px;
    border-left: #2652a4 1px solid;
    width: 70px !important;
    color: #2652a4;
    line-height: 25px;
    border-bottom: white 0px solid;
    position: relative;
    top: 1px;
    height: 25px;
    text-align: center;
}
.menu_link
{}{
    font-size: 14px;
    background: none transparent scroll repeat 0% 0%;
    float: right;
    width: 780px;
    color: #9bc9df;
    line-height: 25px;
    height: 25px;
}
#wrap
{}{
    border-right: black 0px solid;
    border-top: black 0px solid;
    margin: 0px auto;
    overflow: hidden;
    border-left: black 0px solid;
    width: 1000px;
    border-bottom: black 0px solid;
}
#main
{}{
    margin: 0px auto;
    width: 1000px;
}
#header
{}{
    text-align: left;
}
#sideleft
{}{
    background: #fff;
    float: left;
    overflow: hidden;
    width: 30%;
    padding-left: 10px;
    text-align: left;
}
#sideright
{}{
    float: right;
    width: 68%;
    text-align: left;
    padding-right: 10px;
}
#sideleft
{}{
    margin-bottom: -32767px !important;
    padding-bottom: 32767px !important;
}
#sideright
{}{
    margin-bottom: -32767px !important;
    padding-bottom: 32767px !important;
}

#navlist_main
{}{
    padding-right: 2px;
    padding-left: 2px;
    font-size: 14px;
    padding-bottom: 1px !important;
    padding-top: 3px !important;
    border-bottom: #787888 1px solid;
}
#navlist_main LI
{}{
    display: inline;
    margin: 0px;
    list-style-type: none;
}
#navlist_main LI A
{}{
    padding-right: 9px;
    padding-left: 9px;
    font-size: 14px;
    padding-bottom: 3px;
    margin-left: 1px;
    padding-top: 5px;
    letter-spacing: 1px;
    text-decoration: none;
    border-bottom-style: none;
}
#navlist_main LI A:link
{}{
    color: #075db3;
}
#navlist_main LI A:visited
{}{
    color: #075db3;
}
#navlist_main LI A:hover
{}{
    color: #ff6600;
}
#navlist_main LI A.current
{}{
    border-right: #787888 1px solid;
    border-top: #787888 1px solid;
    font-weight: bold;
    background: #ffffff;
    margin-left: 6px;
    border-left: #787888 1px solid;
    color: #666677;
    margin-right: 10px;
    border-bottom: white 1px solid;
    letter-spacing: 0px;
}
/**//*endmenu*/
/**//*注册页*/
.section_title
{}{
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
}
.single_div
{}{
    margin-left: auto;
    margin-right: auto;
    width: 730px;
}
.fleld_lable
{}{
    vertical-align: top;
    width: 200px;
    text-align: right;
}
.desc
{}{
    background-color: #DCE4FA;
}
.fleld_input
{}{
    vertical-align: top;
    width: 200px;
}
.general_input
{}{
    width: 120px;
}
.button
{}{
    text-align: center;
}
.hr
{}{
    height: 10px;
    border-bottom: #787888 1px solid;
    border-bottom-color: #DCE4FA;
}
.table
{}{
    width:100%;
}

(责任编辑：admin)