用html css js做一个甘孜旅游网站首页
时间: 2023-10-03 08:10:13 浏览: 117
好的,以下是一个简单的甘孜旅游网站首页的示例代码和说明。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>甘孜旅游</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
<h1>欢迎来到甘孜</h1>
<button>了解更多</button>
</header>
<main>
<section>
<h2>甘孜的美景</h2>
<p>甘孜位于四川西南部,是一个拥有丰富自然风光和藏族文化的地区。甘孜的美景包括雪山、草原、河流和湖泊等,吸引了众多游客前来观光和探险。</p>
<button>了解更多</button>
</section>
<section>
<h2>旅游路线推荐</h2>
<p>我们为您准备了多条旅游路线,包括自驾游、徒步旅行、摄影之旅等,让您深入了解甘孜的美景和文化。我们的路线都经过精心策划和实地考察,保证让您留下难忘的旅行回忆。</p>
<button>了解更多</button>
</section>
<section>
<h2>预订服务</h2>
<p>我们提供多种预订服务,包括酒店预订、交通预订、导游服务等。我们的服务团队由经验丰富的专业人员组成,为您提供全方位的旅行支持和服务。</p>
<button>了解更多</button>
</section>
</main>
<footer>
<p>版权所有 © 2021 甘孜旅游</p>
</footer>
</body>
</html>
```
CSS 代码:
```css
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 导航栏样式 */
nav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
/* 头部样式 */
header {
background-image: url("header-bg.jpg");
background-size: cover;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
header h1 {
font-size: 48px;
color: #fff;
text-shadow: 2px 2px #333;
margin: 0;
}
header button {
background-color: #fff;
color: #333;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-top: 20px;
cursor: pointer;
}
header button:hover {
background-color: #333;
color: #fff;
}
/* 主体样式 */
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 50px;
}
section {
width: 400px;
margin: 20px;
background-color: #f7f7f7;
padding: 20px;
box-shadow: 2px 2px 5px #ccc;
}
section h2 {
font-size: 24px;
margin-top: 0;
}
section p {
margin-top: 10px;
}
section button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-top: 20px;
cursor: pointer;
}
section button:hover {
background-color: #fff;
color: #333;
}
/* 页脚样式 */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
```
JS 代码:
```javascript
// 在这里添加交互效果的 JavaScript 代码
```
这个示例代码包含了一个基本的 HTML 结构,一个简单的 CSS 样式,和一个空的 JavaScript 文件。你可以在这个基础上添加更多的 HTML 元素、CSS 样式和 JavaScript 代码,以实现更多的功能和交互效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)