415day(tab欄切換模組製作)
阿新 • • 發佈:2018-11-24
《2018年11月23日》【連續415天】
標題:tab欄切換模組製作;
內容:
<div class="news"> <div class="tab-hd"> <a href="javascript:;" class="cuxiao">促銷</a> <a href="javascript:;">公告</a> <a href="#" class="more1">更多</a> <div class="line"></div> </div> <div class="tab-bd"> <ul> <li><a href="#">蓄電池專場下單立減</a></li> <li><a href="#">蓄電池專場下單立減</a></li> <li><a href="#">蓄電池專場下單立減</a></li> <li><a href="#">蓄電池專場下單立減</a></li> </ul> <!-- <ul> <li><a href="#">蓄電池專場下單立減</a></li> <li><a href="#">蓄電池專場下單立減</a></li> <li><a href="#">蓄電池專場下單立減</a></li> <li><a href="#">蓄電池專場下單立減</a></li> </ul> --> </div> </div>
.jd-clo3 a{ font-size: 12px; color: #747474; } .news { height: 149px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 5px 15px 0; } .tab-hd { border-bottom: 1px solid #ccc; padding: 3px 0; position: relative; } .tab-hd a{ margin: 0 4px; } .cuxiao { border-right: 1px solid #ccc; padding-right: 10px; } .news .more1 { position: absolute; top: 2px; right: 0; } .line { width: 28px; height: 2px; background-color: #f10215; position: absolute; bottom: -1px; left: 0; } .tab-bd { margin-top: 10px; } .tab-bd li { height: 23px; line-height: 23px; }