杨杨的专栏

用户操作

[留言] [发消息] [加为好友]

订阅我的博客

[编辑]suosuoyyy的公告

欢迎大家访问我的Blog!

[编辑]文章分类

[编辑]房产网站

[编辑]技术网站

[编辑]人才招聘

[编辑]新闻论坛

存档

Asp.net学习笔记----母板页结合CSS样式设计收藏

为保持整个系统的风格一致，采用母板页应该是个不错的做法。这里整理的是在母板页中设计一个整体框架页面，主要是采用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页面选中使用母板页，效果如下：

效果预览