css做个人名片 |css min content

/* 设置样式 */
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 30px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.name {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}
.job {
font-size: 18px;
margin-bottom: 10px;
}
.contact-info {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.contact-item {
display: flex;
align-items: center;
margin-right: 20px;
}
.contact-item img {
margin-right: 5px;
}
.contact-item a {
color: #333;
text-decoration: none;
}
/* HTML 结构 */
<div class="container">
<div class="name">张三</div>
<div class="job">Web 开发工程师</div>
<div class="contact-info">
<div class="contact-item">
<img src="phone.png" alt="电话">
<a href="tel:123456789">123456789</a>
</div>
<div class="contact-item">
<img src="email.png" alt="邮箱">
<a href="mailto:zhangsan@gmail.com">zhangsan@gmail.com</a>
</div>
<div class="contact-item">
<img src="wechat.png" alt="微信">
<span>wechat_username</span>
</div>
</div>
</div>

以上就是一个简单的个人名片的 CSS 样式及 HTML 结构。通过 CSS 的样式设置，大家可以很容易地控制个人名片的布局和几何形状。你可以根据自己的需求，修改颜色、字体、边框等样式，让你的个人名片更加个性化！