复杂一点,可展示10个教师,颜色采用蓝色为主体,红色与黑色为辅助颜色
时间: 2023-03-02 12:08:36 浏览: 150
好的,以下是一个复杂一点的教师展示,其中展示了10个教师,主体颜色为蓝色,辅助颜色为红色和黑色。
首先,我们创建一个网格布局,然后在每个网格中放置教师的信息。教师信息包括教师的姓名、职称、照片和简介。在布局中使用不同的颜色,以突出显示教师的姓名和职称。
```html
<!DOCTYPE html>
<html>
<head>
<title>教师展示</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 20px;
margin: 20px;
}
.teacher {
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.teacher h2 {
color: #333;
margin-top: 0;
margin-bottom: 5px;
}
.teacher p {
color: #666;
margin-top: 0;
margin-bottom: 10px;
}
.teacher img {
width: 100%;
border-radius: 50%;
margin-bottom: 10px;
}
.teacher .title {
color: #cc0000;
font-weight: bold;
}
.teacher .name {
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<h1>教师展示</h1>
<div class="grid">
<div class="teacher">
<img src="teacher1.jpg" alt="Teacher 1">
<h2 class="name" style="color:blue;">王老师</h2>
<p class="title" style="color:red;">教授</p>
<p>王老师是一名计算机科学教授,专注于人工智能和机器学习领域。</p>
</div>
<div class="teacher">
<img src="teacher2.jpg" alt="Teacher 2">
<h2 class="name" style="color:blue;">张老师</h2>
<p class="title" style="color:red;">副教授</p>
<p>张老师是一名软件工程副教授,致力于开发高质量的软件系统。</p>
</div>
<div class="teacher">
<img src="teacher3.jpg" alt="Teacher 3">
<h2 class="name" style="color:blue;">李老师</h2>
<p class="title" style="color:red;">讲师</p>
<p>李老师是
阅读全文