关于我们页面模板

在网站开发中，关于我们页面是必不可少的。一个能够展示公司信息和团队成员的页面能够帮助客户更好地了解公司文化和价值观。

下面是一个简单的关于我们页面模板，使用HTML和CSS进行布局和设计，你可以在CodePen上查看完整代码和效果：https://codepen.io/pen/?&editable=true&editors=110

HTML结构

<header class="header">
  <h1 class="logo">Logo</h1>
  <nav class="nav">
    <ul class="nav-list">
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">About Us</a></li>
      <li class="nav-item"><a href="#">Services</a></li>
      <li class="nav-item"><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>

<main class="main">
  <section class="section-about">
    <h2>About Us</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </section>
  
  <section class="section-team">
    <h2>Our Team</h2>
    <ul class="team-list">
      <li class="team-item">
        <img class="team-img" src="https://via.placeholder.com/150" alt="Team member">
        <h3 class="team-name">Name</h3>
        <p class="team-job">Job Title</p>
      </li>
      <li class="team-item">
        <img class="team-img" src="https://via.placeholder.com/150" alt="Team member">
        <h3 class="team-name">Name</h3>
        <p class="team-job">Job Title</p>
      </li>
      <li class="team-item">
        <img class="team-img" src="https://via.placeholder.com/150" alt="Team member">
        <h3 class="team-name">Name</h3>
        <p class="team-job">Job Title</p>
      </li>
    </ul>
  </section>
</main>

<footer class="footer">
  <p>&copy; 2022 Company Name. All Rights Reserved.</p>
</footer>

本模板使用了HTML5的语义化标签，包括header、main、section和footer。

其中header包含有LOGO和导航菜单，main包含有公司介绍和团队信息，footer包含有版权信息。

CSS样式

/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: #fff;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-list {
  display: flex;
}

.nav-item {
  margin: 0 10px;
}

.nav-item a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  border-radius: 5px;
}

.nav-item a:hover {
  background-color: #fff;
  color: #333;
}

/* 主体样式 */
.section-about {
  padding: 50px;
  text-align: center;
  background-color: #f2f2f2;
}

.section-about h2 {
  margin-bottom: 30px;
}

.section-team {
  padding: 50px;
  text-align: center;
}

.section-team h2 {
  margin-bottom: 30px;
}

.team-list {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-top: 50px;
}

.team-item {
  flex-basis: 30%;
}

.team-img {
  border-radius: 50%;
  margin-bottom: 20px;
}

/* 底部样式 */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #333;
  color: #fff;
}

CSS样式使用了Flex布局和响应式设计，可以适应不同的屏幕大小和分辨率。同时使用了颜色和图片等元素，能够更好地展示公司文化和价值观。

结语

以上是一个简单的关于我们页面模板，可以根据自己的需求进行更改和完善。如果想查看完整代码和效果，请访问：https://codepen.io/pen/?&editable=true&editors=110