做网站，手风琴的制作方法
发表日期：2022-03-07 文章编辑：洛壹网络 文章来源：建站公司
做网站，手风琴的制作方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴</title>
<script src="./js/jquery.min.js"></script>
<link rel="stylesheet" href="./css/animate.css">
<link rel="stylesheet" href="./css/animate_fade.css">
<link rel="stylesheet" href="./css/reset.css">
<style>
.center {
margin: auto;
max-width: 1400px;
}
.tab .tabdd{
cursor: pointer;
width: 198px;
overflow: hidden;
-o-transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
margin-right: 20px;
}
.tab .tabdd img{
width: 198px;
height: 472px;
}
.tab .active{
width:645px;
}
.tab .tabdd .content {
padding: 36px 60px 60px 68px;
color: #525252;
line-height: 2;
background-color: #00a3e4;
border-bottom: 1px solid #e1e7ed;
width: 447px;
height: 472px;
}
</style>
</head>
<body>
<div>
<dl class="tab flex">
<dd class="flex tabdd active">
<img src="./images/sr1.jpg" alt="">
<div>
及早治疗，可有效避免各类高度近视併发症，如青光眼、白内障、视网膜剥离、黄斑部退化等。
</div>
</dd>
<dd class="flex tabdd">
<img src="./images/sr1.jpg" alt="">
<div>
及早治疗，可有效避免各类高度近视併发症，如青光眼、白内障、视网膜剥离、黄斑部退化等。
</div>
</dd>
<dd class="flex tabdd">
<img src="./images/sr1.jpg" alt="">
<div>
及早治疗，可有效避免各类高度近视併发症，如青光眼、白内障、视网膜剥离、黄斑部退化等。
</div>
</dd>
<dd class="flex tabdd">
<img src="./images/sr1.jpg" alt="">
<div>
及早治疗，可有效避免各类高度近视併发症，如青光眼、白内障、视网膜剥离、黄斑部退化等。
</div>
</dd>
</dl>
</div>
</body>
<script>
$('.tab .tabdd').hover(function(){
if(!$(this).hasClass('active')){
$(this).addClass('active').siblings().removeClass('active');
}
},function(){})
</script>
</html>
本文链接：https://www.szluoyi.com/news-details-39-651-1.html
版权声明：
1：本站所有内容均由互联网收集整理、上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途，如描述有误或者学术不对之处欢迎及时提出，不甚感谢。
2、 如涉及版权问题，请联系我们4724325@qq.com第一时间处理；
