为保持整个系统的风格一致,采用母板页应该是个不错的做法。这里整理的是在母板页中设计一个整体框架页面,主要是采用Div然后结合CSS,让界面布局达到我们想要的效果。 第一步:新建母板页 第二步:拖放Div控件以及相关控件,源文件如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>母板页</title> <link href = "CSS/divcss.css" rel="Stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div id="top"> <p style=" margin-top:15px;" mce_style=" margin-top:15px;">***进出口报关系统</p> </div> <div id="path" > <asp:SiteMapPath ID="SiteMapPath1" runat="server"> </asp:SiteMapPath> </div> <div id="content"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </div> <div id="leftbar"> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" Height="259px" ShowLines="True" Width="152px"> </asp:TreeView> </div> <div id="rightbar"> <asp:Label ID="Label2" runat="server" Text="test"></asp:Label></div> <div id="footer"> <p>版权所有:广州***科技有限公司</p> </div> </form> </body> </html> 第三步:新建样式表文件,对各个div控件进行样式设计 #top { color: #333333; background-color: #eeeeee; margin: 0px; height: 60px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; text-align:center; font-size:30px; color:Red; } #content { background-color: #fffaf0; margin-top: 0px; margin-right: 80px; margin-bottom: 0px; margin-left: 152px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; position: relative; z-index: 5; height: 480px; } #leftbar { position: absolute; width: 150px; left: 0px; top: 70px; color: black; background-color: #fffacd; z-index: 2; height: 100%; } #rightbar { position: absolute; width: 80px; right:0px; top: 70px; color: black; background-color: #fffacd; z-index: 3; height: 100%; } #footer { color: black; background-color: #eeeeee; margin: 0px; height: 50px; width: 100%; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; text-align: center; } #path { position: absolute; top: 25px; left: 0px; right:20px; width: 100%; color: red; text-align: right; vertical-align: top; font-size: 14px; font-weight: bold; z-index: 2; } 第四步:新建Aspx页面选中使用母板页,效果如下: