css实现tab效果仿163邮箱样式的方法
短信预约 -IT技能 免费直播动态提醒
这篇文章将为大家详细讲解有关css实现tab效果仿163邮箱样式的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
代码如下:
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>163邮箱tab</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .dvTab { font-family: 'Microsoft Yahei',verdana; font-size:14px; height: 36px; position: absolute; left: 0px; width: 100%; top: 52px; } .menu { margin-left:12px; color: rgb(106, 106, 106); } .tab { list-style-type:none; float:left; margin-right: -1px; border:solid 1px #B9C4CF; width:91px; background: -moz-linear-gradient(center top , rgb(254, 255, 255), rgb(218, 232, 246)) repeat scroll 0% 0% transparent; background-color:#EBF3FA; height:23px; line-height:23px; text-align: center; padding: 5px 20px 4px 8px; border-top-left-radius: 3px; border-top-right-radius: 3px; text-overflow: ellipsis; } .dv { width: 100%; height:4px; line-height:4px; background-color:#135AA4; position:absolute; left:0; top:33px; } .activeTab { color:#fff; border-color:#135AA4; background-color:#135AA4; background: -moz-linear-gradient(center top , rgb(25, 111, 198), rgb(19, 91, 165)) repeat scroll 0% 0% transparent; } </style></head><body> <div class="dvTab"> <ul class="menu"> <li class="tab">首页</li> <li class="tab">通讯录</li> <li class="tab activeTab">应用中心</li> <li class="tab">收件箱</li> <li class="tab">写信</li> </ul> <div class="dv"></div> </div></body></html>关于“css实现tab效果仿163邮箱样式的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
