如何使用 HTML 和 CSS 设计"认识团队"页面

htmlcssweb developmentfront end technology更新于 2024/7/24 22:04:17

在本文中，我们将学习如何使用 HTML 和 CSS 的各种属性设计"认识团队"页面。在为任何企业或组织创建网站时，团队页面都扮演着非常重要的角色。来自不同国家的人们通过团队成员将业务联系起来。团队页面是介绍团队的绝佳方式，可以展示组织或公司的成员。

使用的属性

示例中使用的属性如下:-

text-align - 将标题元素定义为居中。
background-color - 定义背景的主体颜色。
color - 定义文本的颜色。
padding - 定义内容和边框之间的空间。
width - 定义团队卡片的宽度。
gap - 定义行和列之间的大小。
border - 此属性允许设置边框元素的宽度和颜色。
border-radius − 定义单个成员图片的圆角半径。
display − 定义 flex 的值，用于设置 body 的自动宽度和高度。
justify-content − 定义浏览器如何显示 body 中的内容。
Margin-top − 定义元素的上边距。
Margin-bottom − 定义元素的下边距。

示例 1

在下面的示例中，我们将创建一个简单的网页，展示由四名成员组成的团队。该网页以一个页眉开头，其中包含一个带有直线的大标题。页面的主要内容包含在一个类名为"team-body"的容器中。该容器显示四张卡片，每张卡片代表一位团队成员。每张卡片都包含团队成员的图片、姓名以及相应的职位。页面的样式由内部 CSS 完成。页面的背景颜色设置为粉红色，文本颜色设置为白色。卡片采用圆角和边框样式。图片也采用圆角设计，卡片内的文本居中对齐。页面的整体设计简洁有效，能够有效展示团队成员。

<!DOCTYPE html>
<html>
<title>Team Page in HTML</title>
<head>
   <style>
      .team-header{
         text-align:center;
      }
      body{
         background-color: #c41a55;
         color: white;
         padding:20px;
      }
      .card{
         width:20%;
         gap:5%
         border:1px solid grey;
         border-radius:30px;
         background-color: #9f8;
      }
      .team-detail{
         padding:5px 10px;
      }
      img{
         width:100%;
         height:auto;
         border-radius: 20px;
      }
      .team-body{
         display:flex;
         justify-content:center;
         align-items:center;
         gap:6%;
         margin-top:20px;
      }
   </style>
</head>
<body>
   <div class="team-header">
      <p class="heading" Style="font-size: 50px;">Meet My Team</p>
      <hr style="border-color:white; width:280px; margin-bottom:20px">
   </div>
   <div class="team-body">
      <div class="card">
         <img class="team-member-image" src="https://img.freepik.com/premium-vector/confident-corporate-beard-professional-man-with-black-suit-tie-cartoon-vector-illustration_123673-147.jpg?w=2000">
         <div class="team-detail">
            <p class="name" style="color:black; text-align:center;">Akshay Shinde</p>
            <p class="designation" style="color:grey; text-align:center; font-weight:bold;">PHP Developer </p>
         </div>
      </div>
      <div class="card">
         <img class="team-member-image" src="https://img.freepik.com/premium-vector/confident-corporate-beard-professional-man-with-black-suit-tie-cartoon-vector-illustration_123673-147.jpg?w=2000">
         <div class="team-detail">
            <p class="name" style="color:black; text-align:center;">Shriansh</p>
            <p class="designation" style="color:grey; text-align:center; font-weight:bold;">Java Developer</p>
         </div>
      </div>
      <div class="card">
         <img class="team-member-image" src="https://img.freepik.com/premium-vector/confident-corporate-beard-professional-man-with-black-suit-tie-cartoon-vector-illustration_123673-147.jpg?w=2000">
         <div class="team-detail">
            <p class="name" style="color:black; text-align:center;">Keshav</p>
            <p class="designation" style="color:grey; text-align:center; font-weight:bold;">IOS Developer</p>
         </div>
      </div>
      <div class="card">
         <img class="team-member-image" src="https://img.freepik.com/premium-vector/confident-corporate-beard-professional-man-with-black-suit-tie-cartoon-vector-illustration_123673-147.jpg?w=2000">
         <div class="team-detail">
            <p class="name" style="color:black; text-align:center;">Manish Das</p>
            <p class="designation" style="color:grey; text-align:center;font-weight:bold;">SQL Developer</p>
         </div>
      </div>
   </div>
</body>
</html>