2022年 7 月 26日- (星期二) / Published in css 设计, html 设计, javascript 设计, JS 特效, 前端设计

HTML CSS 实现横向服务项目滑动cid1057-网页前端设计

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section class="services-section">
      <div class="inner-width">
        <h1>Our <strong>Services</strong></h1>
        <div class="services owl-carousel">

          <div class="service">
            <div class="service-icon">
              <i class="fas fa-paint-brush"></i>
            </div>
            <div class="service-name">Design</div>
            <div class="service-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam nesciunt similique!</div>
          </div>

          <div class="service">
            <div class="service-icon">
              <i class="fas fa-pencil-alt"></i>
            </div>
            <div class="service-name">Edit Texts</div>
            <div class="service-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam nesciunt similique!</div>
          </div>

          <div class="service">
            <div class="service-icon">
              <i class="fas fa-code"></i>
            </div>
            <div class="service-name">Build Websites</div>
            <div class="service-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam nesciunt similique!</div>
          </div>

          <div class="service">
            <div class="service-icon">
              <i class="fas fa-database"></i>
            </div>
            <div class="service-name">Manage Databases</div>
            <div class="service-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam nesciunt similique!</div>
          </div>

          <div class="service">
            <div class="service-icon">
              <i class="fas fa-headset"></i>
            </div>
            <div class="service-name">Support</div>
            <div class="service-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam nesciunt similique!</div>
          </div>
        </div>
      </div>
    </section>

    <script>
      $(".services").owlCarousel({
        margin:20,
        loop:true,
        autoplay:true,
        autoplayTimeout:2000,
        autoplayHoverPause:true,
        responsive:{
          0:{
            items:1
          },
          600:{
            items:2
          },
          1000:{
            items:3
          }
        }
      });
    </script>
  </body>
</html>

css

*{
  margin: 0;
  padding: 0;
  font-family: "Open Sans",sans-serif;
  box-sizing: border-box;
}

body{
  background: #e8e8e8;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.services-section{
  width: 100%;
}

.inner-width{
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.services-section h1{
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 80px;
}

.services-section h1 strong{
  color: #6ab04c;
}

.service{
  text-align: center;
  margin: 20px 0;
}

.service-icon{
  width: 60px;
  height: 60px;
  margin: auto;
  background: #ecf6ff;
  border-radius: 50%;
  color: #6ab04c;
  line-height: 60px;
  font-size: 25px;
}

.service-name{
  font-weight: 600;
  font-size: 18px;
  margin: 20px 0;
}

.service-desc{
  max-width: 400px;
  margin: auto;
  color: #333;
  font-size: 17px;
}

.owl-dots{
  text-align: center;
  margin-top: 40px;
}

.owl-dot{
  width: 14px;
  height: 14px;
  background: #808080 !important;
  margin: 0 6px;
  border-radius: 14px;
  outline: none;
  transition: .3s linear;
}

.owl-dot.active{
  width: 36px;
  background: #6ab04c !important;
}

.owl-dot:hover{
  width: 36px;
  background: #6ab04c !important;
}

在线演示? 让链接同时具备两种打开方式