html - CSS div 标签类名 (CakePHP)

Question

我烘焙蛋糕(蛋糕烘焙)一个测试安装，它产生了产品 Controller 及其 View ，如 index.cpt、add.cpt、edit.ctp 等。我正在查看这些 View 正在使用的 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%;
}

我的问题是:

1. 为什么products index的参数定义在div.view下？

2. 我看到 div.form 和 div.index 以 , 而不是空括号结束它们的行。这是什么意思？

3. 此时页面被垂直分成两部分，如下所示。

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

采用什么最佳方法来制作以下内容？是否可以单独使用这些 div 标签进行以下操作，还是我应该考虑使用表格？我想将导航栏放在左侧和顶部，如所有页面所示。我正在使用 app/views/layouts/default.ctp 和 this->element()。

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

Answer 1

我不了解 CakePHP，但您的大部分问题仅限于 CSS。

why is products index's parameters defined under div.view?

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

I see div.form and div.index end their lines with a , rather than empty brackets. What does this mean?

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

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 来获得所需的高度/颜色。

or should I look into using tables

请不要。表格有其用途，但不是为了布局。