做网站,手风琴的制作方法

发表日期: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>

您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器