前面我们创建了一个显示电影内容的列表页面，这个视频我们来看一下如何控制视图的样式。

要想控制视图的样式，我们需要知道视图都输出了哪一些 HTML 标签，还有在这些标签上都定义了哪一些 CSS 类。通过这些类，我们就可以在主题的样式表里添加一些CSS 样式来改变视图的样式。

这里我们需要用到一些 CSS 的知识，如果你不知道什么是 CSS，可以先看一下宁皓网的 CSS 基础教程。

下面我们可以查看一下在这个视图页面上输出的元素，把鼠标放在视图输出的某个字段上，点击右键，选择 审查元素，这里我们用的是 Chrome 浏览器内置的开发者工具。

你会发现，视图在包装内容的元素上定义了很多个类…

在第一行内容的包装元素上定义了一个 .views-row-1 ，第二行内容里会有一个 .views-row-2，第三行里是 .views-row-3，视图会为每一行内容添加一个特别的类，使用这些特别的类我们可以让每一行内容都拥有不同的样式。

另外在奇数行的内容上会定义一个 .views-row-odd ，在偶数行的内容上会定义一个 .views-row-even。

.views-row-odd 这个类可以让我们统一为所有在奇数行的内容定义样式。.views-row-even 这个类可以为所有在偶数行的内容定义样式。

视图还会在第一个内容上添加一个 .views-row-first 类，在最后一个内容上添加一个 .views-row-last 类。你可以使用它们分别针对第一个内容和最后一个内容去定义一些样式。

样式

其实很多时候我们并不需要这么复杂的设计，为了保持输出的代码的整洁，如果你不到这些 CSS 类，可以去掉它们。你也可以为包装行内容的元素定义自己的类。

回到视图的编辑界面，确定我们编辑的是 电影 视图里的 电影页面 这个视图显示。

然后点击 格式 后面的 设置。

这里勾选了 添加视图的行类，就是前面我们看到的 .views-row-1 ，.views-row-2 这些类。

还勾选了 添加条纹，就是 odd 或 even 类，还有 first 或 last 这些类的选项。

我们先取消这两个选项。

然后在上面的 行类 这个文本框里，定义自己的类名，输入 movie-page-list，这样会在包装行内容的元素上统一添加这个类。

再调整一下这个设置的应用范围… 目前是应用到所有显示上… 我们选择 当前 page，这样我们做的设置只会影响这个 电影页面 显示。

点击应用… 保存...

回到前台页面，刷新…

再查看一下行内容的元素…

你会发现元素上的 .views-row，还有 .views-row-odd ， .views-row-eve 这些类已经不见了。这里只会使用我们自已定义的 .movie-page-list 这个类。

下面我们可以打开主题使用的样式表，然后为 .movie-page-list 这个类添加点样式。

Drupal 默认的主题是 Bartik ，我们不要直接修改这个主题，因为在以后升级 Drupal 的时候，会覆盖掉我们的修改。

所以，我复制了一下这个主题，修改了主题的名称，然后放在了 sites/all/themes 这个目录下 … 具体的方法你可以看一下宁皓网的 Drupal 7 的主题课程。

打开 movietalk ，在根目录下的 themes ，就是默认的主题所在的位置 。找到 sites ， all ，打开 themes ，这里的 ninghaobartik 就是我复制并修改的主题。

打开 css 这个文件夹，打开 styls.css 这个样式表…

浏览到这个样式表的最下方，先添加一小段注释… 电影内容列表页面…

然后输入 .movie-page-list{width:150px;float:left;margin-right:20px;margin-bottom:20px}

先设置下每行内容的宽度，设置为 150 像素，然后让行内容向左边浮动显示，float:left，再添加点外边距，先添加一个右边的外边距 margin-right:20px，再添加一个下边的外边距 margin-bottom:20px。

保存一下这个样式表。

回到前台页面，刷新…

现在这个电影内容列表， 就会按照我们预期的显示了。