css 名片

CSS名片是一种非常流行的网页设计元素，它是一种非常简洁而又优雅的设计风格。

css 名片

为了创建一个CSS名片，我们需要使用HTML和CSS编写代码。在HTML中，我们可以使用

标签来定义名片的容器，并且在其中添加各种元素，比如头像、姓名、职业、联系方式等。

<div class="card">
  <img src="avatar.jpg" class="avatar">
  <h1 class="name">张三</h1>
  <p class="job">前端工程师</p>
  <ul class="contact">
    <li><a href="tel:123456789">123456789</a></li>
    <li><a href="mailto:zhangsan@gmail.com">zhangsan@gmail.com</a></li>
    <li><a href="https://github.com/zhangsan">GitHub</a></li>
  </ul>
</div>

在CSS中，我们可以使用各种属性和值来定义名片的样式，比如字体、颜色、边框、背景等。

.card {
  font-family: sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 8px;
  Box-shadow: 0 0 10px rgba(0,0.1);
  padding: 20px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 20px;
}

.name {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.job {
  margin: 0;
  font-size: 18px;
  font-weight: normal;
}

.contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

.contact li {
  margin: 0 10px;
}

.contact li a {
  text-decoration: none;
  color: #666;
  font-size: 16px;
}

通过以上的HTML和CSS代码，我们可以创建出一个非常漂亮的CSS名片，展示自己的信息和技能，给人留下深刻的印象。

上一篇：css 周生生下一篇：css 去掉默认的a

相关推荐