以下是一个简单的HTML+CSS动态人物介绍网页代码示例： “`html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>人物介绍网页</title> <style> /* 布局和字体样式 */ body { font-family: "微软雅黑", sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } h1 { font-size: 36px; margin: 0; } main { display: flex; flex-wrap: wrap; justify-content: center; margin: 20px; } .card { background-color: #fff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; margin: 20px; padding: 20px; text-align: center; transition: transform 0.2s; width: 300px; } .card:hover { transform: scale(1.05); } .card img { border-radius: 50%; height: 200px; margin-bottom: 20px; width: 200px; } .card h2 { font-size: 24px; margin: 0; } .card p { font-size: 16px; margin: 10px 0; } .card button { background-color: #333; border: none; color: #fff; cursor: pointer; padding: 10px 20px; transition: background-color 0.2s; } .card button:hover { background-color: #666; } /* 动画效果 */ @keyframes slideInLeft { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } .animation { animation: slideInLeft 1s; } </style> </head> <body> <header> <h1>人物介绍网页</h1> <p>一个简单的HTML+CSS动态人物介绍网页示例</p> </header> <main> <div class="card animation"> <img src="https://via.placeholder.com/200×200" alt="人物照片"> <h2>人物名称</h2> <p>人物介绍</p> <button>了解更多</button> </div> <div class="card animation"> <img src="https://via.placeholder.com/200×200" alt="人物照片"> <h2>人物名称</h2> <p>人物介绍</p> <button>了解更多</button> </div> <div class="card animation"> <img src="https://via.placeholder.com/200×200" alt="人物照片"> <h2>人物名称</h2> <p>人物介绍</p> <button>了解更多</button> </div> </main> </body> </html> “` 这个示例网页包括一个头部、一个主体，以及三个人物介绍卡片。使用了HTML标签和CSS样式来创建和美化布局，以及CSS3的动画效果来添加动态效果。希望这个示例对您有所帮助。
原文链接：https://blog.csdn.net/weixin_29016865/article/details/117881836?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171949704316800182751453%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171949704316800182751453&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-23-117881836-null-null.nonecase&utm_term=2024%E9%AB%98%E8%80%83
