绿色的图标导航响应式布局,css3图标悬停显示二级菜单代码。
使用方法
1、head引入css文件
<link href="css/index.css" rel="stylesheet">2、body引入HTML代码
<div class="t-mian1C"> <!-- 学院SPU --> <div class="t-mianCon clearfloat" id="spu-list"> <div class="t-mainsku"> <div> <img src="images/20180308051003950acc_icon.png" class="mt30"> <p class="t-text" style="color: rgb(53, 212, 143);"> 会计学院 </p> </div> <div class="skuShow "> <p class="t-miantit" style="color: rgb(53, 212, 143);"> 会计学院 </p> <div class="t-gang"> </div> <a href="#" class="sku-mr" >会计初级职称</a> <a href="#" class="sku-mr" >会计中级职称</a> <a href="#" class="sku-mr" >注册会计师</a> <a href="#" class="sku-mr" >美国管理会计师</a> </div> </div> <div class="t-mainsku"> <div> <img src="images/20180308051010497teacher_icon.png" class="mt30"> <p class="t-text" style="color: rgb(53, 212, 143);"> 教师学院 </p> </div> <div class="skuShow "> <p class="t-miantit" style="color: rgb(53, 212, 143);"> 教师学院 </p> <div class="t-gang"> </div> <a href="#" class="sku-mr" >幼儿教师资格证</a> <a href="#" class="sku-mr" >幼儿教师招聘</a> <a href="#" class="sku-mr" >小学教师资格证</a> <a href="#" class="sku-mr" >小学教师招聘</a> <a href="#" class="sku-mr" >中学教师资格证</a> <a href="#" class="sku-mr" >中学教师招聘</a> </div> </div> <div class="t-mainsku"> <div> <img src="images/20180308051121519HR_icon.png" class="mt30"> <p class="t-text" style="color: rgb(53, 212, 143);"> 人力学院 </p> </div> <div class="skuShow "> <p class="t-miantit" style="color: rgb(53, 212, 143);"> 人力学院 </p> <div class="t-gang"> </div> <a href="#" class="sku-mr" >人力资源初级职称</a> <a href="#" class="sku-mr" >人力资源中级职称</a> <a href="#" class="sku-mr" >人力管理师三级</a> </div> </div> <div class="t-mainsku"> <div> <img src="images/201803080510289gwy.png" class="mt30"> <p class="t-text" style="color: rgb(53, 212, 143);"> 公务员学院 </p> </div> <div class="skuShow skuLie"> <p class="t-miantit" style="color: rgb(53, 212, 143);"> 公务员学院 </p> <div class="t-gang"> </div> <a href="#" class="sku-mr" >国家公务员</a> <a href="#" class="sku-mr" >地方公务员</a> </div> </div> <div class="t-mainsku"> <div> <img src="images/20180308051015405IT_icon.png" class="mt30"> <p class="t-text" style="color: rgb(53, 212, 143);"> IT技能学院 </p> </div> <div class="skuShow "> <p class="t-miantit" style="color: rgb(53, 212, 143);"> IT技能学院 </p> <div class="t-gang"> </div> <a href="#" class="sku-mr" >平面设计</a> <a href="#" class="sku-mr" >室内设计</a> <a href="#" class="sku-mr" >小程序开发</a> <a href="#" class="sku-mr" >Office办公软件</a> <a href="#" class="sku-mr" >计算机二级</a> </div> </div> <div class="t-mainsku"> <div> <img src="images/20180308051106603english_icon.png" class="mt30"> <p class="t-text" style="color: rgb(53, 212, 143);"> 外语学院 </p> </div> <div class="skuShow "> <p class="t-miantit" style="color: rgb(53, 212, 143);"> 外语学院 </p> <div class="t-gang"> </div> <a href="#" class="sku-mr" >英语四级</a> <a href="#" class="sku-mr" >英语六级</a> <a href="#" class="sku-mr" >韩语入门</a> <a href="#" class="sku-mr" >日语入门</a> </div> </div> <div class="t-mainsku"> <div> <img src="images/20180308051115328xz_icon.png" class="mt30"> <p class="t-text" style="color: rgb(53, 212, 143);"> 自考学院 </p> </div> <div class="skuShow "> <p class="t-miantit" style="color: rgb(53, 212, 143);"> 自考学院 </p> <div class="t-gang"> </div> <a href="#" class="sku-mr" >会计专科</a> <a href="#" class="sku-mr" >会计本科</a> <a href="#" class="sku-mr" >行政管理专科</a> <a href="#" class="sku-mr" >行政管理本科</a> <a href="#" class="sku-mr" >汉语言文学专科</a> <a href="#" class="sku-mr" >汉语言文学本科</a> </div> </div> <div class="t-mainsku"> <div> <img src="images/20180308051041218jinrong_icon.png" class="mt30"> <p class="t-text" style="color: rgb(53, 212, 143);"> 金融学院 </p> </div> <div class="skuShow "> <p class="t-miantit" style="color: rgb(53, 212, 143);"> 金融学院 </p> <div class="t-gang"> </div> <a href="#" class="sku-mr" >证券一般从业</a> <a href="#" class="sku-mr" >证券专项</a> <a href="#" class="sku-mr" >基金从业</a> <a href="#" class="sku-mr" >银行从业</a> </div> </div> <div class="t-mainsku"> <div> <img src="images/20180308051046601jianzhu_icon.png" class="mt30"> <p class="t-text" style="color: rgb(53, 212, 143);"> 工程学院 </p> </div> <div class="skuShow skuLie"> <p class="t-miantit" style="color: rgb(53, 212, 143);"> 工程学院 </p> <div class="t-gang"> </div> <a href="#" class="sku-mr" >一级建造师</a> <a href="#" class="sku-mr" >二级建造师</a> <a href="#" class="sku-mr" >一级消防工程师</a> </div> </div> <div class="t-mainsku"> <div> <img src="images/2018030805111248qz_icon.png" class="mt30"> <p class="t-text" style="color: rgb(53, 212, 143);"> 求职/司法学院 </p> </div> <div class="skuShow skuLie"> <p class="t-miantit" style="color: rgb(53, 212, 143);"> 求职/司法学院 </p> <div class="t-gang"> </div> <a href="#" class="sku-mr" >司法考试</a> <a href="#" class="sku-mr" >求职辅导</a> </div> </div> </div> </div>