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

来源：互联网发布：php 装饰者模式编辑：程序博客网时间：2024/05/21 07:02

开发工具版本：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>

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" >

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>

5. ......

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.

0 0