<!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>
