大学生期末作业家乡介绍山西风景html,要求有超链接,图片链接,地区页面,功能齐全
时间: 2024-04-07 19:32:02 浏览: 85
好的,以下是一个可能的家乡介绍山西风景的HTML页面的代码实现,它包括超链接、图片链接、地区页面和其他功能。请注意,这只是一个示例,你可以根据你的具体需求进行修改和调整。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>山西风景介绍</title>
<meta name="description" content="这是一个介绍山西风景的网页">
<meta name="keywords" content="山西, 风景, 旅游">
<style>
/* CSS 样式表 */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
margin-top: 50px;
}
h2 {
color: #333;
margin-top: 30px;
}
p {
color: #666;
line-height: 1.5;
margin-top: 15px;
}
img {
display: block;
max-width: 100%;
margin: 0 auto;
margin-top: 30px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 10px 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 30px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>山西风景介绍</h1>
</header>
<nav>
<ul>
<li><a href="#yuncheng">运城地区</a></li>
<li><a href="#datong">大同地区</a></li>
<li><a href="#linfen">临汾地区</a></li>
</ul>
</nav>
<main>
<section id="yuncheng">
<h2>运城地区</h2>
<p>运城地区位于山西省南部,是山西省较为典型的农业区域,也是中国著名的文化古城之一。运城有着丰富多彩的自然风光和独特的人文景观,包括:</p>
<ul>
<li><a href="https://baike.baidu.com/item/%E4%BA%94%E5%8F%B0%E5%B1%B1%E5%9B%BD%E5%AE%B6%E9%87%8C%E5%8E%86%E5%8F%B2%E9%A3%8E%E5%85%89%E6%99%AF%E5%8C%BA/19891538?fr=aladdin" target="_blank">五台山历史风光景区</a></li>
<li><a href="https://baike.baidu.com/item/%E5%8D%83%E5%B2%B3%E5%8D%83%E5%AF%BB" target="_blank">千岳千寻</a></li>
<li><a href="https://baike.baidu.com/item/%E7%BA%A2%E5%8E%9F%E5%8F%A4%E5%9F%8E/329005?fr=aladdin" target="_blank">红原古城</a></li>
</ul>
<img src="https://img1.qunarzz.com/travel/d4/1603/8e/3aa63252f6e7e54b.jpg" alt="五台山">
</section>
<section id="datong">
<h2>大同地区</h2>
<p>大同地区位于山西省北部,是中华文化的发源地之一,也是全国著名的旅游城市。大同有着众多的文化和自然景观,包括:</p>
<ul>
<li><a href="https://baike.baidu.com/item/%E5%B9%B3%E9%81%A5%E5%8F%A4%E5%9F%8E/383797" target="_blank">平遥古城</a></li>
<li><a href="https://baike.baidu.com/item/%E5%A4%A7%E5%90%8C%E5%B9%B3%E5%BA%84%E5%9B%BD%E5%AE%B6%E5%85%AC%E5%9B%AD/2237851?fr=aladdin" target="_blank">大同平庄国家公园</a></li>
<li><a href="https://baike.baidu.com/item/%E5%9F%8E%E5%A4%B4%E5%B1%B1%E5%9B%BD%E5%AE%B6%E5%9C%B0%E8%B4%A8%E5%85%AC%E5%9B%AD/183820?fr=aladdin" target="_blank">城头山国家地质公园</a></li>
</ul>
<img src="https://img1.qunarzz.com/travel/d4/1603/8e/3aa63252f6e7e54b.jpg" alt="平遥古城">
</section>
<section id="linfen">
<h2>临汾地区</h2>
<p>临汾地区位于山西省中部,是中原文化和草原文化的交汇地带,也是中国著名的文化名城之一。临汾有着许多历史文化和自然景观,包括:</p>
<ul>
<li><a href="https://baike.baidu.com/item/%E6%B9%96%E5%8C%97%E5%8F%A4%E5%9F%8E/10448962?fr=aladdin" target="_blank">湖北古城</a></li>
<li><a href="https://baike.baidu.com/item/%E5%A3%B6%E5%8F%A3%E7%80%91%E5%B8%83/7919788?fr=aladdin" target="_blank">壶口瀑布</a></li>
<li><a href="https://baike.baidu.com/item/%E9%87%91%E5%B1%B1%E6%A2%81%E9%9B%A8%E6%A3%AE" target="_blank">金山梁雨林</a></li>
</ul>
<img src="https://img1.qunarzz.com/travel/d4/1603/8e/3aa63252f6e7e54b.jpg" alt="壶口瀑布">
</section>
</main>
<footer class="footer">
<p>联系方式:XXX</p>
<p>版权所有 © 2021</p>
</footer>
</div>
</body>
</html>
```
在这个示例中,我们使用了`<a>`标签来创建超链接,使用`<img>`标签来创建图片链接。我们还使用了`<section>`标签来划分不同的地区页面,并使用`<nav>`标签来创建导航栏。最后,我们使用CSS样式表来美化页面,使其看起来更专业和吸引人。
希望这个示例可以帮助你完成你的大学生期末作业!
阅读全文