首页用html css写一个关于电影的网页

用html css写一个关于电影的网页

时间: 2024-10-16 20:09:28 浏览: 28

创建一个关于电影的简单网页，可以使用HTML结构来展示内容，CSS负责美化和布局。下面是一个基础示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>电影推荐</title> <link rel="stylesheet" href="styles.css">  </head> <body> <header> <h1>欢迎来到电影世界</h1> <nav> <ul> <li><a href="#movies">热门电影</a></li> <li><a href="#upcoming">即将上映</a></li> </ul> </nav> </header> <main id="movies"> <section class="movie-list"> <h2>热门电影</h2> <div class="movie-item"> <img src="movie1.jpg" alt="电影1海报"> <h3>电影1名称</h3> <p>简介...</p> </div>  </section> </main> <main id="upcoming"> <section class="movie-list"> <h2>即将上映</h2> <div class="movie-item"> <img src="movie2.jpg" alt="电影2海报"> <h3>电影2名称</h3> <p>简介...</p> </div> </section> </main> <footer> <p>© 2023 电影天堂</p> </footer> </body> </html> ``` 接下来，你可以创建一个名为`styles.css`的文件，用于编写样式： ```css /* styles.css */ body { font-family: Arial, sans-serif; } header { background-color: #f1f1f1; padding: 20px; } nav ul { list-style-type: none; display: flex; } .movie-list { margin: 20px; } .movie-item { text-align: center; margin-bottom: 20px; border: 1px solid #ccc; padding: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .movie-item img { width: 100%; height: auto; } ``` 这个例子展示了基本的网页结构，包含了标题、导航、两个电影列表（热门和即将上映）、页脚等部分，同时CSS负责了基本的样式。你可以根据实际需求调整元素位置、颜色和尺寸等。

阅读全文