CSS布局设计灵感分享 |css font 字体设置

以下是偶个人的一些布局设计灵感分享：

/* 实现未读消息角标 */
.unread-message {
position: absolute;
top: -5px;
right: -5px;
background-color: #f00;
color: #fff;
font-size: 12px;
padding: 2px 5px;
border-radius: 50%;
}
/* 实现折叠盒子 */
.collapse-container {
overflow: hidden;
max-height: 200px;
transition: all 0.3s;
}
.collapse-trigger.active ~ .collapse-container {
max-height: none;
}
/* 实现响应式垂直居中 */
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.item {
flex-basis: 50%;
}
/* 实现两栏布局 */
.container {
display: flex;
}
.left {
flex-basis: 25%;
}
.right {
flex-basis: 75%;
}
/* 实现瀑布流布局 */
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 20px;
}
.item {
width: 100%;
height: 200px;
}

以上是偶的一些CSS布局设计灵感分享。在设计布局时要多多尝试不同的方法和效果，不断积累经验，相信你会成为一个优秀的设计师。