HTML+CSS實現手風琴樣式
阿新 • • 發佈：2020-08-26
HTML:
<body> <div class="box"> <ul> <li class="pic1"><a href="#"> <span></span> <b>度假酒店 </b> </a></li> <li class="pic2"><a href="#"> <span></span> <b>度假酒店 </b> </a></li> <li class="pic3"><a href="#"> <span></span> <b>度假酒店 </b> </a></li> <li class="pic4"><a href="#"> <span></span> <b>度假酒店 </b> </a></li> <li class="pic5"><a href="#"> <span></span> <b>度假酒店 </b> </a></li> <li class="pic6"><a href="#"> <span></span> <b>度假酒店 </b> </a></li> <li class="pic7"><a href="#"> <span></span> <b>度假酒店 </b> </a></li> </ul> </div> </body>
CSS:
<style> *{ margin: 0; padding: 0; } .box{ width: 1200px; height: 260px; border:1px solid #000; margin: 0 auto; margin-top:50px; } .box ul li{ float: left; width: 14.28%; height: 260px; text-align:center; list-style: none; } .box ul li a{ text-decoration:none; width: 100%; height: 100%; display: block; position: relative; } .box ul li span{ display: block; width: 100%; height: 100%; background-color: #000; opacity: .5; } b{ font-size: 28px; display: block; width: 30px; color: #fff; position: absolute; left: 0; right: 0; top: 30px; margin: auto; } .box:hover li{ width: 133px; } .box li:hover{ width: 400px; } .box li:hover span{ display: none; } .box li:hover b{ display: none; } .pic1 a{background: url(./images/img_1.png) center no-repeat;} .pic2 a{background: url(./images/img_2.png) center no-repeat;} .pic3 a{background: url(./images/img_3.png) center no-repeat;} .pic4 a{background: url(./images/img_4.png) center no-repeat;} .pic5 a{background: url(./images/img_5.png) center no-repeat;} .pic6 a{background: url(./images/img_6.png) center no-repeat;} .pic7 a{background: url(./images/img_7.png) center no-repeat;} </style>
所用圖片為 高260px；寬400px；