团队介绍模块制作
以结构化、直观的方式展示团队成员的基本信息，包括头像、姓名、职务及简要工作经历等。后续可以通过设置链接，用户可以方便地访问成员的详细资料，增强了页面的信息传递效率和交互性。同时，模块设计兼顾了响应式布局，确保在各类设备上的良好用户体验。
一、构造HTML结构
使用!DOCTYPE html声明文档类型，并通过html:5的快捷代码创建HTML5的基础结，然后设置语言和标题。
并设计模块布局与结构
模块容器：<div class="team-introduction-section"> 作为整个功能模块的容器，封装了团队介绍的所有内容。
标题元素：<h3>团队介绍</h3> 提供明确的模块主题，便于用户快速识别此区域为团队成员相关信息的展示区域。
副标题元素：<div class="introduction-subtitle">团队成员展示</div> 进一步细化主题，强调该模块专注于对团队成员的具体呈现。
成员列表容器：<div class="team-members-row"> 包含所有团队成员的展示卡片，采用水平布局方式呈现。
<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模块化管理</title> <link rel="stylesheet" href="css/7-2.min.css"> </head> <body> <div class="team-introduction-section"> <h3>团队介绍</h3> <div class="introduction-subtitle">团队成员展示</div> <div class="team-members-row"> //团队列表 </div> </div> </body> </html>
设置对应css（less写法）
.team-introduction-section {
width: 1200px; //宽度
margin: 0 auto; //居中
@media(max-width: 960px) {
width: 100%;
}
h3 {
text-align: center;
height: 27px;
font-size: 30px;
line-height: 26px;
font-weight: bold;
color: #3372e3;
margin-bottom: 20px;
}
.introduction-subtitle {
text-align: center;
height: 16px;
font-size: 16px;
line-height: 16px;
letter-spacing: 0px;
}
.team-members-row {
display: flex;
flex-wrap: wrap;
}
}二、团队成员信息呈现
成员卡片容器：<div class="item"> 作为单个团队成员信息的封装容器，每个成员对应一个独立的 .item 元素。
成员名片：<div class="member-card"> 用于展示成员的基本信息，包括头像、姓名和职务描述。
成员头像：<a href="#" class="member-image-link"> 中嵌套 <img> 标签，通过 src 属性引用成员图片资源，alt 提供图片的替代文本说明。
成员姓名链接：<a href="#" class="member-name-link"> 显示成员的全名，点击可跳转至更详细的个人资料页面（实际应用中应替换为具体链接地址）。
职务描述：<p> 标签内包含成员在团队中的角色、主要职责以及专业技能、工作经验等方面的简介。
<div class="item"> <div class="member-card"> <a href="#" class="member-image-link"> <img src="img/7-1-1.png" alt="团队成员1"> </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="团队成员2"> </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="团队成员3"> </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="团队成员4"> </a> <a href="#" class="member-name-link">赵六</a> <p>担任产品经理，负责产品需求分析与市场调研。具备出色的产品策略制定能力，成功推出多款深受用户喜爱的互联网产品。</p> </div> </div>
添加css属性
.member-card {
background: #fff;
padding: 12px;
cursor: pointer;
.member-image-link {
display: block;
margin: 0 auto;
width: 150px;
height: 150px;
border: solid 1px #dedede;
margin-bottom: 40px;
border-radius: 50%;
img {
border-radius: 50%;
width: 150px;
height: 150px;
}
}
.member-name-link {
width: 237px;
height: 16px;
font-size: 16px;
line-height: 16px;
color: #333333;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
margin: 0 auto;
margin-bottom: 16px;
transition: .6s;
}
p {
font-size: 14px;
line-height: 26px;
color: #999999;
margin: 0 auto;
text-indent: 2em;
}
}
.item {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 15px;
margin-top: 15px;
box-sizing: border-box;
width: 25%;
@media(max-width: 960px) {
width: 100%;
}
}三、交互特性
为了添加用户体验，添加一个鼠标经过团队模块的美化效果。
.member-image-link:hover {
/* 添加阴影效果 */
box-shadow: 0px 0px 16px 0px rgba(3, 0, 0, 0.35);
/* 设置元素四个角为5像素圆角 */
border-radius: 5px;
/* 在垂直方向上向上移动元素10像素 */
transform: translateY(-10px);
/* 定义样式变化过渡动画持续时间为0.6秒 */
transition: .6s;
}效果演示
请查看效果演示以直观感受固定导航功能的实际效果。
文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。
文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。
