在以后介绍 Drupal 主题的课程里，我们会详细的介绍怎么样创建主题，为页面上的元素添加样式等等。这里先简单的修改一下这个电影列表视图的样式 ，主要是想让录的视频更好看一点 ... 先打开 配置 .. 性能 .. 去掉合并 CSS 文件这个选项 .. 再保存一下 .. 不然 Drupal 会去压缩 Drupal 主题使用的 CSS 文件，把几个文件合并到一块儿 .. 这样我们对样式表的修改就不能立即看到效果了 ..

然后再打开编辑器 .. 找到桌面上的这个 web-stack .. 下面的 app ，drupal-8 .. 它就是 Drupal 8 这个项目所在的目录 .. 下面我们可以直接去修改核心主题的样式表 .. 这种方法不推荐用在正式的网站上 .. 因为如果你升级了 Drupal 以后，这些核心自带的东西都会被覆盖掉 ..

打开 core .. 找到这里的 themes ... bartik 是我们网站现在用的前台的主题 .. css .. components .. 这里有一些 css 文件 .. 找到 views.css .. 下面我们把需要的样式放到这个文件里面 ..

打开电影页面视图的前台页面 .. 可以使用浏览器的开发者工具查看一下列表项目 .. 我想先去缩小一下海报的显示尺寸 .. 现在它的宽度是 200 .. 缩小一半是 100，这样在高清屏幕上显示的时候，这个图片会很清晰 .. 图像的包装上面有一个 views-field-field-poster 这个类 . 使用它作为这个样式的选择器 ..

粘贴过来 .. 后面再加上一个 img .. 添加一个 width .. 设置成 100px ..

然后我们再让海报靠左边去显示 .. 先使用一个海报字段的包装上的 css 类 .. 里面添加一个 float ，设置成 left .. 再添加一个 margin-right .. 设置成 20px .. 这样海报的右边会有一个 20px 的外边距 ..

列表的项目与项目之间我想也再添加一个间隔 .. 这些项目的大的包装上面都有一个 views-row 这个类 .. 用它作为样式的选择器 .. 添加一个 margin-bottom .. 设置成 30px　　．．　 刷新 ..

这里项目与项目之间的间隔好像没有作用 .. 是因为我们浮动了海报的包装元素 .. 回到这个视图的管理界面 .. 设置一下格式 .. 在行类这里添加一个 clearfix .. 它可以解决刚才遇到的问题 .. 应用 .. 保存 ..

再到视图的前台页面预览一下 .. 现在这个列表就比之间好看一些了 ...