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

为保持整个系统的风格一致，采用母板页应该是个不错的做法。这里整理的是在母板页中设计一个整体框架页面，主要是采用Div然后结合CSS，让界面布局达到我们想要的效果。

第一步：新建母板页

第二步：拖放Div控件以及相关控件，源文件如下：

 

***进出口报关系统

      

版权所有:广州***科技有限公司

第三步：新建样式表文件，对各个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页面选中使用母板页，效果如下：