超详细！带CSS美化的红色旅游景点网站首页代码大公开！

以下是一个简单的 HTML 和 CSS 代码示例，用于创建一个关于红色旅游景点的网站首页： ```html <!DOCTYPE html> <html> <head> <style> /* 全局样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* 头部样式 */ header { background-color: #f1f1f1; padding: 20px; } header h1 { margin: 0; } /* 导航栏样式 */ nav { background-color: #333; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav ul li { float: left; } nav ul li a { display: block; color: white; text-decoration: none; padding: 10px 20px; } nav ul li a:hover { background-color: #111; } /* 横幅样式 */ banner { height: 300px; background-image: url('your_banner_image.jpg'); background-size: cover; background-position: center; } /* 主要内容样式 */ main { padding: 20px; } main h2 { margin-top: 0; } main p { line-height: 1.5; } /* 页脚样式 */ footer { background-color: #333; color: white; padding: 10px; } </style> </head> <body> <header> <h1>红色旅游景点</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">景点介绍</a></li> <li><a href="#">旅游攻略</a></li> <li><a href="#">用户评价</a></li> </ul> </nav> <banner> </banner> <main> <h2>热门红色旅游景点</h2> <p>这里可以介绍一些热门的红色旅游景点，比如井冈山、延安等。</p> </main> <footer> <p>版权所有 © 2023 红色旅游网站</p> </footer> </body> </html> ``` 注意点： 1. 记得将 `'your_banner_image.jpg'` 替换为您实际的横幅图片路径。 2. 您可以根据需要进一步优化和扩展各个部分的内容和样式。 3. 如果要添加更多页面，注意保持样式的一致性和导航栏的链接准确性。 ######[AI写代码神器 | 713点数解答 | 2024-12-03 09:59:45]

服务商

更多选项

快捷项

自定义