这是我之前做ASP.NET网站时，由于与我合作的人没做过网页相关的项目，于是对于我写的页面代码我写了这个类似的文档帮助理解，当然这只是HTML代码部分，不涉及.cs文件里的C#代码。有些是抽出来的，所以顺序什么的有点乱。
前提：平台是VS2005，由于网站比较小，页面布局是TABLE，前期未使用相关CSS文件，未使用主题，有少许地方使用JS代码，但不需要理解。
首先说明在HTML语言中，每个标签都是用<标签名></标签名>标记，例如
<table></table>、<div></div>、<body></body>。
主页面使用frameset分窗体为3个子窗体,如下图：
!!
其实现代码为，各含义见注释。
<frameset cols="154,*" frameborder="0" framespacing="0">
//这句中frameset表示分窗体，用cols将窗体分为两列，"154,*"表示每列的宽度，154表示第一列为154px宽，px为默认单位，*表示第二列宽度为剩余所有
<frame name="leftMenu" scrolling="no" src="left.aspx" height="100%">
//这句中frame表示定义一个子窗体，此为第一列中子窗体，对应src为其源页面，scrolling属性设定其不可滚动
<frameset rows="30,*" framespacing="0" frameborder="0">
//这句中frameset分窗体，用rows将窗体分为两行，"30,*"表示每列的高度，30表示第一行为154px高， *表示第二行高度为剩余所有
<frame name="head" scrolling="no" src="top.aspx">
//定义顶窗体，不可滚动，源页面为top.aspx
<frame name="main" frameborder="0" scrolling="yes" src="main.aspx">
//定义主要内容子窗体，可滚动，源页面为main.aspx
</frameset>
</frameset>
l table
在一个页面中，当你需要填入有组织顺序的内容时，先设计好一个表，有几行几列，表用table标记表，tr标记，td标记列，例如一个一行三列的表：
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
一个2行2列的表
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
l 控件
在asp.net中所有控件在源页面和设计页面（在左下角!!
选择）中都可以通过拖放实现，其标志为以<asp:控件名 。。。。。。>开头，以</asp: 控件名>结尾，例如
<asp:Label ID="Label1" runat="server" Text="攻击机列表"></asp:Label>
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" DataSourceID="SqlDataSource1" Height="400px" Width="600px">
……</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource>
l 属性
在HTML中的所有控件、标签都可以有属性，像table,td,tr,div,body,form都有属性,其属性可在下图所示的属性窗口中进行修改，也可手工写代码
!!
而控件中主要一个属性就是“style”样式属性，如上图中高亮行，其右边有一个“…”的小按钮，点击它打开样式生成器
!!
所选控件的样式属性均可在这里设置，它会在标签内自动生成HTML代码，例如：
<body style="background-color:#ffffff; padding:0; margin:0;">
<div style="width:100%; height:100%; padding:50px">
<table border="1" style="height:20px; width:150px; margin:5px;" >
第1行代码中设置body块的background-color（即背景颜色）为“#ffffff”（RGB颜色十六进制表示）.
第2行代码中设置div块的宽度为它外面那一块（这里它的外面那一块是body，里面那一块是table）的100%，高度也为外面那一块的100%，也就是说div块的高度和宽度等于body块的高度和宽度，这样设的好处是假设div块与body块永远是保持一样大小的话，如果要修改大小，只要修改body的大小就行，div会自动等于body的大小。
第3行中代码设置table的border（即边框）宽为1px（默认单位），height为20px，width为150px。
另外，若想手工写入样式代码，请参照上面代码的style中的格式。
l 关于padding和margin
下图是一个对table1的margin和padding的说明图，margin是table1与外面那一块（这里是div）的边距（也就是预留的空白），padding是table1与里面那一块（这里是table2）的空白。
!!
这个图对应的代码为
<div style="background-color:#cccccc; height:100%; width:100%">
<table style="margin:50px; height:200px; width:200px; background-color:#ffffcc;" border="1">
<tr>
<td style=" padding:20px;">
<table style="height:100px; width:100px; background-color:#ff0000;" border="1">
<tr><td></td></tr>
</table>
</td>
</tr>
<tr style="height:100px; width:200px;">
</tr>
</table>
</div>
显示结果如下图，灰色部分为div，黄色部分为table1，红色部分为table2，记住这里所谓的margin和padding全都是相对于table1来说的。
!!
1921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
