0

cake bakeProduct Controller とそのビュー (index.cpt、add.cpt、edit.ctp など) が含まれるテスト インストールをケーキ焼き ( ) しました。 2 つの部門:actionとproducts index.

CSS ファイルにactionsdiv タグが表示されますが、products index. これらの部門のコードは以下のとおりです。

/** containers **/
div.form,
div.index,
div.view {
    float:right;
    width:76%;
    border-left:1px solid #666;
    padding:10px 2%;
}
div.actions {
    float:left;
    width:16%;
    padding:10px 1.5%;
}

私の質問は次のとおりです。

  1. products indexのパラメータが で定義されているのはなぜdiv.viewですか?

  2. 私は彼らの行を見div.formて、空の括弧ではなくで終わらせます。これは何を意味するのでしょうか？div.index,

  3. 現在、ページは次のように縦に 2 つに分割されています。

    ---------------------
|    |              |
|    |              |
|    |              |
|    |              |
|    |              |
---------------------

以下を作成するために採用する理想的な方法は何ですか? これらの div タグのみを使用して以下を作成することは可能ですか、それともテーブルを使用して検討する必要がありますか? すべてのページに示されているように、左側と上部にナビゲーション バーを配置したいと考えています。と を使用しapp/views/layouts/default.ctpてthis->element()います。

    ---------------------
    |    |              |
    |    |--------------|
    |    |              |
    |    |              |
    |    |              |
    ---------------------
4

1 に答える 1

1

CakePHPはわかりませんが、質問の大部分はCSSに限定されています。

製品インデックスのパラメータがdiv.viewで定義されているのはなぜですか？

これは、ビューとは何かの一般的な実装があるという事実が原因である可能性が最も高いです。すべての「ビュー」は同じレイアウトを共有するため、同じ場合は各ページのCSSファイルで繰り返す必要はありません。divにクラスのタグを付けて（それが目的です）、先に進みます。

div.formとdiv.indexの行が、空の角かっこではなく、で終わっているのがわかります。これは何を意味するのでしょうか？

これはCSSの複合セレクターです。複数のセレクターが同じスタイルを共有する場合、ルールセット宣言の前にコンマ区切りのリストでそれらを示すことができます。あなたの例では、div.form, div.index, div.viewすべてが同じスタイル宣言を共有しています。空の角かっこを使用しても、スタイル宣言はありません。

http://www.w3.org/TR/selectors/#grouping

3番目の質問では、次のようなHTMLがあると仮定します。

<div>
  <div class="actions"><!--your actions --></div>
  <div class="view"><!-- your product index view--></div>
</div>

タグの子としてdivタグを追加しdiv.viewて、上部にナビゲーションバーを表示できます。そのようです：

<div>
  <div class="actions"><!--your actions --></div>
  <div class="view">
     <div class="custom_nav_bar"><!-- your new html --></div>
     <div class="view_content">
         <!-- your product index view-->
     </div>
  </div>
</div>

次に、のcssをいじってdiv.custom_nav_bar、div.view_content目的の高さ/色を取得できます。

または、テーブルの使用を検討する必要があります

しないでください。テーブルには目的がありますが、レイアウトには目的がありません。

于 2012-04-13T17:50:57.283 に答える