用 CSS 和 JavaScript 打造高级旅游网页：附完整代码示例

以下是一个简单的示例代码，用于演示如何使用CSS和JavaScript设计一个高级的旅游网页。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>高级旅游网页</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>欢迎来到高级旅游网页</h1> </header> <nav> <ul> <li><a href="#home">首页</a></li> <li><a href="#destinations">目的地</a></li> <li><a href="#packages">套餐</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> <section id="home"> <h2>欢迎来到我们的旅游网站</h2> <p>在这里，您可以找到全球顶级目的地的最佳旅行建议和套餐。</p> </section> <section id="destinations"> <h2>热门目的地</h2> <div class="destination"> <h3>巴厘岛</h3> <img src="bali.jpg" alt="巴厘岛"> <p>巴厘岛是印度尼西亚最受欢迎的旅游目的地之一，以其美丽的海滩，寺庙和文化活动而闻名。</p> </div> <div class="destination"> <h3>夏威夷</h3> <img src="hawaii.jpg" alt="夏威夷"> <p>夏威夷群岛位于太平洋中，以其壮观的自然风景，海滩和冲浪文化而闻名。</p> </div> </section> <section id="packages"> <h2>旅行套餐</h2> <div class="package"> <h3>巴厘岛奢华之旅</h3> <p>套餐包括五星级酒店住宿，豪华早餐，以及参观巴厘岛最著名的寺庙和海滩。</p> </div> <div class="package"> <h3>夏威夷浪漫蜜月</h3> <p>套餐包括海滩别墅住宿，私人游艇出海，以及浪漫的蜜月晚餐。</p> </div> </section> <section id="contact"> <h2>联系我们</h2> <p>如果您有任何疑问或需要帮助，请填写以下表格并提交给我们。</p> <form> <label for="name">姓名:</label> <input type="text" id="name" name="name" required> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <label for="message">留言:</label> <textarea id="message" name="message" required></textarea> <button type="submit">提交</button> </form> </section> <footer> <p>版权所有 © 2022 高级旅游网页</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS代码(style.css)： ```css body { font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #666; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin-right: 10px; } nav ul li a { color: #fff; text-decoration: none; } section { padding: 20px; } section h2 { margin-bottom: 10px; } .destination, .package { border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin-bottom: 20px; } .destination h3, .package h3 { margin: 0; } .destination img, .package img { max-width: 100%; height: auto; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` JavaScript代码(script.js)： ```javascript // 在此处添加适当的JavaScript代码，以实现交互效果和/或动态内容加载 ``` ######[AI写代码神器 | 2020点数解答 | 2024-06-20 19:27:10]

服务商

更多选项

快捷项

自定义