首页用html语言做一张学生卡

用html语言做一张学生卡

时间: 2024-09-24 08:08:19 浏览: 27

在HTML中创建一张学生卡的基本结构可以包含以下几个部分： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>学生卡</title> <style> .student-card { width: 300px; height: 200px; background-color: #f2f2f2; border-radius: 5px; margin: 20px auto; display: flex; justify-content: center; align-items: center; } .card-info { font-size: 16px; color: #333; } </style> </head> <body> <div class="student-card"> <img src="student-avatar.jpg" alt="学生头像">  <div class="card-info"> <h2>姓名：张三</h2> <p>学号：20220101</p> <p>专业：计算机科学</p> <p>联系电话：13812345678</p> </div> </div> </body> </html> ``` 在这个例子中，我们创建了一个宽度和高度固定的`student-card`容器，里面包含一个学生的头像和一些基本信息。通过CSS样式调整了布局和外观。请记得将`student-avatar.jpg`替换为实际的学生头像图片路径。

阅读全文