<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>班组介绍与个人信息</title>
<
style>
body {
font-family
: 'Open Sans', sans-serif;
background-color
: #e6f7ff;
margin
: 0;
padding
: 0;
}
.team-intro {
background-color
: #ffffff;
border
: 1px solid #ddd;
border-radius
: 8px;
box-shadow
: 0 4px 8px rgba(0, 0, 0, 0.1);
padding
: 20px;
margin
: 20px auto;
max-width
: 800px;
}
.team-intro h2 {
color
: #333;
font-size
: 24px;
margin-bottom
: 10px;
}
.team-intro p {
color
: #666;
font-size
: 16px;
line-height
: 1.6;
}
.member-list {
display: flex;
flex-wrap
: wrap;
justify-content
: center;
gap
: 20px;
margin
: 20px auto;
max-width
: 1000px;
}
.member-card {
background-color
: #ffffff;
border
: 1px solid #ddd;
border-radius
: 8px;
box-shadow
: 0 2px 4px rgba(0, 0, 0, 0.1);
padding
: 20px;
text-align
: center;
position
: relative;
transition
: all 0.3s ease;
}
.member-card
:hover {
background-color
: #f5f5f5;
box-shadow
: 0 4px 8px rgba(0, 0, 0, 0.2);
transform
: scale(1.05);
}
.member-image {
border-radius
: 50%;
box-shadow
: 0 2px 4px rgba(0, 0, 0, 0.1);
width
: 100px;
height
: 100px;
object-fit
: cover;
margin-bottom
: 10px;
}
.member-name {
color
: #333;
font-size
: 18px;
margin-bottom
: 5px;
}
.member-position {
color
: #666;
font-size
: 14px;
}
.member-info {
position
: absolute;
top
: 100%;
left
: 50%;
transform
: translateX(-50%);
background-color
: rgba(0, 0, 0, 0.8);
color
: #fff;
padding
: 10px;
border-radius
: 4px;
width
: 200px;
opacity
: 0;
visibility: hidden;
transition
: all 0.3s ease;
}
.member-card
:hover .member-info {
opacity
: 1;
visibility: visible;
animation
: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity
: 0;
transform
: translateX(-50%) translateY(-10px);
}
to {
opacity
: 1;
transform
: translateX(-50%) translateY(0);
}
}
</
style>
</head>
<body>
<
div class="team-intro">
<h2>班组简介</h2>
<img src="1.jpg" alt="成员1" class="member-image">
<p>csdcsddcs</p>
</
div>
<
div class="member-list">
<
div class="member-card">
<img src="1.jpg" alt="成员1" class="member-image">
<
div class="member-name">1</
div>
<
div class="member-position">班长</
div>
<
div class="member-info">张三拥有多年的行业经验，具备出色的领导能力
和技术水平。</
div>
</
div>
<
div class="member-card">
<img src="1.jpg" alt="成员2" class="member-image">
<
div class="member-name">李四</
div>
<
div class="member-position">成员</
div>
<
div class="member-info">李四擅长解决复杂的技术问题，工作认真负责。</
div>
</
div>
</
div>
</body>
</html>
本文介绍了如何使用div的visibility和display属性来实现元素的显示与隐藏。visibility仅隐藏元素但保留其占据的空间，而display则使元素完全消失，释放其所占空间。文中提供了具体的JavaScript操作示例。
扫一扫
4880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
