ASP.NET MVC - 样式和布局 · W3School C# & Asp.net 教程

# ASP.NET MVC - 样式和布局为了学习 ASP.NET MVC，我们将构建一个 Internet 应用程序。第 3 部分：添加样式和统一的外观（布局）。 ## 添加布局文件 _Layout.cshtml 表示应用程序中每个页面的布局。它位于 Views 文件夹中的 Shared 文件夹。打开文件 _Layout.cshtml，把内容替换成： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Movies", "Index", "Movies")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul> <section id="main"> @RenderBody() <p>Copyright W3CSchool 2012\. All Rights Reserved.</p> </section> </body> </html> ``` ## HTML 帮助器在上面的代码中，HTML 帮助器用于修改 HTML 输出： ``` @Url.Content() - URL 内容将在此处插入。 @Html.ActionLink() - HTML 链接将在此处插入。 ``` 在本教程后面的章节中，您将学到更多关于 HTML 帮助器的知识。 ## Razor 语法在上面的代码中，红色标记的代码是使用 Razor 标记的 C#。 ``` @ViewBag.Title - 页面标题将在此处插入。 @RenderBody() - 页面内容将在此处呈现。 ``` 您可以在我们的 [Razor 教程](razor-intro.html)中学习关于 C# 和 VB（Visual Basic）的 Razor 标记的知识。 ## 添加样式应用程序的样式表是 Site.css，位于 Content 文件夹中。打开文件 Site.css，把内容替换成： ``` body { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969; } h1 { border-bottom: 3px solid #cc9900; font: Georgia, serif; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 0 4px 4px 4px; } a { color: #034af3; } /* Menu Styles ------------------------------*/ ul#menu { padding: 0px; position: relative; margin: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: #e8eef4; padding: 10px 20px; text-decoration: none; line-height: 2.8em; /*CSS3 properties*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff; } /* Forms Styles ------------------------------*/ fieldset { padding-left: 12px; } fieldset label { display: block; padding: 4px; } input[type="text"], input[type="password"] { width: 300px; } input[type="submit"] { padding: 4px; } /* Data Styles ------------------------------*/ table.data { background-color:#ffffff; border:1px solid #c3c3c3; border-collapse:collapse; width:100%; } table.data th { background-color:#e8eef4; border:1px solid #c3c3c3; padding:3px; } table.data td { border:1px solid #c3c3c3; padding:3px; } ``` ## _ViewStart 文件 Shared 文件夹（位于 Views 文件夹内）中的 _ViewStart 文件包含如下内容： ``` @{Layout = "~/Views/Shared/_Layout.cshtml";} ``` 这段代码被自动添加到由应用程序显示的所有视图。如果您删除了这个文件，则必须向所有视图中添加这行代码。在本教程后面的章节中，您将学到更多关于视图的知识。