MVC 2 视图布局 CSS 控件布局

Posted 2023-02-26

【中文标题】MVC 2 视图布局 CSS 控件布局

【英文标题】：MVC 2 View Layout CSS Control Layout

【发布时间】：2010-12-29 15:57:24

【问题描述】：

我对开发新的 MVC2 Web 应用程序的很多工作都很陌生，所以这是一个初学者问题。

我需要了解我在网页上的控制和内容布局选项。我使用的是 MVC2，所以我使用的是控制器、视图、视图模型和视图模板。 我需要加快速度……快速……控制任何特定视图上控件和内容的精细布局。

我在下面粘贴了两个自动生成的模板示例来说明我的挑战。我看到布局是由我的 Site.css 文档中的 CSS 控制的。在第一个示例中，我得到了 DisplayLabel 和 DisplayField 的顺序流。我更喜欢 DisplayLabel 的相邻布局，与示例 2 生成的 DisplayField 位于同一行。但是，示例 2 过于简单，因为格式应用于标签和字段。

我认为解决这个学习曲线的正确方法是 Microsoft Expression，但我目前没有个人带宽来处理 Expression。

谁能给我指出一个资源，让我接触到大量 CSS 格式化示例？我有很多语法问题。例如，我认为是在引用 Site.css，但我在 Site.css 中找不到“显示标签”部分。

---

示例 1

<fieldset>
<legend>Fields</legend>
<div class="display-label">DocTitle</div>
<div class="display-field"><%: Model.DocTitle %></div>
<div class="display-label">DocoumentPropertiesID</div>
<div class="display-field"><%: Model.DocumentPropertiesID %></div>

示例 2

<h2>Title: <%: Model.DocTitle %></h2>
<h2>Created: <%: Model.Created %></h2>
<h2>Modified: <%: Model.Modified %></h2>
<h2>Author: <%: Model.tbl_Author.Name %></h2>
<h2>Genre: <%: Model.tbl_DocumentGenre.GenreName %></h2>

【参考方案1】：

您发布的示例使用两种不同的 html 元素进行结构，并且在这些示例中显示内容的方式不同。第一个示例使用<div> 标记来显示属性名称，另一个用于显示值。你可以像这样在同一行显示它：

<div>DocTitle:<%: Model.DocTitle %></div>
<div>DocumentPropertiesID:<%: Model.DocumentPropertiesID %></div>

就像第二个例子一样。属性名称及其值都在同一个标​​记中。 <h2> 标签用于显示标题。如果你得到类似的布局，CSS 可能有一些规则可以在 div 中显示更大的文本。如果找不到这些类的规则，请查找 div 的规则。

注意：直接在 div 等块元素中显示内容并不是一个好主意。你可以把它们放在一个 span 标签中。

这里有一些 HTML 和 CSS 资源：

Head First HTML with CSS & XHTML w3school's html tutorials

【讨论】：

感谢您的资源。我昨天确实在w3school结束了。我还去了 Barnes & Noble 启动我的大脑。

【参考方案2】：

看起来你想要类似的东西

<div>
  <span class = "display-label">Title:</span>
  <span class = "display-field"><%: Model.DocTitle %></span>
</div>
<div>
  <span class = "display-label">Created:</span>
  <span class = "display-field"><%: Model.Created %></span>
</div>
<div>
  <span class = "display-label">Modified:</span>
  <span class = "display-field"><%: Model.Modified %></span>
</div>
<div>
  <span class = "display-label">Author:</span>
  <span class = "display-field"><%: Model.tbl_Author.Name %></span>
</div>
<div>
  <span class = "display-label">Genre:</span>
  <span class = "display-field"><%: Model.tbl_DocumentGenre.GenreName %></span>
</div>

当然，您需要针对display-field 和display-label 调整CSS。如果他们有 block 定义，您会想要删除他们。

此外，如果您没有足够的时间进行最初的 CSS 学习步骤，您可能必须务实并退回到 <table> 以简化布局调整。

顺便说一句，ASP.NET MVC 应用程序的常用 Site.css 确实包含 .display-label 定义。请仔细检查。如果您没有，那么...只是不会应用相应的格式（股票显示标签是灰色文本 IIRC）。

【讨论】：

感谢您的回复。在阅读和探索之后，您就在我最终的位置。正如 Ufuk 上面指出的那样，我必须认识到我使用了错误的标签。我最终得到的看起来几乎和你的例子一模一样。 VS 2010 有一个很棒的 CSS 工具。当您查看 Site.css 页面时，有一个用于创建 CSS 代码（例如样式和样式规则）的工具栏。使用此工具，您可以在站点 CSS 中快速编写元素和类。该工具还有更多功能，但我的大脑在冒烟。