[分享]css个人资料布局代码示例

CSS是实现网站排版与展示非常重要的技术，可以实现炫酷的效果和布局，下面我们来看一下个人资料布局的CSS代码示例：/ 个人资料布局 / .container { display: flex; just...

CSS是实现网站排版与展示非常重要的技术，可以实现炫酷的效果和布局，下面我们来看一下个人资料布局的CSS代码示例：

/* 个人资料布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-card {
  display: flex;
  flex-direction: column;
  width: 350px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 20px;
}

.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.bio {
  font-size: 16px;
  color: #999;
  margin-bottom: 20px;
}

.stats {
  display: flex;
  justify-content: space-around;
  font-size: 18px;
}

.stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats .stat .value {
  font-weight: bold;
}

.stats .stat .label {
  color: #999;
  margin-top: 5px;
} 

以上代码使用了Flex布局，实现了个人资料的样式，包含头像、名字、简介和一些基本的用户信息。