cid1019 用 jquery HTML CSS & 自适应展现卡-网页前端设计
index.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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> </head> <body> <div class="testimonial-section"> <div class="inner-width"> <h1>What Client Says</h1> <div class="border"></div> <div class="slides owl-carousel"> <div class="testimonial"> <div class="test-info"> <img class="test-pic" src="img/p1.png" alt=""> <div class="test-name"> <span>Client1</span> @client1 </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet temporibus minus nam, sed quaerat odio iste ipsa autem suscipit, magnam mollitia iusto enim praesentium possimus modi tenetur neque, molestiae ratione. </p> </div> <div class="testimonial"> <div class="test-info"> <img class="test-pic" src="img/p2.png" alt=""> <div class="test-name"> <span>Client2</span> @client2 </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet temporibus minus nam, sed quaerat odio iste ipsa autem suscipit, magnam mollitia iusto enim praesentium possimus modi tenetur neque, molestiae ratione. </p> </div> <div class="testimonial"> <div class="test-info"> <img class="test-pic" src="img/p3.png" alt=""> <div class="test-name"> <span>Client3</span> @client3 </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet temporibus minus nam, sed quaerat odio iste ipsa autem suscipit, magnam mollitia iusto enim praesentium possimus modi tenetur neque, molestiae ratione. </p> </div> </div> </div> </div> <script type="text/javascript"> $(".owl-carousel").owlCarousel({ margin:10, responsiveClass:true, responsive:{ 0:{ items:1 }, 680:{ items:2 }, 960:{ items:3 } } }); </script> </body> </html>
style.css
*{ margin: 0; padding: 0; font-family: "montserrat",sans-serif; box-sizing: border-box; } .testimonial-section{ background: #3498db; padding: 40px 0; } .inner-width{ max-width: 1200px; margin: auto; padding: 0 20px; } .testimonial-section h1{ text-align: center; color: #333; font-size: 24px; } .border{ width: 100px; height: 3px; background: #333; margin: 40px auto; } .testimonial{ background: #f1f1f1; padding: 40px; overflow: hidden; border-radius: 8px; cursor: pointer; } .test-info{ display: flex; height: 60px; align-items: center; } .test-pic{ width: 50px !important; border-radius: 50%; margin-right: 15px; } .test-name{ font-size: 12px; color: #333; } .test-name span{ display: block; font-size: 14px; font-weight: 700; color: #3498db; } .testimonial p{ font-size: 12px; line-height: 22px; margin-top: 20px; }
