豆瓣電影是人們經(jīng)常使用的一個電影分類網(wǎng)站。設(shè)計師為了使它的網(wǎng)頁內(nèi)容更加精美，準(zhǔn)確地反應(yīng)電影類型，使用了一些 CSS 樣式來實現(xiàn)分類布局, 這里我們就具體看一下它的實現(xiàn)方法。

/* 分類內(nèi)容 */
.category {
display: flex; /* 按行布局 */
flex-wrap: wrap; /* 當(dāng)一行顯示不下時自動換行 */
}
/* 分類塊 */
.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%;
}
/* 分類塊中的標(biāo)題 */
.category-title {
margin: 5px 0;
font-size: 16px;
}
/* 分類塊中的評分 */
.category-rating {
color: #ccc;
font-size: 14px;
}

上面的代碼實現(xiàn)了一個簡單的分類布局，我們可以通過修改類名的方式方便地修改樣式。

通過這個簡單的例子，我們可以看到 CSS 樣式在實際開發(fā)中的作用是非常大的，可以幫助我們更方便地布局和樣式化網(wǎng)頁，達(dá)到視覺和交互效果的提升。