MVC 2 View Layout CSS Control Layout

Question

Я новичок во многих вещах, которые я пытаюсь сделать с разработкой нового веб-приложения MVC2, так что это вопрос новичка.

Мне нужно понять свои параметры управления и контентамакет на веб-странице.Я использую MVC2, поэтому я использую Controllers, Views, ViewModels и View Templates.То, что мне нужно, чтобы ускорить… быстрое…, это управлять детальной компоновкой элементов управления и контента в любом конкретном представлении.

Ниже я вставил два примера автоматически сгенерированных шаблонов, которые иллюстрируют мою задачу.Я вижу, что макет контролируется CSS в моем документе Site.css.В первом примере я получаю последовательный поток DisplayLabel и DisplayField.Я предпочитаю соседний макет DisplayLabel на той же строке, что и DisplayField, созданный в примере 2. Однако пример 2 слишком прост, потому что форматирование применяется к метке и полю.

Я думаю, что правильный способ решенияэта кривая обучения - Microsoft Expression, но у меня нет личной пропускной способности для решения Expression.

Может кто-нибудь указать мне на ресурс, который предоставит мне множество примеров для форматирования CSS?У меня много вопросов по синтаксису.Например, я полагаю, что ссылается на Site.css, но не могу найти раздел «display-label» в 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>

Answer 1

В опубликованных вами примерах используются два различных элемента HTML для структуры, и способ отображения контента в этих примерах различен.Первый пример использует тег <div> для отображения имени свойства, а другой - для отображения значения.Вы можете показать это в той же строке, как это:

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

Это похоже на 2-й пример.И имя свойства, и его значение находятся в одном теге.Тег <h2> используется для отображения заголовков.Если вы получаете похожий макет, CSS может иметь некоторые правила для отображения текста большего размера в div.Если вы не можете найти правила для этих классов, посмотрите правила для div.

Примечание. Не рекомендуется отображать содержимое непосредственно в элементах блока, таких как div.Вы можете поместить их в тег span.

Вот несколько ресурсов для HTML и CSS:

• Head First HTML с CSS & XHTML
• html-уроки w3school

Answer 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>

Конечно, вам нужно настроить CSS для display-field и display-label. Вы захотите удалить их block определение, если они есть.

Кроме того, если у вас нет времени, чтобы выполнить начальный шаг изучения CSS, вам, возможно, придется проявить прагматичность и откат на <table>, чтобы упростить настройку макета.

Кстати, Stock Site.css приложения ASP.NET MVC содержит определение метки .display. Пожалуйста, проверьте дважды. Если у вас его нет, тогда ... просто соответствующее форматирование не будет применено (бирка со знаком отображается серым цветом IIRC).