<%@ 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>
