制作一个小组成员及项目介绍网页,用两列布局风格,但是,当设备屏幕像素宽度小于800px时,自动响应成一列布局。 网页要求有小组成员Logo和一-张小组成员照片。要达到响应式设计效果,代码设计应遵循三个原则: CSS值的改变、媒体(Media)查询、视窗(Viewport)优化。
时间: 2023-11-28 08:50:15 浏览: 33
好的,以下是一个简单的响应式小组介绍网页的代码示例,你可以根据需要进行修改和优化:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小组介绍</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>我们的小组</h1>
<div class="row">
<div class="col">
<img src="member1.jpg" alt="成员1">
<h3>成员1</h3>
<p>介绍成员1的信息</p>
</div>
<div class="col">
<img src="member2.jpg" alt="成员2">
<h3>成员2</h3>
<p>介绍成员2的信息</p>
</div>
<div class="col">
<img src="member3.jpg" alt="成员3">
<h3>成员3</h3>
<p>介绍成员3的信息</p>
</div>
</div>
</div>
</body>
</html>
```
CSS代码:
```
/* 基本样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.row::after {
content: "";
clear: both;
display: table;
}
.col {
float: left;
width: 33.33%;
padding: 10px;
text-align: center;
}
.col img {
width: 80%;
max-width: 200px;
height: auto;
border-radius: 50%;
margin-bottom: 10px;
}
.col h3 {
font-size: 20px;
margin-bottom: 5px;
}
.col p {
font-size: 16px;
}
/* 媒体查询 */
@media screen and (max-width: 800px) {
.col {
width: 100%;
}
}
```
解释说明:
1. HTML代码中,我们使用了一个容器(container)来包裹整个页面内容,其中包含一个标题(h1)和一个行(row)。
2. 行(row)是一个包含三个列(col)的容器,每个列包含一个成员的照片、姓名和介绍信息。
3. CSS代码中,我们使用了一个基本样式,将所有元素的盒模型设置为边框盒模型,避免了元素宽度和高度的计算问题。
4. 容器(container)设置了一个最大宽度和居中对齐,使页面更加美观和易读。
5. 列(col)使用了一个浮动布局,并设置了一个宽度和内边距,以便在不同屏幕尺寸上显示合适的大小。
6. 图片(img)设置了一个最大宽度和圆角边框,使照片更具有吸引力。
7. 媒体查询(@media)用于在屏幕宽度小于800px时切换布局,将列的宽度设置为100%。
这样,我们就完成了一个简单的响应式小组介绍网页,根据不同屏幕尺寸自动切换布局,为用户提供更好的浏览体验。