MVC 2 Layout anzeigen CSS Control Layout

Question

Ich bin neu bei vielen, was ich versuche mit der Entwicklung einer neuen MVC2-Webanwendung zu tun, also ist dies eine Anfängerfrage.

Ich muss meine Optionen für Kontrolle und Inhalt Layout auf einer Webseite verstehen. Ich verwende MVC2, also verwende ich Controller, Ansichten, ViewModels und View Templates. Was ich brauche, um ... schnell ... hochzufahren, ist das granulare Layout von Steuerelementen und Inhalten in einer bestimmten Ansicht.

Im Folgenden habe ich zwei Beispiele für automatisch generierte Vorlagen eingefügt, die meine Herausforderung veranschaulichen. Ich sehe, dass das Layout von CSS in meinem Site.css-Dokument gesteuert wird. Im ersten Beispiel bekomme ich einen sequentiellen Fluss von DisplayLabel und DisplayField. Ich bevorzuge das angrenzende Layout von DisplayLabel in derselben Zeile wie das von Beispiel 2 erzeugte DisplayField. Beispiel 2 ist jedoch zu einfach, weil die Formatierung auf das Label und das Feld angewendet wird.

Ich denke, der richtige Weg, um diese Lernkurve zu bewältigen, ist Microsoft Expression, aber ich habe im Moment keine persönliche Bandbreite, um Expression zu bewältigen.

Kann mir jemand auf eine Ressource verweisen, die mich vielen Beispielen für CSS-Formatierung aussetzt? Ich habe viele Syntaxfragen. Ich glaube zum Beispiel, dass ich auf Site.css referenziere, aber ich finde keinen "display-label" -Abschnitt in Site.css.

---

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

Beispiel 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

Die Beispiele, die Sie geschrieben verwendet zwei verschiedene HTML-Elemente für Struktur und die Art und Weise der Inhalt unterschiedlich angezeigt wird, in diesen Beispielen ist. Das erste Beispiel verwendet ein <div>-Tag zum Anzeigen des Eigenschaftsnamens und ein weiteres zum Anzeigen des Werts. Sie können es in der gleichen Zeile wie folgt anzeigen:

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

Es ist genau wie das zweite Beispiel. Sowohl der Name der Eigenschaft als auch ihr Wert befinden sich im selben Tag. <h2> Das Tag wird zum Anzeigen von Überschriften verwendet. Wenn Sie ein ähnliches Layout erhalten, kann CSS einige Regeln für die Anzeige von Texten haben, die größer als div sind. Wenn Sie für diese Klassen keine Regeln finden können, suchen Sie Regeln für div.

Hinweis: Es ist keine gute Idee, Inhalte direkt in Blockelementen wie div anzuzeigen. Sie könnten sie in ein span-Tag einfügen.

Hier ein paar Ressourcen für HTML und CSS:

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

Answer 2

Es sieht aus wie Sie so etwas wie in dieser Richtung wollen

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

Natürlich Sie müssen das CSS füroptimierenund display-label. Sie sollten ihre block Definition entfernen, wenn sie eine haben.

Wenn Sie keine Zeit haben, den ersten CSS-Lernschritt zu absolvieren, müssen Sie pragmatisch sein und auf eine <table> zurückgreifen, um das Layout-Tuning zu vereinfachen.

BTW, das Lager Site.css einer ASP.NET MVC-Anwendung enthält eine. Display-Label-Definition. Bitte nochmal nachprüfen. Wenn Sie keinen haben, dann ... wird einfach die entsprechende Formatierung nicht angewendet (Stock-Display-Label ist grauer Text IIRC).