首页畅游普吉岛html代码

畅游普吉岛html代码

时间: 2024-12-30 20:31:26 浏览: 12

### 普吉岛旅游HTML代码示例为了创建一个关于普吉岛旅游的网页，可以采用如下结构化的HTML代码。此代码不仅展示了如何构建页面布局，还融入了一些基本样式以增强视觉效果。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>欢迎来到普吉岛</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } header { background-image: url('https://example.com/phuket-beach.jpg'); /* 替换为实际图片链接 */ background-size: cover; color: white; text-align: center; padding: 100px 20px; } h1 { font-size: 3em; margin-bottom: 0.5em; } p { font-size: 1.2em; } section { max-width: 800px; margin: auto; padding: 20px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } footer { text-align: center; padding: 20px; background-color: #ddd; position: fixed; bottom: 0; width: 100%; } </style> </head> <body> <header> <h1>探索美丽的普吉岛</h1> <p>发现东南亚最迷人的度假胜地之一。</p> </header> <section> <h2>为什么选择普吉岛？</h2> <p>普吉岛以其金色沙滩、清澈海水以及丰富的夜生活而闻名于世...</p>  </section> <footer> <p>© 2023 Phuket Tourism Guide | 所有权利保留.</p> </footer> </body> </html> ``` 上述代码定义了一个简单却吸引人的单页网站框架[^1]，其中包含了头部（带有背景图）、主体部分介绍岛屿特色以及底部版权信息等内容。通过调整`<header>`标签内的`background-image`属性指向一张高质量的普吉岛风景照片，可以使首页更加生动有趣。

阅读全文