这篇文章将为大家详细讲解有关CSS实现tab效果仿163邮箱样式的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。代码如下:<!DOCTYPE html><html>&
这篇文章将为大家详细讲解有关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邮箱样式的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: css实现tab效果仿163邮箱样式的方法
本文链接: https://lsjlt.com/news/255430.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0