【每日一练】96—Bootstrap实现一个响应式卡片效果

最新推荐文章于 2024-07-24 10:40:52 发布

web前端开发V

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量325

点赞数

文章标签： bootstrap 前端 css javascript html

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649133833&idx=3&sn=9baf61515f07ae74242bfdd5d5d36f05&chksm=be58b4a4892f3db26065ed63f4f414a33035afa44c6a5d922a7dd9f5ef9516128560d939b339&scene=126&&sessionid=0

版权

作者 | 杨小爱

写在前面

今天这个练习是使用Bootstrap实现的一个卡片效果，关于这个卡片式的效果，我们在前面也分享过，主要是用纯CSS实现。

当然，用什么方式实现自己想要的效果，主要是根据自己当前开发项目的需求来，同一个效果，实现的方式有多种，选择合适的就可以了，因此，我们在练习时，需要多尝试不同的实现方式，这样可以为实际开发项目时，找到合适的方式。

现在，我们就来看一下今天这个练习的最终效果：

看完了最终效果，我们再来看一下这个效果的最终实现代码。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>【每日一练】96—Bootstrap实现一个响应式卡片效果</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
</head>
<body>
  <section class="section-team">
    <div class="container">
      <div class="row justify-content-center text-center">
        <div class="col-md-8 col-lg-6">
          <div class="header-section">
            <h3 class="small-title">技术团队</h3>
            <h2 class="title">欢迎关注我们的公众号【web前端开发】</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6 col-lg-4 col-xl-3">
          <div class="single-person">
            <div class="person-image">
              <img src="images/01.png" alt="">
              <span class="icon">
                <i class="  fa fa-address-card"></i>
              </span>
            </div>
            <div class="person-info">
              <h3 class="full-name">杨小爱</h3>
              <span class="speciality">Web开发设计师 & UI设计师</span>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 col-xl-3">
          <div class="single-person">
            <div class="person-image">
              <img src="images/02.png" alt="">
              <span class="icon">
                <i class="  fa fa-address-card"></i>
              </span>
            </div>
            <div class="person-info">
              <h3 class="full-name">张三</h3>
              <span class="speciality">Web开发设计师 & UI设计师</span>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 col-xl-3">
          <div class="single-person">
            <div class="person-image">
              <img src="images/03.jpg" alt="">
              <span class="icon">
                <i class="  fa fa-address-card"></i>
              </span>
            </div>
            <div class="person-info">
              <h3 class="full-name">李四</h3>
              <span class="speciality">Web开发设计师 & UI设计师</span>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 col-xl-3">
          <div class="single-person">
            <div class="person-image">
              <img src="images/04.jpg" alt="">
              <span class="icon">
                <i class="  fa fa-address-card"></i>
              </span>
            </div>
            <div class="person-info">
              <h3 class="full-name">赵六</h3>
              <span class="speciality">Web开发设计师 & UI设计师</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

CSS代码：

p,a,h1,h2,h3,h4 {
  margin: 0;
  padding: 0;
}


.section-team {
  font-family: "Poppins", sans-serif;
  padding: 80px 0;
}


.section-team .header-section {
  margin-bottom: 50px;
}


.section-team .header-section .small-title {
    margin-bottom: 25px;
  font-size: 16px;
    font-weight: 500;
    color: #3e64ff;
}


.section-team .header-section .title {
    font-weight: 700;
    font-size: 45px;
}


.section-team .single-person {
  margin-top: 30px;
  padding: 30px;
  background-color: #f6f9ff;
  border-radius: 5px;
}


.section-team .single-person:hover {
  background: linear-gradient(to right, #016cec, #00b5f7);
}


.section-team .single-person .person-image {
    position: relative;
    margin-bottom: 50px;
    border-radius: 50%;
    border: 4px dashed transparent;
    transition: padding .3s;
}


.section-team .single-person:hover .person-image {
  padding: 12px;
    border: 4px dashed #fff;
}


.section-team .single-person .person-image img {
  width: 100%;
    border-radius: 50%;
}


.section-team .single-person .person-image .icon {
  position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,50%);
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: linear-gradient(to right, #016cec, #00b5f7);
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
}


.section-team .single-person:hover .person-image .icon {
  background: none;
  background-color: #fff;
  color: #016cec;
}


.section-team .single-person .person-info .full-name {
  margin-bottom: 10px;
  font-size: 28px;
    font-weight: 700;
}


.section-team .single-person .person-info .speciality {
    text-transform: uppercase;
    font-size: 14px;
    color: #016cec;
}


.section-team .single-person:hover .full-name,
.section-team .single-person:hover .speciality {
  color: #fff;
}

写在最后

以上就是我们今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】96—Bootstrap实现一个响应式卡片效果

作者 | 杨小爱写在前面今天这个练习是使用Bootstrap实现的一个卡片效果，关于这个卡片式的效果，我们在前面也分享过，主要是用纯CSS实现。当然，用什么方式实现自己想要的效果，主要是根据自己当前开发项目的需求来，同一个效果，实现的方式有多种，选择合适的就可以了，因此，我们在练习时，需要多尝试不同的实现方式，这样可以为实际开发项目时，找到合适的方式。现在，我们就来看一下今天这个练习的最终效果：看...
复制链接

扫一扫