主要是中間的分割線,效果圖如下:
Html代碼:
<div class="fuwu"> <ul> <li><a href=""><i class="iconfont icon-shizhong"></i><span>保障服務</span></a></li> <li><a href=""><i class="iconfont icon-tuangou"></i><span>企業團購</span></a></li> <li><a href=""><i class="iconfont icon-fenxiang"></i><span>F碼通道</span></a></li> <li><a href=""><i class="iconfont icon-wifidianhuaqia"><span>米粉卡</span></a></i></li> <li><a href=""><i class="iconfont icon-icon-test"></i><span>以舊換新</span></a></li> <li><a href=""><i class="iconfont icon-chongzhi"></i><span>話費充值</span></a></li> </ul> </div>
CSS代碼:
.fuwu { width: 234px; height: 170px; float: left; background: #5f5750; } .fuwu A { color: #d6cdcd; } .fuwu A:hover { color: rgb(255, 253, 253); } .fuwu ul { overflow: hidden; } .fuwu li { width: 75px; height: 83px; float: left; margin: 1px; text-align: center; position: relative; }
/* 以下2個僞類主要通過控制邊框長度實現分割線效果 */ .fuwu ul li:before { content: ''; position: absolute; top: -1px; left: 6px; width: 64px; height: 1px; background: #665e57; } .fuwu ul li:after { content: ''; position: absolute; top: 6px; left: 0; width: 1px; height: 70px; background: #665e57; } .fuwu i { font-size: 28px; display: block; margin-top: 13px; margin-bottom: 2px; } .fuwu span { font-size: 12px; display: block; }