如何使用 HTML 和 CSS 制作带有圆形图像和一些文本的卡片？

Question

我是初学者。我正在练习 HTML 和 CSS。在实践项目中给出了下面的卡片。

如何仅使用 HTML 和 CSS 创建这种类型的卡片？

请帮助我。

Answer 1

您可以使用以下代码。

.card {
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 350px;
    text-align: center;
    margin-top: 60px;
}
.card_img {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 100%;
    margin: -60px auto 0;
}
.card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card_info {
    padding-bottom: 20px;
}
a {
  text-decoration: none;
  color: red;
}
a:hover{
  color: black;
}

<div class="card"> <!-- Here I create a New Div with class name card -->
    <div class="card_img"> <!-- Here I create a New Div for image with class name card_img -->
        <img src="https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-1100x628.jpg" alt="user-image">
    </div>
    <div class="card_info"> <!-- Here I create a New Div for user info with class name card_info -->
        <h2>USER NAME</h2>
        <a href="#!">loremIpsum.com</a>
    </div>
</div>

  

Answer 2

.card {
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 350px;
    text-align: center;
    margin-top: 60px;
}
.card_img {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 100%;
    margin: -60px auto 0;
}
.card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card_info {
    padding-bottom: 20px;
}
a {
  text-decoration: none;
  color: green;
}
a:hover{
  color: black;
}

<div class="card"> <!-- Here I create a New Div with class name card -->
    <div class="card_img"> <!-- Here I create a New Div for image with class name card_img -->
        <img src="https://images.pexels.com/photos/16164481/pexels-photo-16164481/free-photo-of-close-up-of-sleeping-cat.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="user-image">
    </div>
    <div class="card_info"> <!-- Here I create a New Div for user info with class name card_info -->
        <h2>NAME</h2>
        <a href="#!">hello</a>
    </div>
</div>

  

用户名

loremIpsum.com