<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background:url(images/mm/bg.png);
padding: 0;
margin: 0;
width: 1362px;
height: 5023px;
}
#apDiv1{
position: absolute;
width: 961px;
height: 347px;
z-index: 1;
left: 193px;
top: 1718px;
}
.accordion{
background: #fff;
border: 1px solid #DFDFDF;
box-shadow: 1px 1px 1px #ddd;
border-radius: 2px;
}
.accordion h3 {
margin: 0;
padding: 8px 1em;
font-weight:normal;
background-color: #F5F5F5;
}
.accordion h3 a {
text-decoration: none;
color: #111;
font-size: 18px;
font-family: 'Microsoft Yahei';
}
.accordion h3 + div {
height: 0;
padding: 0;
overflow: hidden;
-webkit-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
/*两个标签一起transition，兄弟选择器*/
.accordion :target h3 + div {
height: 265px;
}
.red {
font-size: 22px;
color: #FE6DA6;
}
</style>
</head>
<body>
<div id="apDiv1">
<div class="accordion">
<div id="one">
<h3><a href="#one">菇凉们喜欢的<span class="red">衣服</span></a></h3>
<div><img src="images/mm/1.png"></div>
</div>
<div id="two">
<h3><a href="#two">菇凉们喜欢的<span class="red">鞋子</span></a></h3>
<div><img src="images/mm/2.png"></div>
</div>
<div id="three">
<h3><a href="#three">菇凉们喜欢的<span class="red">包包</span></a></h3>
<div><img src="images/mm/3.png"></div>
</div>
</div>
</div>
</body>
</html>
屏幕快照 2017-11-24 下午4.52.33.png
网友评论