Question

我用蛋糕烘焙（cake bake）测试安装产生了产品控制器及其视图，如index.cpt，add.cpt，edit.ctp等。我正在查看CSS文件这些观点正在使用，有两个部分：action和products index。

我在CSS文件中看到了actions div标签，但我看不到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%;
}

我的问题是：

为什么在products index下定义div.view的参数？
我看到div.form和div.index以,而不是空括号结束他们的行。这是什么意思？

现在，页面被垂直划分为两个，如下所示。

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

用于制作以下内容的理想方法是什么？是否可以单独使用这些div标签进行以下操作，还是应该查看使用表格？我想在所有页面上显示左侧和顶部的导航栏。我正在使用app/views/layouts/default.ctp和this->element()。

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

Answer 1

我不知道CakePHP，但你的大部分问题仅限于CSS。

为什么在div.view下定义产品索引的参数？

这很可能是，因为视图是通用的实现。所有“视图”共享相同的布局，因此如果每个页面都相同，则无需在CSS文件中重复自己。只需用一个类标记div（这就是它们的用途），并继续前进。

我看到div.form和div.index以a而不是空括号。这是什么意思？

这是CSS中的组合选择器。当多个选择器共享相同的样式时，您可以在规则集声明之前以逗号分隔的列表表示它们。在您的示例中，div.form, div.index, div.view都共享相同的样式声明。使用空括号将给出 no style declaration 。

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

关于第三个问题，假设你有一些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>

然后，您可以使用div.custom_nav_bar和div.view_content的CSS来愚弄，以获得所需的高度/颜色。

或者我应该考虑使用表格

请不要。表有目的，但不适用于布局。

CSS div标签类名（CakePHP）

1 个答案: