首页用html做一个个人名片

用html做一个个人名片

时间: 2023-12-23 19:02:33 浏览: 21

<!DOCTYPE html> <html> <head> <title>个人名片</title> <meta charset="utf-8"> <style> body{ background-color: #F5F5F5; font-family: Arial, sans-serif; font-size: 16px; } .container{ margin: 0 auto; width: 600px; padding: 20px; background-color: #FFFFFF; box-shadow: 0px 0px 10px #888888; } h1{ font-size: 30px; color: #333333; margin: 0; } h2{ font-size: 20px; color: #333333; margin: 0; } p{ margin: 0; line-height: 1.5; } .contact{ margin-top: 20px; display: flex; flex-direction: row; align-items: center; } .contact img{ width: 30px; height: 30px; margin-right: 10px; } .contact p{ margin: 0; font-size: 18px; color: #333333; } </style> </head> <body> <div class="container"> <h1>个人名片</h1> <hr> <h2>个人信息</h2> <p>姓名：张三</p> <p>性别：男</p> <p>出生日期：1990年1月1日</p> <p>学历：本科</p> <p>专业：计算机科学与技术</p> <p>工作年限：5年</p> <h2>联系方式</h2> <div class="contact"> <img src="phone.png"> <p>电话：13888888888</p> </div> <div class="contact"> <img src="email.png"> <p>邮箱：zhangsan@example.com</p> </div> <div class="contact"> <img src="wechat.png"> <p>微信：zhangsan123</p> </div> </div> </body> </html>