来个高级一点的旅游网页代码
时间: 2024-04-30 08:22:05 浏览: 13
以下是一个简单的旅游网页代码,包括一些常用的HTML和CSS元素,以及一些JavaScript功能,例如动态地显示时间和日期:
```html
<!DOCTYPE html>
<html>
<head>
<title>旅游网页</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
}
nav {
background-color: #ddd;
padding: 10px;
}
nav a {
color: #333;
font-size: 18px;
margin-right: 20px;
text-decoration: none;
}
nav a:hover {
color: #333;
text-decoration: underline;
}
section {
padding: 20px;
}
section h2 {
font-size: 24px;
margin: 0 0 20px;
}
section p {
font-size: 18px;
line-height: 1.5;
margin: 0 0 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.clock {
font-size: 24px;
font-weight: bold;
margin: 20px 0;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>旅游网页</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">旅游攻略</a>
<a href="#">景点介绍</a>
<a href="#">酒店预订</a>
<a href="#">联系我们</a>
</nav>
<section>
<h2>欢迎来到旅游网页</h2>
<p>这里提供最新的旅游攻略和景点介绍,帮助您轻松计划旅行行程。</p>
<div class="clock"></div>
</section>
<footer>
<p>版权所有 © 2021 旅游网页</p>
</footer>
<script>
function showTime() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var meridiem = "AM";
if (hours > 12) {
hours = hours - 12;
meridiem = "PM";
}
if (hours == 0) {
hours = 12;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var timeString = hours + ":" + minutes + ":" + seconds + " " + meridiem;
document.querySelector(".clock").innerHTML = timeString;
}
showTime();
setInterval(showTime, 1000);
</script>
</body>
</html>
```
这个网页包括一个标题、一个导航菜单、一个欢迎信息、一个时钟和一个页脚。您可以根据需要修改和扩展代码。