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> 

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

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

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

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

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>, чтобы упростить настройку макета.

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