首页html设计豆瓣电影250

html设计豆瓣电影250

时间: 2025-01-06 20:51:24 浏览: 6

设计一个类似于豆瓣电影250的网页需要使用HTML、CSS和一些JavaScript来增强用户体验。以下是一个简单的示例，展示如何用HTML和CSS来创建一个基本的电影列表页面。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>豆瓣电影250</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; } header { background-color: #ff9900; color: white; padding: 20px; text-align: center; } .movie-list { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 20px; } .movie-item { background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px; padding: 20px; width: 200px; text-align: center; } .movie-item img { width: 100%; border-radius: 4px; } .movie-item h3 { margin: 10px 0; } .movie-item p { font-size: 14px; color: #666; } </style> </head> <body> <header> <h1>豆瓣电影250</h1> </header> <div class="movie-list"> <div class="movie-item"> <img src="movie1.jpg" alt="Movie 1"> <h3>电影名称1</h3> <p>导演: 导演姓名1</p> <p>评分: 9.5</p> </div> <div class="movie-item"> <img src="movie2.jpg" alt="Movie 2"> <h3>电影名称2</h3> <p>导演: 导演姓名2</p> <p>评分: 9.3</p> </div> <div class="movie-item"> <img src="movie3.jpg" alt="Movie 3"> <h3>电影名称3</h3> <p>导演: 导演姓名3</p> <p>评分: 9.2</p> </div>  </div> </body> </html> ``` 这个示例展示了如何创建一个简单的网页，包含一个头部和一个电影列表。电影列表中的每个电影项都包含一个图片、电影名称、导演和评分。

阅读全文