第八章 设计用户界面 之 给Web程序应用用户界面设计
作者:互联网
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
标签:Web,用户界面,使用,ActionLink,Html,HTML,Home,设计,CSS 来源: https://blog.csdn.net/weixin_30655219/article/details/97367060