屏幕适配-响应式页面源码_pc.h5响应式资源-CSDN文库

共6个文件

js：2个

css：2个

webp：1个

64 浏览量 2024-06-12 15:08:42 上传评论收藏 64KB 7Z 举报

资源推荐

资源详情

资源评论

收起资源包目录

响应式网页.7z （6个子文件）

响应式网页

swiper.min.js 138KB

jquery.js 83KB

swiper.min.css 13KB

img

img.webp 470B

css

index.css 5KB

index.html 4KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>网站首页</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./js/swiper.min.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery.js"></script> <script src="js/swiper.min.js"></script> </head> <body> <nav class="navbar w"> <div class="logo"> <h1>耀南网页响应式</h1> </div> <ul> <li><a href="index.html">网站首页</a></li> <li><a href="#">网页响应式</a></li> <li><a href="#">搜索</a></li> <li><a href="#">媒体查询</a></li> </ul>  <div class="hbg"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </nav> <div class="banner"> <div class="swiper mySwiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="./img/img.webp" alt=""> </div> <div class="swiper-slide"> <img src="./img/img.webp" alt=""> </div> <div class="swiper-slide"> <img src="./img/img.webp" alt=""> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </div> </div> <div class="index-list"> <div class="w"> <h3 class="title">网站响应式</h3> <div class="list-box"> <div class="l-item"> <a href="detail.html"> <img src="./img/img.webp" alt=""> <h3>这是标题</h3> <p> 这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述 </p> </a> </div> <div class="l-item"> <a href="detail.html"> <img src="./img/img.webp" alt=""> <h3>这是标题</h3> <p> 这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述 </p> </a> </div> <div class="l-item"> <a href="detail.html"> <img src="./img/img.webp" alt=""> <h3>这是标题</h3> <p> 这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述 </p> </a> </div> <div class="l-item"> <a href="detail.html"> <img src="./img/img.webp" alt=""> <h3>这是标题</h3> <p> 这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述 </p> </a> </div> </div> </div> </div> <div class="two"> <div class="w"> <h3 class="title">媒体查询</h3> <div class="two-list"> <img src="./img/img.webp" alt=""> <img src="./img/img.webp" alt=""> </div> </div> </div> <footer> 网站响应式 </footer> </body> </html> <script> // 轮播图 var swiper = new Swiper(".mySwiper", { autoplay: true, pagination: { el: ".swiper-pagination", }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); // 导航栏 var flag = false; $('.hbg').click(function(){ flag = !flag; if(flag){ $('.line:nth-child(2)').hide() $('.line:nth-child(1)').css({ 'transform': 'translateY(5px) rotate(225deg)' }) $('.line:nth-child(3)').css({ 'transform': 'translateY(-3px) rotate(-225deg)' }) }else{ $('.line:nth-child(2)').show() $('.line:nth-child(1)').css({ 'transform': 'translateY(0) rotate(0)' }) $('.line:nth-child(3)').css({ 'transform': 'translateY(0) rotate(0)' }) } $('.navbar ul').stop().slideToggle(); }) </script>

评论收藏

内容反馈