HTML+CSS 制作联系人页面(可自适应)
时间: 2023-07-29 12:11:22 浏览: 78
好的,以下是一个简单的联系人页面的 HTML 代码和 CSS 样式。
HTML 代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>联系人页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>联系人信息</h1>
</div>
<div class="contacts">
<div class="contact">
<img src="https://via.placeholder.com/150" alt="头像">
<div class="info">
<h2>姓名</h2>
<p>电话:123456789</p>
<p>邮箱:xxx@xxx.com</p>
</div>
</div>
<div class="contact">
<img src="https://via.placeholder.com/150" alt="头像">
<div class="info">
<h2>姓名</h2>
<p>电话:123456789</p>
<p>邮箱:xxx@xxx.com</p>
</div>
</div>
<div class="contact">
<img src="https://via.placeholder.com/150" alt="头像">
<div class="info">
<h2>姓名</h2>
<p>电话:123456789</p>
<p>邮箱:xxx@xxx.com</p>
</div>
</div>
</div>
</div>
</body>
</html>
```
CSS 样式:
```css
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.contacts {
display: flex;
flex-wrap: wrap;
}
.contact {
width: 100%;
margin-bottom: 20px;
}
@media screen and (min-width: 600px) {
.contact {
width: calc(50% - 10px);
margin-right: 20px;
}
.contact:nth-child(2n) {
margin-right: 0;
}
}
.contact img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
.info {
text-align: center;
}
.info h2 {
margin-bottom: 5px;
}
.info p {
margin: 0;
}
```
这段代码会生成一个联系人页面,包含一个标题和三个联系人信息。其中,头像图片使用了一个占位符图片。CSS 样式中使用了 flexbox 布局来排列联系人信息,同时使用了媒体查询来实现页面的自适应。在屏幕宽度小于 600px 时,联系人信息会排成一列,而在大于等于 600px 时,联系人信息会排成两列。