如何使用 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>