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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章