首页用html+css设计图灵将获奖者介绍

用html+css设计图灵将获奖者介绍

时间: 2024-09-21 20:08:19 浏览: 44

在HTML和CSS中设计一个简单的页面来展示图灵奖(Turing Award)获得者的介绍，可以创建一个响应式的卡片式布局。首先，我们来构建基本结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图灵奖获得者介绍</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>图灵奖得主风采</h1> <div class="card-container"> <div class="card">  <img src="turing_winner_image.jpg" alt="图灵奖得主肖像"> <h2 class="name">姓名</h2> <p class="description">简介</p> <a href="#" class="more-info">了解更多</a> </div>  </div> </div> </body> </html> ``` 接下来，创建一个名为`styles.css`的外部样式表，来美化卡片和布局： ```css /* styles.css */ .container { display: flex; justify-content: center; align-items: center; padding: 20px; background-color: #f5f5f5; } .card-container { display: flex; flex-wrap: wrap; gap: 20px; } .card { width: 30%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 5px; text-align: center; padding: 20px; } .card img { width: 100%; height: auto; margin-bottom: 15px; } .name { font-size: 24px; font-weight: bold; } .description { font-size: 16px; line-height: 1.5; } .more-info { color: blue; cursor: pointer; } ``` 在这个例子中，每个卡片代表一位图灵奖获得者，包含他们的照片、名字以及简洁的介绍。点击“了解更多”链接会跳转到详细信息页。

阅读全文