MVC 2の表示レイアウトCSSコントロールのレイアウト

Question

新しいMVC2 Webアプリケーションの開発で何をしようとしているのか新しくなったので、これは初心者の質問です。

ウェブページのコントロールとコンテンツレイアウトのオプションを理解する必要があります。私はMVC2を使用しているので、私はコントローラ、ビュー、ViewModels、およびビューテンプレートを使用しています。 私がスピンアップする必要があるのは、特定のビューのコントロールとコンテンツの詳細なレイアウトを制御することです。

以下、私の課題を説明する自動生成テンプレートの2つの例を貼り付けました。私はそのレイアウトが私のSite.cssドキュメントのCSSによって制御されていることがわかります。最初の例では、DisplayLabelとDisplayFieldの順次フローを取得します。例2のDisplayFieldと同じ行にあるDisplayLabelの隣接レイアウトを好む。しかし、例2は、書式設定がラベルとフィールドに適用されるため、単純すぎる。

私はこの学習曲線に取り組む正しい方法はMicrosoft Expressionだと思うが、現時点でExpressionに取り組むための個人的な帯域幅はない。

誰でも私にCSSフォーマットの例をたくさん公開するリソースを教えてもらえますか？私は構文の質問がたくさんあります。たとえば、私はSite.cssを参照していると信じていますが、Site.cssに "display-label"セクションが見つかりません。

---

例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

あなたが投稿例は、構造用の2つの異なるHTML要素を使用して、コンテンツが表示されている方法は、これらの例で異なっています。最初の例では、プロパティ名の表示には<div>タグを使用し、値の表示にはもう1つのタグを使用します。

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

これは、2番目の例と似ています。プロパティ名とその値は同じタグ内にあります。 <h2>タグは見出しの表示に使用されます。同様のレイアウトを取得した場合、CSSはdivでより大きいテキストを表示するためのいくつかのルールを持つかもしれません。それらのクラスのルールが見つからない場合は、divのルールを参照してください。

注：divなどのブロック要素に直接コンテンツを表示することはお勧めできません。それらをスパンタグに入れることができます。あなたはこれらの行もちろん

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

に沿ってのような何かをしたいようですが、見え

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

Answer 2

：

はここでHTMLやCSSのためのいくつかのリソースですのCSSを調整する必要がありますおよびdisplay-label。それらがある場合はblockの定義を削除したいと思うでしょう。

さらに、最初のCSS学習ステップを踏まなければならない場合は、レイアウトチューニングを簡略化するために、<table>で実際的でフォールバックする必要があります。

ところで、ASP.NET MVCアプリケーションの在庫Site.cssには、.display-label定義が含まれています。もう一度確認してください。あなたが持っていない場合、対応する書式設定は適用されません（在庫表示ラベルは灰色のテキストIIRCです）。