HTML5编写旅游网页
以下是一个简单的HTML5旅游网页示例,包含了基础的结构和样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旅游网站</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
nav {
float: left;
width: 200px;
padding: 5px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
padding: 8px;
margin-bottom: 7px;
background-color: #dddddd;
text-align: center;
}
section {
margin-left: 210px;
padding: 10px;
}
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
margin-top: 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>
</ul>
</nav>
<section>
<h2>旅游景点</h2>
<p>
这里是关于某个旅游景点的描述文字,可以包含景点的历史文化、特色活动等信息。
</p>
</section>
<footer>
© 2023 旅游网站
</footer>
</body>
</html>
这个代码实例展示了如何使用HTML5创建一个基本的旅游网页,包括了导航、内容区域和页脚。同时,使用了内联样式来简单地美化页面布局。在实际应用中,你可能需要使用CSS文件来管理样式,并且利用JavaScript来增加交互功能。
评论已关闭