分享母板页设计经验-优快云博客

本文链接：https://blog.youkuaiyun.com/csdongyangdn/article/details/6944649

今天的事就不说了，说说这两天的收获吧
我在向老师询问原理后，独立完成了一个母板页的设计，下面把我的代码和样式表发上来喽
样式表
.zhengti
{
   padding:0px; margin:0px auto; width:945px; height:auto;
}
.tou
{
   width: 945px;
   height:125px;
}
.jing
{
   width:auto; height:60px; background-color:Red;
}
.zhong
{
   width:945px; height:500px;
}
.left
{
   float:left; height:500px; width:245px; background-color:#e5e5e5; text-align:center;
}
.right
{
   float:left; height:500px; width:700px;
}
.dibu
{
   width: 945px; height: 50px; background-color: #0978af; text-align: center; font-size: x-large; margin-top:auto;
}
.left ul
{
   list-style:none; height:122px; width:100px;
}
.left li
{
   height:25px; width: 97px; margin:5px;
}
.left a
{
   display:block; width:99px; height:23px; color:White; text-decoration:none; background-color:#5aa815
}
代码
<head runat="server">
   <title></title>
   <asp:ContentPlaceHolder id="head" runat="server">
   </asp:ContentPlaceHolder>
   <link href="Styles/muban.css" rel="stylesheet" type="text/css" />
</head>
<body >
   <form id="form1" runat="server">
   <div class="zhengti">
   <div class="tou">
   <img alt="" src="Images/1.jpg" style="width: 945px; height: 125px;" />
   </div>
   <div class="jing"></div>
   <div class="zhong">
   <div class="left">
   <ul>
   <li><a href=#>学生管理</a></li>
   <li><a href=#>管理员管理</a></li>
   <li><a href=#>密码修改</a></li>
   <li><a href=#>系统注销</a></li>
   </ul>
   </div>
   <div class="right">
   <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
   </asp:ContentPlaceHolder>
   </div>
   </div>
   <div class="dibu">
   <ul><li style=" margin-top:10px"><strong>@ 版权所有：任丘市政府教育办公室</strong></li></ul>
   </div>
   </div>
   </form>
</body>

2011-11-7