css3 实现企业建站APP案例展示布局,利用css3属性,实现hover 状态覆盖层,结构简单易用,下载即可使用。
使用方法
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>2、body引入HTML代码
<div class="app-store-box"> <div class="app-store-head"> <h2>App案例展示</h2> </div> <div class="app-store-wrap"> <div class="app-store-list clearfix"> <div class="app-store-item item01"> <a href="#"> <img src="images/app-store-item1.png" alt=""> <div class="app-store-info"> <h3>生鲜无忧</h3> <div class="app-store-tag"></div> </div> </a> </div> <div class="app-store-item item02"> <a href="#"> <img src="images/app-store-item2.png" alt=""> <div class="app-store-info"> <h3>阁楼</h3> <div class="app-store-tag"></div> </div> </a> </div> <div class="app-store-item item03"> <a href="#"> <img src="images/app-store-item3.png" alt=""> <div class="app-store-info"> <h3>欧乐家装</h3> <div class="app-store-tag"></div> </div> </a> </div> <div class="app-store-item item04"> <a href="#"> <img src="images/app-store-item4.png" alt=""> <div class="app-store-info"> <h3>聚焦头条</h3> <div class="app-store-tag"></div> </div> </a> </div> <div class="app-store-item item05"> <a href="#"> <img src="images/app-store-item5.png" alt=""> <div class="app-store-info"> <h3>家校通</h3> <div class="app-store-tag"></div> </div> </a> </div> </div> <div class="app-store-btn"> <a href="#"> 更多案例&模板 </a> </div> </div> </div>