图片手风琴效果可以通过简单的css代码来实现其html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>手风琴效果</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
img{
border: none;
}
ul{
height: 360px;
width: 1100px;
}
li{
height: 360px;
width: 10%;
float: left;
}
li:first-child{
background: url(img/0Qvwqqc37bm2T5U4.jpg) no-repeat;
}
li:nth-child(2){
background: url(img/I8qsPnCHL82adc8s.jpg) no-repeat;
}
li:nth-child(3){
background: url(img/LKMHwpOP1Ou7SgqC.jpg) no-repeat;
}
li:nth-child(4){
background: url(img/nW4pjGVlliIg0aKI.jpg) no-repeat;
width: 70%;
}
ul:hover li{
width: 10%;
}
ul li:hover{
width: 70%;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
其要点在于要比较选择器的权重问题，同时权重相同时要注意就近原则。
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
