人物介绍网页模板html
时间: 2023-09-04 10:06:29 浏览: 65
以下是一个简单的人物介绍网页模板,你可以根据需要进行修改和完善:
```html
<!DOCTYPE html>
<html>
<head>
<title>人物介绍</title>
</head>
<body>
<header>
<h1>人物介绍</h1>
</header>
<main>
<section>
<h2>人物姓名</h2>
<img src="人物照片链接" alt="人物照片">
<p>人物简介</p>
<ul>
<li><strong>生日:</strong>XXXX年XX月XX日</li>
<li><strong>职业:</strong>XXXXXX</li>
<li><strong>教育背景:</strong>XXXXX</li>
<li><strong>联系方式:</strong>XXXXX</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © XXXX 年</p>
</footer>
</body>
</html>
```
在这个模板中,你需要填入人物的姓名、照片、简介以及其他相关信息。同时,你也可以根据需要在模板中添加更多的内容和样式。
相关问题
基于javaweb的人物介绍网站模板
以下是一个基于JavaWeb的人物介绍网站模板的示例代码,供您参考:
1. 首页(index.jsp):
```jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人物介绍网站</title>
</head>
<body>
<h1>人物介绍网站</h1>
<p>欢迎来到人物介绍网站!请选择你想要了解的人物:</p>
<ul>
<li><a href="person.jsp?id=1">张三</a></li>
<li><a href="person.jsp?id=2">李四</a></li>
<li><a href="person.jsp?id=3">王五</a></li>
</ul>
</body>
</html>
```
2. 人物介绍页面(person.jsp):
```jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人物介绍网站 - ${person.name}</title>
</head>
<body>
<h1>${person.name}</h1>
<p>出生日期:${person.birthdate}</p>
<p>职业:${person.occupation}</p>
<p>简介:${person.introduction}</p>
<h2>成就</h2>
<ul>
<c:forEach var="achievement" items="${person.achievements}">
<li>${achievement}</li>
</c:forEach>
</ul>
<h2>名言</h2>
<ul>
<c:forEach var="saying" items="${person.sayings}">
<li>${saying}</li>
</c:forEach>
</ul>
</body>
</html>
```
3. Servlet(PersonServlet.java):
```java
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/person")
public class PersonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private static final List<Person> persons = new ArrayList<>();
static {
persons.add(new Person(1, "张三", "1970-01-01", "教师", "张三是一名资深教师。",
new String[]{"获得过优秀教师称号。", "撰写过多篇教育论文。"},
new String[]{"教育要立德、立功、立业。", "教育是造就人的灵魂。"}));
persons.add(new Person(2, "李四", "1980-01-01", "医生", "李四是一名知名医生。",
new String[]{"曾获得过全国医学奖。", "发表过多篇医学论文。"},
new String[]{"生命只有一次,要珍惜健康。", "医生的职责是拯救生命。"}));
persons.add(new Person(3, "王五", "1990-01-01", "艺术家", "王五是一名著名艺术家。",
new String[]{"作品多次入选国际艺术展。", "曾获得过国家艺术奖。"},
new String[]{"艺术是生命的延续。", "艺术是感性和理性的结合。"}));
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("id"));
Person person = persons.get(id - 1);
request.setAttribute("person", person);
request.getRequestDispatcher("/person.jsp").forward(request, response);
}
}
```
4. 实体类(Person.java):
```java
public class Person {
private int id;
private String name;
private String birthdate;
private String occupation;
private String introduction;
private String[] achievements;
private String[] sayings;
public Person(int id, String name, String birthdate, String occupation, String introduction,
String[] achievements, String[] sayings) {
this.id = id;
this.name = name;
this.birthdate = birthdate;
this.occupation = occupation;
this.introduction = introduction;
this.achievements = achievements;
this.sayings = sayings;
}
// 省略 getter 和 setter 方法
}
```
这个示例代码演示了一个基本的人物介绍网站的实现,包括首页、人物介绍页面、Servlet 和实体类。您可以根据自己的需求进行修改和扩展。
帮我设计一个以介绍家乡的html网页模板,图片内容我来添加,模板样式为瀑布式,有四大类容(景点,历史,文化和人物)。
当然可以,下面是一个简单的瀑布式网页模板,您可以根据您的需要进行修改和添加内容。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的家乡</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}
.card {
background-color: #fff;
border-radius: 5px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
}
.card img {
display: block;
width: 100%;
height: 200px;
object-fit: cover;
}
.card .content {
padding: 20px;
}
.card h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.card p {
font-size: 16px;
line-height: 1.5em;
margin-bottom: 20px;
}
.card a {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
background-color: #333;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.card a:hover {
background-color: #222;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<img src="images/scenic1.jpg" alt="景点图片">
<div class="content">
<h2>景点标题</h2>
<p>景点简介</p>
<a href="#">了解更多</a>
</div>
</div>
<div class="card">
<img src="images/history1.jpg" alt="历史图片">
<div class="content">
<h2>历史标题</h2>
<p>历史简介</p>
<a href="#">了解更多</a>
</div>
</div>
<div class="card">
<img src="images/culture1.jpg" alt="文化图片">
<div class="content">
<h2>文化标题</h2>
<p>文化简介</p>
<a href="#">了解更多</a>
</div>
</div>
<div class="card">
<img src="images/people1.jpg" alt="人物图片">
<div class="content">
<h2>人物标题</h2>
<p>人物简介</p>
<a href="#">了解更多</a>
</div>
</div>
</div>
</body>
</html>
```
在这个模板中,我们使用了CSS网格布局来创建瀑布式的网页结构,每个内容块都是一个卡片,包括一个图片、标题、简介和链接。您可以根据您的需要修改卡片的样式和内容,添加更多的卡片以展示更多的家乡信息。同时,在每个卡片中,可以根据您的需要添加图片,只需将图片的地址替换为您自己的图片即可。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)