HTML实现简易旅行网站
时间: 2024-06-12 13:07:35 浏览: 10
<!DOCTYPE html>
<html>
<head>
<title>旅行网站</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #666;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: bold;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #999;
}
main {
padding: 20px;
}
article {
margin-bottom: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
article h2 {
margin-top: 0;
}
article p {
margin: 0;
line-height: 1.5;
}
footer {
background-color: #666;
color: #fff;
padding: 20px;
text-align: center;
}
@media only screen and (max-width: 600px) {
body {
font-size: 16px;
}
header {
padding: 10px;
}
nav {
padding: 10px;
}
nav li {
display: block;
margin: 10px 0;
}
nav a {
display: block;
padding: 5px;
}
main {
padding: 10px;
}
article {
padding: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>旅行网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">热门目的地</a></li>
<li><a href="#">旅游攻略</a></li>
<li><a href="#">旅游产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<main>
<article>
<h2>热门目的地:巴黎</h2>
<p>巴黎是法国的首都,也是世界上最受欢迎的旅游目的地之一。巴黎有许多著名的景点,如埃菲尔铁塔、卢浮宫、巴黎圣母院等。此外,巴黎的美食也吸引了无数游客前来品尝。如果你想体验浪漫、典雅的法国文化,那么巴黎是一个不错的选择。</p>
</article>
<article>
<h2>旅游攻略:如何在旅途中保持健康</h2>
<p>旅游是一种放松身心的方式,但是长时间的旅行也可能会对身体造成一定程度的损伤。为了保持健康,你可以在旅途中注意以下几点:合理安排行程,避免长时间的坐车或者步行;保持充足的睡眠,避免过度疲劳;坚持健康的饮食习惯,多吃蔬菜和水果。</p>
</article>
<article>
<h2>旅游产品:欧洲十日游</h2>
<p>欧洲是一个充满魅力的大陆,拥有许多著名的景点和历史遗迹。我们的欧洲十日游行程包括法国、意大利、德国和荷兰四个国家,让你领略欧洲的风光和文化。行程中包括参观埃菲尔铁塔、梵蒂冈博物馆、科隆大教堂等著名景点,还有机会品尝当地美食和葡萄酒。欢迎报名参加!</p>
</article>
</main>
<footer>
<p>版权所有 © 2021 旅行网站</p>
</footer>
</body>
</html>