[ASP.NET-VIII] ASP.NET 使用CSS[行内式(style) 嵌入式(class)] + table布局前端控件I

开发工具版本：VS2008

平台版本：.NET Framework 3.5

应用程序类型：ASP .NET网站

1 直接用table（不设置属性）布局控件

搜“ASP.NET Web Pages”，然后浏览一眼。

以下代码将前端的“控件”、“文字”都布局在table中的表格单元中（<td>…</td>）。

Table 1. Default.aspx（以下代码是写在Default.aspx文件中的<div></div>标签下的。）

1.         <table id="table1" runat="server" > 2.         <tr > 3.            <td align="center">前台编码管理者：一哥/姐</td>     4.         </tr> 5.           6.         <tr> 7.                  <td> 8.                            姓名： 9.                  </td> 10.              11.              <td> 12.                        <asp:TextBox ID="TextBox1" runat="server" > 13.                        </asp:TextBox> 14.              </td> 15.              16.              <td> 17.                        性别： 18.              </td> 19.              20.              <td> 21.                        <asp:TextBox ID="TextBox2" runat="server" > 22.                        </asp:TextBox> 23.              </td>          24.     </tr> 25.     </table> 26.     <br /> 27.     <table id="Table2" runat="server" > 28.     <tr> 29.        <td>后台编码管理者：一哥/姐</td>     30.     </tr> 31.       32.     <tr> 33.              <td> 34.              姓名： 35.              </td> 36.              37.              <td> 38.                        <asp:TextBox ID="TextBox3" runat="server" > 39.                        </asp:TextBox> 40.              </td> 41.              42.              <td> 43.                        性别： 44.              </td> 45.              46.              <td> 47.                        <asp:TextBox ID="TextBox4" runat="server" > 48.                        </asp:TextBox> 49.              </td>         50.     </tr> 51.     </table>

每列中的表格单元的长度以最长内容的长度为标准，这样默认的布局如下图：

Figure1. 未设置table表格单元属性的布局

2 使用style属性布局控件（行内式编写CSS）

Figure1中的布局结构看起来不是太清晰。需要借助其属性来设置一下表格的位置、大小，以带动各“控件”、“文字”的布局。

2.1 “style属性”和“CSS属性:值”参考资料

搜“HTML style 属性”，然后参考style属性的用法。然后搜“CSS 参考手册”参考CSS属性和值格式。

2.2 使用style属性调整表格宽度和显示效果

设置<td></td>标签内的style属性如下：

Table 2. Default.aspx（以下代码是写在Default.aspx文件中的<div></div>标签下的。）

1.         <table id="table1" visible="true" runat="server" > 2.           3.         <tr> 4.                  <td colspan="4" style="width:220px; text-align:center; border-bottom:solid 1px blue; 5.                            border-left:none; 6.                            border-top:solid 1px blue; 7.                            border-right:none"> 8.                            前台总监：一哥/姐</td> 9.         </tr> 10.       11.     <tr> 12.              <td style="width:50px; text-align:right; border-bottom:solid 1px blue; 13.                        border-left:solid 1px blue; 14.                        border-top:solid 1px blue; 15.                        border-right:none"> 16.                        姓名： 17.              </td> 18.              19.              <td style="width:80px; text-align:left; border-bottom:solid 1px blue; 20.                        border-left:none; 21.                        border-top:solid 1px blue; 22.                        border-right:none"> 23.                        24.                        <asp:TextBox ID="TextBox1" runat="server" Width="80px"> 25.                        </asp:TextBox> 26.              </td> 27.              28.              <td style="width:50px; text-align:right; border-bottom:solid 1px blue; 29.                        border-left:none; 30.                        border-top:solid 1px blue; 31.                        border-right:none"> 32.                        性别： 33.              </td> 34.              35.              <td style="width:40px; text-align:left; border-bottom:solid 1px blue; 36.                        border-left:none; 37.                        border-top:solid 1px blue; 38.                        border-right:solid 1px blue"> 39.                        <asp:TextBox ID="TextBox2" runat="server" Width="40px"> 40.                        </asp:TextBox> 41.              </td>          42.     </tr> 43.     </table> 44.     <br /> 45.     <table id="Table2" visible="true"  runat="server" > 46.         47.     <tr> 48.              <td colspan="4" style="width:220px; text-align:center; border-bottom:solid 1px blue; 49.                        border-left:none; 50.                        border-top:solid 1px blue; 51.                        border-right:none"> 52.                        后台总监：一哥/姐</td> 53.     </tr> 54.       55.     <tr> 56.              <td style="width:50px; text-align:right; border-bottom:solid 1px blue; 57.                        border-left:solid 1px blue; 58.                        border-top:solid 1px blue; 59.                        border-right:none"> 60.                        姓名： 61.              </td> 62.              63.              <td style="width:80px; text-align:left; border-bottom:solid 1px blue; 64.                        border-left:none; 65.                        border-top:solid 1px blue; 66.                        border-right:none"> 67.                        68.                        <asp:TextBox ID="TextBox3" runat="server" Width="80px"> 69.                        </asp:TextBox> 70.              </td> 71.              72.              <td style="width:50px; text-align:right; border-bottom:solid 1px blue; 73.                        border-left:none; 74.                        border-top:solid 1px blue; 75.                        border-right:none"> 76.                        性别： 77.              </td> 78.              79.              <td style="width:40px; text-align:left; border-bottom:solid 1px blue; 80.                        border-left:none; 81.                        border-top:solid 1px blue; 82.                        border-right:solid 1px blue"> 83.                        <asp:TextBox ID="TextBox4" runat="server" Width="40px"> 84.                        </asp:TextBox> 85.              </td>          86.     </tr> 87.     </table>

按照以上方式设置style属性后的前台控件样式如下：

Figure2. 前台控件（左）运行效果（右）

3 使用class属性布局控件（嵌入式CSS样式）

3.1 class属性参考资料

搜“HTMLclass属性”，然后参考。搜“ASP.NET CSS样式”，然后参考。

3.2 用class属性指定table风格

(1) 定义CSS样式

在asp.net的前台代码（<head> </head>标记对中）定义CSS样式：

1.         <style type="text/css"> 2.                  .font_corlor 3.                  { 4.                            color:green; 5.                            font-size:14px; 6.                 } 7.         </style>

之前的整个过程都没有规定字体的颜色和大小，所以定义了一个指定字体颜色的CSS样式：字体颜色为绿，字体大小为14px。

(2) 为table class属性指定CSS样式

为两个table控件指定的class属性指定CSS样式：

1.         <table id="table1" class="font_corlor"  visible="true" runat="server" > 2.         ...... 3.         </table> 4.           5.         ...... 6.           7.         <table id="table2" class="font_corlor"  visible="true" runat="server" > 8.         ...... 9.         </table>

运行效果：

Figure3. 指定table的class属性的CSS样式的运行效果

使用嵌入式CSS样式的好处：编写控件的代码和指定控件风格的代码相互独立。

[2015.01.04]

ASP .NET Note Over.