ASP.NET MVC - 样式和布局

1、添加布局

文件 _Layout.cshtml 表示应用程序中每个页面的布局。它位于 Views 文件夹中的 Shared 文件夹。

打开这个文件，把其内容替换为：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>@ViewBag.Title</title> //Razor语法：@RenderBody() - 此处呈现页面内容。
 6 <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> //HTML 帮助器:@Url.Content() - URL 内容在此处插入。
 7 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
 8 <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
 9 </head>
10 <body>
11 <ul id="menu">
12 <li>@Html.ActionLink("Home", "Index", "Home")</li>  //HTML 帮助器:@Html.ActionLink() - HTML 链接在此处插入。
13 <li>@Html.ActionLink("Movies", "Index", "Movies")</li>
14  <li>@Html.ActionLink("About", "About", "Home")</li>
15  </ul> <section id="main"> 
16 @RenderBody()  //Razor语法：@RenderBody() - 此处呈现页面内容。
17 <p>Copyright W3schools 2012. All Rights Reserved.</p> 
18 </section> 
19 </body>
20  </html>

 

 

　　2、添加样式

应用程序的样式表是 Site.css，它位于 Content 文件夹中。

打开文件 Site.css，并把其内容替换为：

 1 body
 2 {
 3 font: "Trebuchet MS", Verdana, sans-serif;
 4 background-color: #5c87b2;
 5 color: #696969;
 6 }
 7 
 8 h1
 9 {
10 border-bottom: 3px solid #cc9900;
11 font: Georgia, serif;
12 color: #996600;
13 }
14 
15 #main
16 {
17 padding: 20px;
18 background-color: #ffffff;
19 border-radius: 0 4px 4px 4px;
20 }
21 
22 a
23 {
24 color: #034af3; 
25 }
26 
27 /* 菜单样式 ------------------------------*/
28 ul#menu
29 {
30 padding: 0px;
31 position: relative;
32 margin: 0;
33 }
34 
35 ul#menu li
36 {
37 display: inline;
38 }
39 
40 ul#menu li a 
41 {
42 background-color: #e8eef4;
43 padding: 10px 20px;
44 text-decoration: none;
45 line-height: 2.8em;
46 /*CSS3 properties*/
47 border-radius: 4px 4px 0 0;
48 }
49 
50 ul#menu li a:hover
51 {
52 background-color: #ffffff;
53 } 
54 
55 /* 表单样式 ------------------------------*/
56 fieldset
57 {
58 padding-left: 12px;
59 } 
60 
61 fieldset label
62 {
63 display: block;
64 padding: 4px;
65 }
66 
67 input[type="text"], input[type="password"]
68 {
69 width: 300px;
70 }
71 
72 input[type="submit"]
73 {
74 padding: 4px;
75 }
76 
77 /* 数据样式 ------------------------------*/
78 table.data
79 {
80 background-color:#ffffff;
81 border:1px solid #c3c3c3;
82 border-collapse:collapse;
83 width:100%;
84 }
85 
86 table.data th
87 {
88 background-color:#e8eef4;
89 border:1px solid #c3c3c3;
90 padding:3px;
91 }
92 
93 table.data td 
94 {
95 border:1px solid #c3c3c3;
96 padding:3px;
97 }

　

另：_ViewStart 文件

Shared 文件夹（位于 Views 文件夹内）中的 _ViewStart 文件包含以下内容：

@{Layout = "~/Views/Shared/_Layout.cshtml";}

　　

这段代码被自动添加到由应用程序显示的所有视图。如果删除该文件，则必须向所有视图添加这段代码。

 

引用：http://www.w3school.com.cn/aspnet/mvc_layout.asp

posted @ 2016-04-24 17:48  风清扬二代目  阅读(392)  评论(0)    收藏  举报