图片手风琴效果

来源：互联网发布：互联网网络销售o2o 编辑：程序博客网时间：2024/05/17 17:14

图片手风琴效果可以通过简单的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>

其要点在于要比较选择器的权重问题，同时权重相同时要注意就近原则。![这里写图片描述](http://img.blog.csdn.net/20161218140946833?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHp4MDUxOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

0 0