第八章设计用户界面之给Web程序应用用户界面设计-CSDN博客

1. 概述

　　本章内容包括：使用CSS创建和应用样式、使用HTML构架用户界面的层次以及根据需求实现动态页面内容。

2. 主要内容

　　2.1 使用CSS创建和应用样式

　　　　Razor程序的模板是_Layout.cshtml,ASPX程序的模板是Site.Master.

　　　　使用Razor视图引擎时，可将css文件引用到<head>节点中；使用ASPX试图引擎时，可使用styles.Render方法引用。

　　　　internet项目中，_Layout.cshtml文件中的Razor和HTML代码：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8" /> 
        <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
        <meta name="viewport" content="width=device-width" /> 
        @Styles.Render("~/Content/css") 
        @Scripts.Render("~/bundles/modernizr") 
    </head> 
    <body> 
        <header> 
            <div class="content-wrapper"> 
                <div class="float-left"> 
                    <p class="site-title"> 
                        @Html.ActionLink("your logo here", "Index", "Home") 
                    </p> 
                </div> 
                <div class="float-right"> 
                    <section id="login"> 
                        @Html.Partial("_LoginPartial") 
                    </section> 
                    <nav> 
                        <ul id="menu"> 
                            <li>@Html.ActionLink("Home", "Index", "Home")</li> 
                            <li>@Html.ActionLink("About", "About", "Home")</li> 
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
                        </ul> 
                    </nav> 
                </div> 
            </div> 
        </header>

　　2.2 使用HTML构架用户界面的层次

　　　　HTML定义结构，CSS描述样式。

　　　　<html><head><body>是三个必要标记：

　　　　<html>标记文档类型以便浏览器识别，<head>用于保存元数据信息(外部css、javascript等)，<body>内是实际需要显示给用户的信息。

　　　　其他常用的HTML标记：

　　　　一些HTML5新加的布局元素：

　　2.3 根据需求实现动态页面内容

　　　　ASP.NET MVC4 使用HTML Helpers 来管理动态内容。@Html.ActionLink("About", "About")

　　　　常用的HTML Helpers：

　　　　一些常用的扩展方法：

　　　　可以实现一些验证

@Html.Label("First name ")<br /> 
@Html.TextBoxFor(m => m.FirstName, new { @placeholder = "First name"}) 
<br /> 
@Html.Label("Last name ")<br /> 
@Html.TextBoxFor(m => m.LastName, new { @placeholder = "Last name"}) 
<br />

3. 总结

　　① HTML提供了许多页面布局方式，CSS可以提供样式控制。

　　② 动态页面内容是使用ASP.NET MVC4的主要原因。可以根据不同的情况显示不同的内容。

　　③ ASP.NET MVC 使用Helpers来输出HTML信息。比如@Html.TextBox。开发人员可以方便的使用一行代码来生成一套完整的HTML节点信息。

转载于:https://www.cnblogs.com/stone_lv/p/5036489.html