web前端介绍热干面,要求图文并茂,有总页面和两个子页面,有页面跳转,只用html,总页面直接跳转到子页面显示图片
时间: 2024-09-09 21:07:16 浏览: 46
在Web前端中,我们可以模拟一个简单的网站结构来介绍热干面。首先,创建一个基本的HTML文件作为总页面"index.html",然后设置页面跳转功能。以下是步骤和代码示例:
**index.html (总页面)**
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>热干面介绍</title>
<style>
/* 页面样式 */
body {
font-family: Arial, sans-serif;
}
.nav {
display: flex;
justify-content: center;
padding-top: 20px;
}
a {
margin-right: 10px;
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div class="nav">
<a href="hot_dry_noodles.html">热干面介绍</a>
<a href="history.html">历史背景</a>
</div>
</body>
</html>
```
在这个总页面上,有两个链接分别指向两个子页面。
**hot_dry_noodles.html (子页面 - 热干面介绍)**
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>热干面介绍</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>热干面介绍</h1>
<img src="hot_dry_noodles.jpg" alt="热干面图片" width="600px" height="400px">
<p>热干面是中国湖北省武汉市的特色小吃,以其独特的芝麻酱调料和筋道的面条深受喜爱...</p>
</body>
</html>
```
同样,创建另一个子页面"history.html" (历史背景),内容类似,这里不再展示。
**history.html (子页面 - 历史背景)**
替换上面`hot_dry_noodles.html`中的内容,描述热干面的历史背景即可。
记得准备一张名为"hot_dry_noodles.jpg"的热干面图片,并将其放在与HTML文件相同的目录下,如果路径需要的话,记得调整图片链接。
阅读全文