演示网站 头像卡片介绍css网格样式
编写代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 头像卡片介绍css网格样式</title> <link rel='stylesheet' href='http:/cdn.boot <h1>编写代码</h1>strapmb.com/fontawesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="container"> <div class="card"> <img src="1.jpg" alt="Person" class="card__image"> <p class="card__name">明月清风</p> <div class="grid-container"> <div class="grid-child-帖子s"> 156 帖子 </div> <div class="grid-child-关注TAers"> 1012 粉丝 </div> </div> <ul class="social-icons"> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-codepen"></i></a></li> </ul> <button class="btn draw-border">关注TA</button> </div> <div class="card"> <img src="2.jpg" alt="Person" class="card__image"> <p class="card__name">静静的看你装x</p> <div class="grid-container"> <div class="grid-child-帖子s"> 305 帖子 </div> <div class="grid-child-关注TAers"> 2643 粉丝 </div> </div> <ul class="social-icons"> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-codepen"></i></a></li> </ul> <button class="btn draw-border">关注TA</button> </div> <div class="card"> <img src="3.jpg" alt="Person" class="card__image"> <p class="card__name">咕噜嘟噜噜</p> <div class="grid-container"> <div class="grid-child-帖子s"> 902 帖子 </div> <div class="grid-child-关注TAers"> 1300 粉丝 </div> </div> <ul class="social-icons"> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-codepen"></i></a></li> </ul> <button class="btn draw-border">关注TA</button> </div> </div> <!-- partial --> </body> </html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
