用js帮我搭建一个文化旅游的首页框架
时间: 2024-02-27 15:58:47 浏览: 14
好的,以下是一个简单的文化旅游首页框架的代码示例,使用了HTML和JavaScript:
```html
<!DOCTYPE html>
<html>
<head>
<title>文化旅游网站首页</title>
<meta charset="utf-8">
<style>
/* 样式可以根据需求自行调整 */
nav {
background-color: #333;
color: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
h1 {
text-align: center;
margin-top: 30px;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin: 50px 0;
}
.card {
width: 300px;
margin: 20px;
border: 1px solid #ccc;
padding: 20px;
}
</style>
</head>
<body>
<nav>
<h2>文化旅游</h2>
<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>
<h1>文化旅游网站</h1>
<section>
<div class="card">
<h2>目的地介绍</h2>
<p>这里是目的地的简单介绍</p>
<button>查看更多</button>
</div>
<div class="card">
<h2>热门景点</h2>
<p>这里是热门景点的简单介绍</p>
<button>查看更多</button>
</div>
<div class="card">
<h2>旅游攻略</h2>
<p>这里是旅游攻略的简单介绍</p>
<button>查看更多</button>
</div>
</section>
<footer>
<p>版权信息等</p>
</footer>
<script>
// JS代码可以根据需求自行编写
const buttons = document.querySelectorAll("button");
buttons.forEach(button => {
button.addEventListener("click", () => {
alert("查看更多功能待实现");
});
});
</script>
</body>
</html>
```
以上代码实现了一个简单的文化旅游站点首页框架,包含了导航栏、标题、内容区域和页脚,同时使用了JavaScript实现了按钮的点击事件。您可以根据具体需求进行样式和内容的调整。