首页利用HTML+CSS制作一个介绍图灵奖以及获奖者的页面

利用HTML+CSS制作一个介绍图灵奖以及获奖者的页面

时间: 2024-09-25 18:01:41 浏览: 49

创建一个介绍图灵奖及其获奖者的页面，你可以按照以下步骤进行： 1. **HTML结构**: - 使用HTML5创建基本框架，包括头部（header）、主体（main）和页脚（footer）。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>图灵奖介绍</title> <link rel="stylesheet" href="styles.css">  </head> <body> <header> <h1>图灵奖介绍及历年获奖者</h1> </header> <main>  </main> <footer> <p>版权所有 © 2023 图灵奖主页</p> </footer> </body> </html> ``` 2. **CSS样式**: - 创建一个名为`styles.css`的文件，编写基础样式，如字体、颜色、布局等。 ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #f4f4f4; padding: 20px; } h1 { color: #333; } main { display: flex; flex-wrap: wrap; justify-content: space-between; } .winner-card { width: calc(33.33% - 20px); margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } footer { text-align: center; padding: 20px; } ``` 3. **内容部分**: - 在`<main>`标签内添加一个个"获奖者卡片" (`<div class="winner-card">`)，每个卡片包含获奖者姓名、年份和简介。 ```html <section class="winners"> <div class="winner-card"> <img src="turing_winner1.jpg" alt="获奖者1"> <h2>约翰·冯·诺依曼 (John von Neumann)</h2> <p>1956年获奖，计算机科学理论奠基人</p> </div>  </section> ```

阅读全文