0

我蛋糕烘焙 ( cake bake) 一个测试安装，它产生了产品控制器及其视图，例如 index.cpt、add.cpt、edit.ctp 等。我正在查看这些视图正在使用的 CSS 文件，并且有两个部门：action和products index。

我actions在 CSS 文件中看到了 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's 的参数定义在下div.view？

  2. 我看到div.form并用一个而不是空括号div.index结束他们的行。,这是什么意思？

  3. 现在页面被垂直分成两个如下。

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

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

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

1 回答 1

1

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

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

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

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

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

然后，您可以使用 cssdiv.custom_nav_bar并div.view_content获得所需的高度/颜色。

还是我应该考虑使用表格

请不要。表格是有目的的，但不是为了布局。

于 2012-04-13T17:50:57.283 回答