什么都分享
以及,记录自己的故事
正在载入当前位置天气信息……

CSS+DIV设计简约表格菜单

最终效果

菜单1

菜单2

菜单3

菜单4

CSS

.ex-tablemenu{
width:200px;
height:60px;
}
.ex-tablemenu tr td{
border:1px dashed #E8E8E8;
text-align:center;
color:#808080;
width:50%;
}
.ex-tablemenu tr td:hover{
border:1px solid #E8E8E8;
background-color:#F9F9F9;
}

HTML

<table class="ex-tablemenu">
   <tbody>
     <tr>
       <td><a href="#"><i class="fa fa-list fa-3x" style="color:#197DBF;"></i></a><div>菜单1</div></td>
       <td><a href="#"><i class="fa fa-book fa-3x" style="color:#D2691E;"></i></a><div>菜单2</div></td>
     </tr>
     <tr>
       <td><a href="#"><i class="fa fa-ban fa-3x" style="color:#8B0000;"></i></a><div>菜单3</div></td>
       <td><a href="#"><i class="fa fa-ban fa-3x" style="color:#FF8C00;"></i></a><div>菜单4</div></td>
     </tr>
   </tbody>
</table>
打赏
本文遵守创作共享 BY-NC-ND 4.0协议,转载前请先联系作者。绯末博客 » CSS+DIV设计简约表格菜单
分享到: 更多 (0)

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏