手风琴

最新推荐文章于 2022-11-20 20:53:52 发布

think_you_WL

最新推荐文章于 2022-11-20 20:53:52 发布

阅读量259

点赞数 1

文章标签： css html js

本文链接：https://blog.csdn.net/think_you_WL/article/details/78843975

版权

手风琴
这里写图片描述
CSS
*{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
}
.pic{
width: 1160px;
height: 350px;
border: 1px solid #003366;
margin: 100px auto;
}
.pic ul li{
float: left;
width: 100px;
height: 350px;
}
.pic1{
background-image: url(“../img/1.png”);
}
.pic2{
background-image: url(“../img/2.png”);
}
.pic3{
background-image: url(“../img/3.png”);
}
.pic .pic4{
background-image: url(“../img/4.png”);
width: 860px;
}
.txt{
background: #fff;
background:rgba(0,0,0,.5);
width: 100px;
height: 350px;
}
.txt p{
float: left;
color: #fff;
}
.txt .p1{
font-size:16px;
width: 16px;
padding: 140px 20px 0px 15px;
}
.txt .p2{
font-size:14px;
width: 14px;
margin: -115px 20px 0px 60px;
}

**HTML**

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="pic">
    <ul>
        <li class="pic1">
            <a href="javascript:;">
                <div class="txt">
                    <p class="p1">大自然的魅力</p>
                    <p class="p2">大自然的美丽</p>

                </div>
            </a>
        </li>
        <li class="pic2">
            <a href="javascript:;">
                <div class="txt">
                    <p class="p1">大自然的魅力</p>
                    <p class="p2">大自然的美丽</p>

                </div>
            </a>
        </li>
        <li class="pic3">
            <a href="javascript:;">
                <div class="txt">
                    <p class="p1">大自然的魅力</p>
                    <p class="p2">大自然的美丽</p>

                </div>
            </a>
        </li>
        <li class="pic4">
            <a href="javascript:;">
                <div class="txt">
                    <p class="p1">大自然的魅力</p>
                    <p class="p2">大自然的美丽</p>

                </div>
            </a>
        </li>
    </ul>
</div>
</body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/style.js"></script>
</html>

/**
* Created by Administrator on 2017/9/20 0020.
*/
$(function(){$ (“.pic ul li”).mouseover(function(){
$(this).stop(true).animate({width:”860px”},500).siblings().stop(true).animate({width:”100px”},500);
});

});

think_you_WL

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手风琴

手风琴 CSS *{ padding: 0; margin: 0; list-style: none; } a{ text-decoration: none; } .pic{ width: 1160px; height: 350px; border: 1px solid #003366; margin:
复制链接

扫一扫

手风琴

“相关推荐”对你有帮助么？