对董事长 ,经理,优秀员工等人物进行相关介绍 要求包含人物照片和文字介绍部分使用html和css编写代码web
时间: 2023-12-06 08:42:20 浏览: 37
以下是对公司董事长、经理和优秀员工的介绍,包含人物照片和文字介绍,使用HTML和CSS编写的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公司人物介绍</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
.person {
background-color: #f2f2f2;
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
text-align: center;
width: 250px;
}
.person img {
border-radius: 50%;
height: 150px;
width: 150px;
}
.person h2 {
margin-top: 10px;
}
.person p {
margin: 10px 0;
}
</style>
</head>
<body>
<header>
<h1>公司人物介绍</h1>
</header>
<div class="container">
<div class="person">
<img src="https://via.placeholder.com/150" alt="董事长照片">
<h2>董事长</h2>
<p>董事长简介……</p>
</div>
<div class="person">
<img src="https://via.placeholder.com/150" alt="经理照片">
<h2>经理</h2>
<p>经理简介……</p>
</div>
<div class="person">
<img src="https://via.placeholder.com/150" alt="优秀员工照片">
<h2>优秀员工</h2>
<p>优秀员工简介……</p>
</div>
</div>
</body>
</html>
```
你可以将其中的照片和文字内容替换为公司实际的董事长、经理和优秀员工的信息。