用html加css加js写一个关于我们的页面
时间: 2023-12-13 17:05:57 浏览: 31
好的,以下是一个简单的关于我们页面的HTML、CSS和JS代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>About Us</h1>
<nav>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section class="about-section">
<h2>Who We Are</h2>
<p>We are a team of passionate individuals dedicated to providing top-quality services to our clients. With years of experience in the industry, we have built a reputation for delivering exceptional results and exceeding expectations.</p>
</section>
<section class="team-section">
<h2>Our Team</h2>
<div class="team-member">
<img src="member1.jpg" alt="Team Member">
<h3>John Doe</h3>
<p>CEO</p>
</div>
<div class="team-member">
<img src="member2.jpg" alt="Team Member">
<h3>Jane Smith</h3>
<p>COO</p>
</div>
<div class="team-member">
<img src="member3.jpg" alt="Team Member">
<h3>Bob Johnson</h3>
<p>CFO</p>
</div>
</section>
</main>
<footer>
<p>© 2021 About Us. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
}
nav a {
color: #fff;
text-decoration: none;
margin-left: 20px;
}
nav a:first-child {
margin-left: 0;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.about-section {
margin-bottom: 40px;
}
.team-section {
display: flex;
flex-wrap: wrap;
}
.team-member {
flex-basis: calc(33.33% - 20px);
margin-right: 20px;
margin-bottom: 20px;
padding: 20px;
background-color: #f2f2f2;
text-align: center;
}
.team-member:last-child {
margin-right: 0;
}
.team-member img {
max-width: 100%;
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
```
JS代码:
```
// Add JavaScript here
```
说明:
- HTML代码中定义了一个header、main和footer,header中包含了一个标题和导航栏,main中包含了两个section元素,分别是公司简介和团队成员,footer中包含了版权信息。
- CSS代码中定义了基本的样式,包括排版、颜色、背景等。
- JS代码暂时为空,可以根据需要进行添加。