重庆巫山旅游网页设计代码
时间: 2024-12-30 12:25:05 浏览: 7
### 关于重庆巫山旅游网站的设计
#### HTML 结构代码
构建一个简单的重庆巫山旅游网站首页布局如下:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>重庆巫山旅游网</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>欢迎来到重庆巫山旅游网</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#attractions">景点推荐</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="banner">
<img src="images/wushan.jpg" alt="巫山风光"/>
</section>
<section id="about">
<h2>关于巫山</h2>
<p>巫山县位于重庆市东北部,地处三峡库区腹心地带...</p>
</section>
<section id="attractions">
<h2>热门景点</h2>
<!-- 可以在此处添加更多景点信息 -->
</section>
</main>
<footer>
<p>© 2023 重庆巫山旅游局 版权所有</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
```
#### CSS 样式代码
定义基本页面样式来美化上述HTML结构:
```css
/* styles.css */
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
font-family: Arial, sans-serif;
}
header {
background-color: #f8f9fa;
text-align: center;
padding-top: 2em;
color: white;
background-image: linear-gradient(to bottom,#ffcccb ,#ffcccc);
}
...
```
#### JavaScript 功能实现
为了增强用户体验,在`<script>`标签内编写交互逻辑脚本文件 `scripts.js` 如下所示:
```javascript
// scripts.js
document.addEventListener('DOMContentLoaded', function() {
const navLinks = document.querySelectorAll('nav ul li a');
// 添加平滑滚动效果到导航链接
navLinks.forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const targetId = link.getAttribute('href').substring(1); // 去掉开头的 #
const targetSection = document.getElementById(targetId);
window.scrollTo({
top: targetSection.offsetTop,
behavior: 'smooth'
});
})
});
});
```
通过以上三个部分可以创建出一个基础版本的重庆巫山旅游网站。当然实际项目还需要考虑响应式设计、SEO优化等问题。
阅读全文