跳到主要内容

第四节 团队介绍模块

一、需求分析

本模块的核心目标是以结构化、直观的方式展示团队成员的基本信息，包括头像、姓名、职务及简要工作经历等。通过设置超链接，用户可以方便地访问成员的详细资料，增强页面的信息传递效率和交互性。同时，模块设计必须兼顾响应式布局，确保在桌面端和移动端设备上均能提供良好的用户体验。

202404221713749177630067 (1)

图 6-4 团队介绍模块

二、操作步骤

（一）构造整体 HTML 结构与外层布局​

使用 !DOCTYPE html 声明文档类型，并通过 html:5 快捷代码创建 HTML5 的基础结构。在主体中，我们首先需要搭建模块的外部容器和标题区域。 HTML 结构设计原则：

  • 模块容器 (.team-introduction-section)：作为整个功能模块的容器，限制最大宽度并居中显示。
  • 标题与副标题 (<h3>, .introduction-subtitle)：提供明确的模块主题，便于用户快速识别。
  • 成员列表容器 (.team-members-row)：包裹所有的团队成员展示卡片，采用 Flexbox 弹性布局实现多列横向排列。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块化管理 - 团队介绍</title>
</head>
<body>
    <div class="team-introduction-section">
        <h3>团队介绍</h3>
        <div class="introduction-subtitle">团队成员展示</div>
        <div class="team-members-row">
            </div>
    </div>
</body>
</html>

外层 CSS 样式配置

/* 模块外层容器 */
.team-introduction-section {
    width: 1200px;
    margin: 0 auto; /* 水平居中 */
}

/* 响应式：屏幕小于960px时宽度设为100% */
@media (max-width: 960px) {
    .team-introduction-section {
        width: 100%;
    }
}

/* 主标题样式 */
.team-introduction-section h3 {
    text-align: center;
    height: 27px;
    font-size: 30px;
    line-height: 26px;
    font-weight: bold;
    color: #3372e3;
    margin-bottom: 20px;
}

/* 副标题样式 */
.team-introduction-section .introduction-subtitle {
    text-align: center;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0px;
}

/* 成员列表容器（核心排版逻辑） */
.team-introduction-section .team-members-row {
    display: flex; /* 开启弹性盒子布局 */
    flex-wrap: wrap; /* 允许子元素在空间不足时换行 */
}

（二）团队成员信息卡片呈现​

在 .team-members-row 容器内部，我们需要为每一位成员编写独立的 HTML 结构。 结构解析：

  • 外层栅格 (.item)：控制每个成员所占的屏幕宽度比例（例如设置 25% 即为一行显示 4 人）。
  • 卡片主体 (.member-card)：控制卡片内部的内边距和背景色。
  • 信息元素：包含头像图、姓名链接以及简介段落。
<div class="team-members-row">
    <div class="item">
        <div class="member-card">
            <a href="#" class="member-image-link">
                <img src="img/7-1-1.png" alt="团队成员张三">
            </a>
            <a href="#" class="member-name-link">张三</a>
            <p>担任项目经理，负责项目整体规划与协调。拥有10年项目管理经验，擅长跨部门沟通与资源整合，成功推动多个大型项目落地。</p>
        </div>
    </div>
    
    <div class="item">
        <div class="member-card">
            <a href="#" class="member-image-link">
                <img src="img/7-1-1.png" alt="团队成员李四">
            </a>
            <a href="#" class="member-name-link">李四</a>
            <p>担任首席软件工程师，专注于后端架构设计与开发。精通PHP编程语言，主导开发多款高性能、高可用的企业级应用系统。</p>
        </div>
    </div>

    <div class="item">
        <div class="member-card">
            <a href="#" class="member-image-link">
                <img src="img/7-1-1.png" alt="团队成员王五">
            </a>
            <a href="#" class="member-name-link">王五</a>
            <p>担任UI/UX设计师，负责产品界面设计与用户体验优化。具有丰富的视觉设计经验和敏锐的用户洞察力，致力于创造美观且易用的界面。</p>
        </div>
    </div>

    <div class="item">
        <div class="member-card">
            <a href="#" class="member-image-link">
                <img src="img/7-1-1.png" alt="团队成员赵六">
            </a>
            <a href="#" class="member-name-link">赵六</a>
            <p>担任产品经理，负责产品需求分析与市场调研。具备出色的产品策略制定能力，成功推出多款深受用户喜爱的互联网产品。</p>
        </div>
    </div>

</div>

组件 CSS 样式配置

/* 栅格宽度控制：PC端每行展示4个（100% / 4 = 25%） */
.item {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    box-sizing: border-box;
    width: 25%;
}

/* 响应式：移动端每行展示1个 */
@media (max-width: 960px) {
    .item {
        width: 100%;
    }
}

/* 成员独立卡片样式 */
.member-card {
    background: #fff;
    padding: 12px;
    cursor: pointer;
}

/* 头像容器样式：利用边框圆角制作圆形头像 */
.member-card .member-image-link {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 150px;
    border: solid 1px #dedede;
    margin-bottom: 40px;
    border-radius: 50%;
    transition: .6s; /* 为后续的悬停动画提前准备过渡时间 */
}

.member-card .member-image-link img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
}

/* 成员姓名样式：单行文本溢出显示省略号 */
.member-card .member-name-link {
    display: block;
    margin: 0 auto;
    margin-bottom: 16px;
    width: 100%; /* 配合文本溢出隐藏使用 */
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    color: #333333;
    text-align: center;

    white-space: nowrap;      /* 强制不换行 */
    overflow: hidden;         /* 溢出部分隐藏 */
    text-overflow: ellipsis;  /* 溢出时显示省略号 */
    transition: .6s;

}

/* 简介文字排版 */
.member-card p {
    font-size: 14px;
    line-height: 26px;
    color: #999999;
    margin: 0 auto;
    text-indent: 2em; /* 首行缩进两字符 */
}

选择图片（建议图片最大边不超过 2048px，最多 20 张）

（三）交互特性优化​

为了提升用户体验，打破静态页面的呆板感，我们为头像区域添加一个鼠标悬停（Hover）时的微交互美化效果。

/* 鼠标悬停在头像容器上的效果 */
.member-card .member-image-link:hover {  
    /* 添加柔和的深色阴影效果 */
    box-shadow: 0px 0px 16px 0px rgba(3, 0, 0, 0.35);
    /* 将原本50%的圆形轻微改变为5像素的圆角矩形，增加视觉动感 */
    border-radius: 5px;
    /* 在垂直方向上向上悬浮移动 10 像素 */
    transform: translateY(-10px);
}

三、效果演示

请查看，以直观感受团队介绍模块在多屏设备下的自适应排版及悬停交互的实际效果。