C#基本控件

   通过训练,练习C#基本控件的使用、table实现页面布局、 利用div实现页面布局。

1.      利用table实现页面布局

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


<!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></title>

    <style type="text/css">

        .auto-style1 {

            width: 100%;

        }


        .auto-style2 {

        }

    </style>

</head>

<body>


    <form id="form1" runat="server">

        <table class="auto-style1">

            <tr>

                <td class="auto-style2" rowspan="2" style="width: 100%">

                    <asp:Image ID="imgLogo" runat="server" ImageUrl="~/Ex2/Images/logo.gif" />

                </td>

                <td class="auto-style2" style="text-align: center; background-color: #99CCFF;">

                    <asp:LinkButton ID="lnkbtnDefault" runat="server" >首页</asp:LinkButton>

                </td>

                <td class="auto-style2" style="text-align: center; background-color: #99CCFF;">

                    <asp:LinkButton ID="lnkbtnReset" runat="server" >个性重置</asp:LinkButton>

                </td>

                <td class="auto-style2" style="text-align: center; background-color: #99CCFF;">

                    <asp:LinkButton ID="lnkbtnRegister" runat="server" >注册</asp:LinkButton>

                </td>

            </tr>

            <tr>

                <td colspan="3" style="background-color: #CCFFFF">登陆状态</td>

            </tr>

            <tr>

                <td colspan="4" style="width: 100%; background-color: #33CCCC">您的位置:</td>

            </tr>

        </table>

    </form>


</body>

</html>

2.      利用div实现页面布局

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


<!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></title>

</head>

<body>

    <form id="form1" runat="server">

    <div id="top">

        <div id="logo_navi_stat">

            <div id="logo" style="float:left; width:30%">

                <asp:Image ID="imgLogo" runat="server" ImageUrl="~/Ex2/Images/logo.gif" />

            </div>

            <div id="navigation" style="background-color:#99CCFF; height:30px">

                <asp:LinkButton ID="lnkbtnDefault" runat="server">首页</asp:LinkButton>

                <asp:LinkButton ID="lnkbtnReset" runat="server">个性设置</asp:LinkButton>

                <asp:LinkButton ID="lnkbtnRegister" runat="server">注册</asp:LinkButton>

            </div>

            <div id="status" style="background-color:#CCFFFF;height:30px;">登录状态</div>

        </div>

        <div id="position" style="background-color:#33CCCC;">您的位置</div>

    </div>

    </form>

</body>

</html>


你可能感兴趣的:(网站,XHTML5元素)