首页炫酷相册html代码

炫酷相册html代码

时间: 2024-07-01 13:01:16 浏览: 172

创建一个炫酷的HTML相册通常涉及到使用CSS和JavaScript来添加一些交互性和视觉效果。以下是一个简单的HTML结构和基本的CSS/JavaScript示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>炫酷相册</title> <style> .photo-gallery { display: flex; justify-content: center; align-items: center; height: 600px; overflow: hidden; } .photo { width: 300px; height: 200px; margin: 10px; border: 1px solid #ccc; cursor: pointer; transition: transform 0.3s ease; } .photo:hover { transform: scale(1.1); } </style> </head> <body> <div class="photo-gallery"> <img src="image1.jpg" class="photo" alt="Image 1"> <img src="image2.jpg" class="photo" alt="Image 2">  </div> <script> // JavaScript (如轮播或图片切换) 可在此添加 </script> </body> </html> ``` 这个代码片段创建了一个包含图片的容器，图片会有一些基础的悬停效果（缩放）。为了实现更复杂的交互，比如轮播或图片切换，你可以添加一些JavaScript库（如Swiper、Flickity等），或者编写自定义的JavaScript代码。

阅读全文