在 WordPress 中创作 Bio Box CSS

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《在 WordPress 中创作 Bio Box CSS》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

这段 CSS 代码创建了一个作者信息框，包含作者头像、姓名、简介和查看全部文章的链接，从而提升读者参与度。

PHP 代码：

/* ---------------------------------------------------------- */
/*                     作者信息框                              */
/* ---------------------------------------------------------- */
.author-bio {
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid rgba(0,0,0,.1);
    padding-top: 30px;
    margin-top: 30px;
}
.author-bio .author-avatar {
    display: inline-flex;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    line-height: 0;
    border-radius: 100%;
}
.author-bio .desc-wrapper > * {
    margin: 0 0 10px 0;
}
.author-bio .desc-wrapper > *:last-child {
    margin-bottom: 0;
}
.author-bio .desc-wrapper p,
.author-bio .desc-wrapper a {
    font-size: 0.9rem;
}

@media only screen and (max-width: 767px) {
    .author-bio {
        flex-direction: column;
        text-align: center;
    }
}

完整文章：在 WordPress 中创建作者信息框 CSS 代码片段

今天关于《在 WordPress 中创作 Bio Box CSS》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！