豆瓣电影是人们经常使用的一个电影分类网站。设计师为了使它的网页内容更加精美，准确地反应电影类型，使用了一些 CSS 样式来实现分类布局, 这里我们就具体看一下它的实现方法。

/* 分类内容 */
.category {
display: flex; /* 按行布局 */
flex-wrap: wrap; /* 当一行显示不下时自动换行 */
}
/* 分类块 */
.category-item {
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}
/* 分类块中的图片 */
.category-cover {
width: 100%;
}
/* 分类块中的标题 */
.category-title {
margin: 5px 0;
font-size: 16px;
}
/* 分类块中的评分 */
.category-rating {
color: #ccc;
font-size: 14px;
}

上面的代码实现了一个简单的分类布局，我们可以通过修改类名的方式方便地修改样式。

通过这个简单的例子，我们可以看到 CSS 样式在实际开发中的作用是非常大的，可以帮助我们更方便地布局和样式化网页，达到视觉和交互效果的提升。