码迷,mamicode.com
首页 > 其他好文 > 详细

项目前的知识点准备(4)

时间:2014-11-24 13:13:22      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   sp   java   

编辑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;}
  12. </style>
  13. <script type="text/javascript">
  14. $(document).ready(function () {
  15. var topTableHeight = document.getElementById("table_top").clientHeight;
  16. var tableMainHeight = document.documentElement.clientHeight - topTableHeight;
  17. $("#table_main").attr("height", tableMainHeight);
  18. $("#table_left").attr("width", 191);
  19. //执行一次关闭左栏操作,让所有图片初始位置就位,如果下面这句不执行,中间的arrow位置不正确
  20. $(".l1:first").next(".slist").animate({ height: ‘toggle‘, opacity: ‘toggle‘ }, "fast");
  21. //左侧折叠start
  22. var isHide = false;
  23. $("#table_middle").click(function () {
  24. if (!isHide)
  25. $("#table_left").hide();
  26. else
  27. $("#table_left").show();
  28. isHide = !isHide;
  29. });
  30. //左侧折叠end
  31. //计算div高度用于显示滚动条
  32. window.document.getElementById(‘maincontent‘).style.height = tableMainHeight - 21 + ‘px‘;
  33. window.document.getElementById(‘divmainleft‘).style.height = tableMainHeight + ‘px‘;
  34. });
  35. //奇偶数行背景颜色改变
  36. $(document).ready(function () {
  37. $("#table_list tr:even").addClass("listbg2");
  38. $("#table_list tr:odd").addClass("listbg1");
  39. });
  40. </script>
  41. </head>
  42. <body>
  43. <table width="100%" border="0" cellspacing="0" cellpadding="0" id="table_top">
  44. <tr>
  45. <td style="vertical-align:top; height:110px;">
  46. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  47. <tr>
  48. <td style="height:80px; background-color:#02538B; width:325px; ">
  49. <img src="@Url.Content("~/Content/images/top/logo.jpg")" width="282" height="80"/>
  50. </td>
  51. <td style="height:80px; background-color:#02538B;vertical-align:bottom;" align="right">
  52. <table border="0" cellspacing="0" cellpadding="0" id="table_nav">
  53. <tr>
  54. <td>关于</td>
  55. <td>帮助</td>
  56. <td>退出</td>
  57. </tr>
  58. </table>
  59. </td>
  60. </tr>
  61. </table>
  62. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  63. <tr>
  64. <td style="height:30px; background:url(@Url.Content("~/Content/images/top/toplinebg.jpg)") repeat-x;">
  65. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  66. <tr>
  67. <td> </td>
  68. </tr>
  69. </table>
  70. </td>
  71. </tr>
  72. </table>
  73. </td>
  74. </tr>
  75. </table>
  76. <table width="100%" border="0" cellspacing="0" cellpadding="0" id="table_main">
  77. <tr>
  78. <td width="192" style="vertical-align:top; background-color:#B8D8F1;" id="table_left">
  79. <div class="menu" id="divmainleft">
  80. <h1 class="l1">客户关系子系统</h1>
  81. <div class="slist">
  82. <h2 class="l2"><a href="#">二级菜单</a></h2>
  83. <ul class="sslist">
  84. <li class="l3"><a href="#">三级菜单</a></li>
  85. <li class="l3"><a href="#">三级菜单</a></li>
  86. <li class="l3"><a href="#">三级菜单</a></li>
  87. <li class="l3"><a href="#">三级菜单</a></li>
  88. </ul>
  89. <h2 class="l2"><a href="#">二级菜单</a></h2>
  90. <ul class="sslist">
  91. <li class="l3"><a href="#">三级菜单</a></li>
  92. <li class="l3"><a href="#">三级菜单</a></li>
  93. <li class="l3"><a href="#">三级菜单</a></li>
  94. </ul>
  95. <h2 class="l2"><a href="#">二级菜单</a></h2>
  96. </div>
  97. <h1 class="l1">一级菜单</h1>
  98. <div class="slist">
  99. <h2 class="l2"><a href="#">二级菜单</a></h2>
  100. <h2 class="l2"><a href="#">二级菜单</a></h2>
  101. <h2 class="l2"><a href="#">二级菜单</a></h2>
  102. </div>
  103. <h1 class="l1">一级菜单</h1>
  104. <div class="slist">
  105. <h2 class="l2"><a href="#">二级菜单</a></h2>
  106. <h2 class="l2"><a href="#">二级菜单</a></h2>
  107. <h2 class="l2"><a href="#">二级菜单</a></h2>
  108. </div>
  109. <h1 class="l1">一级菜单</h1>
  110. <div class="slist">
  111. <h2 class="l2"><a href="#">二级菜单</a></h2>
  112. <h2 class="l2"><a href="#">二级菜单</a></h2>
  113. <h2 class="l2"><a href="#">二级菜单</a></h2>
  114. </div>
  115. <h1 class="l1">一级菜单</h1>
  116. <div class="slist">
  117. <h2 class="l2"><a href="#">二级菜单</a></h2>
  118. <h2 class="l2"><a href="#">二级菜单</a></h2>
  119. <h2 class="l2"><a href="#">二级菜单</a></h2>
  120. </div>
  121. <h1 class="l1">一级菜单</h1>
  122. <div class="slist">
  123. <h2 class="l2"><a href="#">二级菜单</a></h2>
  124. <h2 class="l2"><a href="#">二级菜单</a></h2>
  125. <h2 class="l2"><a href="#">二级菜单</a></h2>
  126. </div>
  127. <h1 class="l1">一级菜单</h1>
  128. <div class="slist">
  129. <h2 class="l2"><a href="#">二级菜单</a></h2>
  130. <h2 class="l2"><a href="#">二级菜单</a></h2>
  131. <h2 class="l2"><a href="#">二级菜单</a></h2>
  132. </div>
  133. <h1 class="l1">一级菜单</h1>
  134. <div class="slist">
  135. <h2 class="l2"><a href="#">二级菜单</a></h2>
  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. <h2 class="l2"><a href="#">二级菜单</a></h2>
  143. <h2 class="l2"><a href="#">二级菜单</a></h2>
  144. </div>
  145. <h1 class="l1">系统设置</h1>
  146. <div class="slist">
  147. <h2 class="l2"><a href="#">省份设置</a></h2>
  148. <ul class="sslist">
  149. <li class="l3"><a href="/Province/Create">新增</a></li>
  150. <li class="l3"><a href="/Province/Index">管理</a></li>
  151. </ul>
  152. <h2 class="l2"><a href="#">城市信息</a></h2>
  153. <ul class="sslist">
  154. <li class="l3"><a href="/City/Create">新增</a></li>
  155. <li class="l3"><a href="/City/Index">管理</a></li>
  156. </ul>
  157. </div>
  158. </div>
  159. </td>
  160. <td width="10" id="table_middle" style="background:url(@Url.Content("~/Content/images/middle/bg.jpg")) repeat-y; cursor:pointer; vertical-align:middle;">
  161. <img src="@Url.Content("~/Content/images/middle/arrow.jpg")" width="10" height="11">
  162. </td>
  163. <td style="vertical-align:top;">
  164. <div id="maincontent">
  165. @RenderBody()
  166. </div>
  167. </td>
  168. </tr>
  169. </table>
  170. </body>
  171. </html>
下面是运行的结果:
bubuko.com,布布扣




附件列表

     

    项目前的知识点准备(4)

    标签:style   blog   http   io   ar   color   os   sp   java   

    原文地址:http://www.cnblogs.com/mahun/p/4118280.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!