CSS布局設(shè)計(jì)是網(wǎng)頁(yè)設(shè)計(jì)中的重要一環(huán)，通過CSS布局設(shè)計(jì)我們可以實(shí)現(xiàn)頁(yè)面的各種效果和功能。但是，由于設(shè)計(jì)師的靈感是很難一下子想出來的，所以需要在平時(shí)學(xué)習(xí)和實(shí)踐中不斷積累。

以下是我個(gè)人的一些布局設(shè)計(jì)靈感分享：

/* 實(shí)現(xiàn)未讀消息角標(biāo) */
.unread-message {
position: absolute;
top: -5px;
right: -5px;
background-color: #f00;
color: #fff;
font-size: 12px;
padding: 2px 5px;
border-radius: 50%;
}
/* 實(shí)現(xiàn)折疊盒子 */
.collapse-container {
overflow: hidden;
max-height: 200px;
transition: all 0.3s;
}
.collapse-trigger.active ~ .collapse-container {
max-height: none;
}
/* 實(shí)現(xiàn)響應(yīng)式垂直居中 */
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.item {
flex-basis: 50%;
}
/* 實(shí)現(xiàn)兩欄布局 */
.container {
display: flex;
}
.left {
flex-basis: 25%;
}
.right {
flex-basis: 75%;
}
/* 實(shí)現(xiàn)瀑布流布局 */
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 20px;
}
.item {
width: 100%;
height: 200px;
}

以上是我的一些CSS布局設(shè)計(jì)靈感分享。在設(shè)計(jì)布局時(shí)要多多嘗試不同的方法和效果，不斷積累經(jīng)驗(yàn)，相信你會(huì)成為一個(gè)優(yōu)秀的設(shè)計(jì)師。