<!DOCTYPE html><html><head> <title>tab选项卡演示示例</title> <meta content="text/html" charset="utf-8"> <style type="text/css"> *{margin: 0;padding: 0;list-style-type: none;font-size: 12px;} .notice{width: 298px;height: 98px;margin: 10px;border: 1px solid #eee;overflow: hidden;margin: 0 auto;} .notice-tit{height: 27px;position: relative;background: #f7f7f7;} .notice-tit ul{position: absolute;width: 301px;left: -1px;} .notice-tit ul li{width: 58px;float: left;height: 26px;line-height: 26px;text-align: center;overflow: hidden;background: #f7f7f7;padding: 0 1px;border-bottom: 1px solid #eee;} .notice-tit li.select{background: #fff;border-bottom-color: #fff;border-right: 1px solid #eee;border-left: 1px solid #eee;padding: 0;font-weight: bold;} .notice li a:link,.notice li a:visited{text-decoration: none;color: #000;} .notice li a:hover{color: #f90;} .notice-con .mod{margin: 10px 10px 10px 19px;} .notice-com .mod ul li{width: 134px;height: 25px;overflow: hidden;float: left;} </style></head><body> <div id="notice" class="notice"> <div id="notice-tit" class="notice-tit"> <ul> <li class="select"><a href="#">公告</a></li> <li><a href="#">规则</a></li> <li><a href="#">论坛</a></li> <li><a href="#">安全</a></li> <li><a href="#">公益</a></li> </ul> </div> <div id="notice-con" class="notice-con"> <div class="mod"> <ul> <li><a href="#">张勇，要玩快乐足球</a></li> <li><a href="#">张勇，要玩快乐足球</a></li> <li><a href="#">张勇，要玩快乐足球</a></li> <li><a href="#">张勇，要玩快乐足球</a></li> </ul> </div> <div class="mod"> <ul> <li><span>[<a href="#">通知</a>]</span><a href="#">“滥发”即将换新</a></li> <li><span>[<a href="#">通知</a>]</span><a href="#">“滥发”即将换新</a></li> <li><span>[<a href="#">通知</a>]</span><a href="#">“滥发”即将换新</a></li> <li><span>[<a href="#">通知</a>]</span><a href="#">“滥发”即将换新</a></li> </ul> </div> <div class="mod"> <ul> <li><span>[<a href="#">聚焦</a>]</span><a href="#">“滥发”即将换新</a></li> <li><span>[<a href="#">聚焦</a>]</span><a href="#">“滥发”即将换新</a></li> <li><span>[<a href="#">聚焦</a>]</span><a href="#">“滥发”即将换新</a></li> <li><span>[<a href="#">聚焦</a>]</span><a href="#">“滥发”即将换新</a></li> </ul> </div> <div class="mod"> <ul> <li><a href="#">骗子骗术升级啦</a></li> <li><a href="#">骗子骗术升级啦</a></li> <li><a href="#">骗子骗术升级啦</a></li> <li><a href="#">骗子骗术升级啦</a></li> </ul> </div> <div class="mod"> <ul> <li><a href="#">1基金公益活动开始啦</a></li> <li><a href="#">1基金公益活动开始啦</a></li> <li><a href="#">1基金公益活动开始啦</a></li> <li><a href="#">1基金公益活动开始啦</a></li> </ul> </div> </div> </div></body></html>
- 2 回答
- 0 关注
- 2217 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消