项目前的知识点准备（4）

编辑Shared文件夹下的母版页 _Layout.cshtml。
然后将Content.rar里的文件添加到Content文件夹中。

大部分都是HTML，CSS, JS 这就没啥好说的，值得一提的代码如下  
5 行 ：@Url.Content("~/Scripts/jquery-1.7.1.min.js") // 获取路径，不会写的copy
205 行 ：@RenderBody() // 子页面在此
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>后台基本页</title>
  6. <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
  7. <script type="text/javascript" src="@Url.Content("~/Content/css_js/left_menu/left_menu.js")"></script>
  8. <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css_js/left_menu/left_menu_style.css")" />
  9. <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css_js/main.css")" />
  10. <style type="text/css">
  11. *{padding:0; margin:0;}
  13. </style>
  14. <script type="text/javascript">
  16.     $(document).ready(function () {
  18.         var topTableHeight = document.getElementById("table_top").clientHeight;
  19.         var tableMainHeight = document.documentElement.clientHeight - topTableHeight;
  20.         $("#table_main").attr("height", tableMainHeight);
  24.         $("#table_left").attr("width", 191);
  25.         //执行一次关闭左栏操作，让所有图片初始位置就位，如果下面这句不执行，中间的arrow位置不正确
  27.         $(".l1:first").next(".slist").animate({ height: 'toggle', opacity: 'toggle' }, "fast");
  31.         //左侧折叠start
  32.         var isHide = false;
  33.         $("#table_middle").click(function () {
  35.             if (!isHide)
  36.                 $("#table_left").hide();
  37.             else
  38.                 $("#table_left").show();
  39.             isHide = !isHide;
  40.         });
  41.         //左侧折叠end
  43.         //计算div高度用于显示滚动条
  44.         window.document.getElementById('maincontent').style.height = tableMainHeight - 21 + 'px';
  45.         window.document.getElementById('divmainleft').style.height = tableMainHeight + 'px';
  47.     });
  49.     //奇偶数行背景颜色改变
  50.     $(document).ready(function () {
  51.         $("#table_list tr:even").addClass("listbg2");
  52.         $("#table_list tr:odd").addClass("listbg1");
  53.     });
  54. </script>
  55. </head>
  57. <body>
  58. <table width="100%" border="0" cellspacing="0" cellpadding="0" id="table_top">
  59.   <tr>
  60.     <td style="vertical-align:top; height:110px;">
  61.     
  62.         <table width="100%" border="0" cellspacing="0" cellpadding="0">
  63.           <tr>
  64.             <td style="height:80px; background-color:#02538B; width:325px; ">
  65.             
  66.            	 <img src="@Url.Content("~/Content/images/top/logo.jpg")" width="282" height="80"/>
  67.              </td>
  68.             <td style="height:80px; background-color:#02538B;vertical-align:bottom;" align="right">
  69.             
  70.                 <table border="0" cellspacing="0" cellpadding="0" id="table_nav">
  71.                   <tr>
  72.                    
  73.                     <td>关于</td>
  74.                     <td>帮助</td>
  75.                     <td>退出</td>
  76.                    
  77.                   </tr>
  78.                 </table>
  80.             </td>
  81.           </tr>
  82.         </table>
  83.         <table width="100%" border="0" cellspacing="0" cellpadding="0">
  84.           <tr>
  85.             <td style="height:30px; background:url(@Url.Content("~/Content/images/top/toplinebg.jpg)") repeat-x;">
  86.             	
  87.                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  88.                   <tr>
  89.                     <td> </td>
  90.                   </tr>
  91.                 </table>
  93.             </td>
  94.           </tr>
  95.         </table>
  97.     </td>
  98.   </tr>
  99. </table>
  101. <table width="100%" border="0" cellspacing="0" cellpadding="0" id="table_main">
  102.   <tr>
  103.     <td width="192" style="vertical-align:top; background-color:#B8D8F1;" id="table_left">
  104.          <div class="menu" id="divmainleft">
  105.           <h1 class="l1">客户关系子系统</h1>
  106.           <div class="slist">
  107.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  108.             <ul class="sslist">
  109.               <li class="l3"><a href="#">三级菜单</a></li>
  110.               <li class="l3"><a href="#">三级菜单</a></li>
  111.         
  112.               <li class="l3"><a href="#">三级菜单</a></li>
  113.               <li class="l3"><a href="#">三级菜单</a></li>
  114.             </ul>
  115.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  116.             <ul class="sslist">
  117.               <li class="l3"><a href="#">三级菜单</a></li>
  118.               <li class="l3"><a href="#">三级菜单</a></li>
  119.         
  120.             
  121.               <li class="l3"><a href="#">三级菜单</a></li>
  122.             </ul>
  123.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  124.           </div>
  125.           <h1 class="l1">一级菜单</h1>
  126.           <div class="slist">
  127.         
  128.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  129.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  130.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  131.           </div>
  132.           <h1 class="l1">一级菜单</h1>
  133.           <div class="slist">
  134.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  135.         
  136.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  137.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  138.           </div>
  139.           <h1 class="l1">一级菜单</h1>
  140.           <div class="slist">
  141.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  142.         
  143.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  144.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  145.           </div>
  146.           <h1 class="l1">一级菜单</h1>
  147.           <div class="slist">
  148.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  149.         
  150.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  151.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  152.           </div>
  153.           <h1 class="l1">一级菜单</h1>
  154.           <div class="slist">
  155.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  156.         
  157.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  158.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  159.           </div>
  160.           <h1 class="l1">一级菜单</h1>
  161.           <div class="slist">
  162.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  163.         
  164.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  165.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  166.           </div>
  167.           <h1 class="l1">一级菜单</h1>
  168.           <div class="slist">
  169.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  170.         
  171.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  172.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  173.           </div>
  174.           <h1 class="l1">一级菜单</h1>
  175.           <div class="slist">
  176.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  177.         
  178.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  179.             <h2 class="l2"><a href="#">二级菜单</a></h2>
  180.           </div>
  181.           <h1 class="l1">系统设置</h1>
  182.           <div class="slist">
  183.             <h2 class="l2"><a href="#">省份设置</a></h2>
  184.             <ul class="sslist">
  185.               <li class="l3"><a href="/Province/Create">新增</a></li>
  186.               <li class="l3"><a href="/Province/Index">管理</a></li>
  187.         
  188.             </ul>
  189.            
  190.           <h2 class="l2"><a href="#">城市信息</a></h2>
  191.             <ul class="sslist">
  192.               <li class="l3"><a href="/City/Create">新增</a></li>
  193.               <li class="l3"><a href="/City/Index">管理</a></li>
  194.         
  195.             </ul>
  196.           </div>
  197.          
  198.         </div>
  199.     </td>
  200.     <td width="10" id="table_middle" style="background:url(@Url.Content("~/Content/images/middle/bg.jpg")) repeat-y; cursor:pointer; vertical-align:middle;">
  201.     	<img src="@Url.Content("~/Content/images/middle/arrow.jpg")" width="10" height="11">
  202.     </td>
  203.     <td style="vertical-align:top;">
  204.         <div id="maincontent">
  205.             @RenderBody()
  206.         </div>
  207.      </td>
  208.   </tr>
  209. </table>
  211. </body>
  212. </html>
下面是运行的结果：





附件列表

     

    posted on 2014-11-24 11:36  梦中的天堂  阅读(126)  评论(0)    收藏  举报