一个比较漂亮的tab样式

最新推荐文章于 2022-07-01 08:02:05 发布
转载 最新推荐文章于 2022-07-01 08:02:05 发布 · 8.6k 阅读 · 1

直接上代码吧：

Html代码   收藏代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4. <style>  
  5.   
  6. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p, blockquote, th, td {  
  7. margin:0;  
  8. padding:0;  
  9. font:宋体;  
  10. font-size:12px;  
  11. }  
  12.   
  13. ol, ul {  
  14. list-style:none outside none;  
  15. }  
  16.   
  17. /*link*/  
  18. a{color:#106aa9; text-decoration:none;}  
  19.   
  20. /*content nav one*/  
  21. .navC{border-bottom:1px solid #cce2ed;}  
  22. .navC li{border-left:1px solid #cce2ed;border-right:1px solid #cce2ed;}  
  23. .navC li a{border-top:1px solid #cce2ed;background:#f1f6fa;font-size:14px;}  
  24. .navC li a:hover{background:#ffffff;text-decoration:none;}  
  25. .navC .current,.navC li:hover{border-left:1px solid #cce2ed;border-right:1px solid #cce2ed;}  
  26. .navC li:hover a{border-top:1px solid #cce2ed;}  
  27. .navC .current a,.navC .current a:hover{background:#ffffff;border-bottom:1px solid #ffffff;color:#333333;border-top:1px solid #cce2ed;}  
  28. .navC .current a{ font-weight:700;}  
  29.   
  30. .navC{height:28px;line-height:28px;}  
  31.     .navC ul{padding-left:10px;float:left;margin-bottom:-1px;} /*ie6*/  
  32.         .navC li{float:left;margin-right:5px;}  
  33.             .navC li a{float:left;display:block;padding:0 15px;height:28px;overflow:hidden;margin-top:-1px;_position:relative;}  
  34.   
  35. .mb10{ margin:10px; }  
  36. .mb20{ margin:20px; }  
  37. .pd10{ padding:10px;}  
  38.   
  39. /*table*/  
  40. .tdtable{border:0px;cellspacing:0;cellpadding:0;align:center;width:98%;border-collapse:collapse;}  
  41. .tdtable th,tr{height:40px;}  
  42. .tdtable th{background:#cce2ed;padding:10px;padding:4px;border:solid 1px #fff;}  
  43. .tdtable td{border:solid 1px #cce2ed;padding:4px;}  
  44.   
  45.   
  46. </style>  
  47. </head>  
  48. <body>  
  49. <div id="mainContainer">  
  50.     <div id="navContainer" class="navC mb10">  
  51.         <ul>  
  52.             <li><a href="#" hidefocus="true">系统设置1</a></li>  
  53.             <li><a href="#" hidefocus="true">系统设置2</a></li>  
  54.             <li class="current"><a href="#" hidefocus="true">系统设置3</a></li>  
  55.             <li><a href="#" hidefocus="true">系统设置4</a></li>  
  56.             <li><a href="#" hidefocus="true">系统设置5</a></li>  
  57.         </ul>  
  58.     </div>  
  59.     <div class="mb20">  
  60.     <table class="tdtable">  
  61.     <tbody>  
  62.         <tr>  
  63.             <th>  
  64.                 <strong>留言薄</strong>编号  
  65.             </th>  
  66.             <th>  
  67.                 手机号码  
  68.             </th>  
  69.             <th>  
  70.                 留言时间  
  71.             </th>  
  72.             <th>  
  73.                 留言  
  74.             </th>  
  75.             <th>  
  76.                 操作  
  77.             </th>  
  78.         </tr>       
  79.         <tr>  
  80.             <td>  
  81.                 1  
  82.             </td>  
  83.             <td>  
  84.                 13638688356  
  85.             </td>  
  86.             <td>  
  87.                   
  88.             </td>  
  89.             <td>  
  90.                 意见内容意见内容意见内容  
  91.             </td>  
  92.             <td>                    
  93.                 <a href="message-board!delete.action?id=1&amp;msgType=" class="del">删除</a>  
  94.             </td>  
  95.         </tr>   
  96.         <tr>  
  97.             <td>  
  98.                 2  
  99.             </td>  
  100.             <td>  
  101.                 13638688356  
  102.             </td>  
  103.             <td>  
  104.                   
  105.             </td>  
  106.             <td>  
  107.                 意见内容意见内容意见内容  
  108.             </td>  
  109.             <td>                    
  110.                 <a href="message-board!delete.action?id=2&amp;msgType=" class="del">删除</a>  
  111.             </td>  
  112.         </tr>   
  113.         <tr>  
  114.             <td>  
  115.                 8  
  116.             </td>  
  117.             <td>  
  118.                 13638688356  
  119.             </td>  
  120.             <td>  
  121.                   
  122.             </td>  
  123.             <td>  
  124.                 我爱你，就象老鼠爱大米11  
  125.             </td>  
  126.             <td>                    
  127.                 <a href="message-board!delete.action?id=8&amp;msgType=" class="del">删除</a>  
  128.             </td>  
  129.         </tr>       
  130.         <tr>  
  131.             <td bgcolor="#fafafa" align="right" colspan="6">  
  132.                 <div id="footer">  
  133.                     第1页, 共1页  
  134.                     <a href="javascript:jumpPage(1)">首页</a>  
  135.                       
  136.                       
  137.                     <a href="javascript:jumpPage(1)">末页</a>  
  138.                 </div>  
  139.             </td>  
  140.         </tr>  
  141.     </tbody>  
  142.     </table>    
  143.   
  144.     </div>  
  145. </div>  
  146. </body>  
  147. </html>  

 

看看效果吧：

 

    nanjing0412
    关注
    【高频考点精讲】手写选项卡组件：从样式切换到底部滑块，多种方式实现tab切换
    全栈老李的博客
    05-31 1083
    🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊前端开发中最常见的交互组件之一——选项卡(Tab)。这个看似简单的组件，其实藏着不少门道。我是全栈老李，一个喜欢把技术讲透的码农，今天咱们就好好盘一盘这个"老演员"。
    非常漂亮的TAB效果
    09-30
    非常漂亮的TAB效果 one two three
    多款精美的tab页签样式任你挑选
    05-12
    多款好看的tab页签样式，希望对你有所帮助
    CSS样式漂亮Tab页
    09-28
    一个很漂亮的Tab 标签 切换样式 非常经典的东东
    非常漂亮的tab，绝对好看，不好看不要分
    08-13
    非常漂亮的tab，绝对好看，不好看不要分。我精心查找的。希望大家喜欢。
    一个比较美观的圆角Tab选项卡切换效果
    04-07
    一个比较美观的圆角Tab选项卡切换效果.html一个比较美观的圆角Tab选项卡切换效果.html一个比较美观的圆角Tab选项卡切换效果.html
    一个漂亮的Tab效果
    06-07
    标题“一个漂亮的Tab效果”和描述“Div+Css实现的一个漂亮的Tab样式效果”指出，我们将探讨如何使用HTML的`div`元素和CSS来创建美观的Tab组件。 Tab样式通常包括一组可切换的面板，每个面板代表一个独立的内容区域...
    一个漂亮Tab切换选项卡，原生态调用，不用jquery文件，简捷实用, 包含小图！
    05-29
    总结来说，这个"漂亮Tab切换选项卡"提供了轻量级、高效的Tab选项卡解决方案，无需依赖任何外部库，特别适合追求简洁和效率的开发者。通过学习和应用这个资源，你可以提升你的前端开发技能，更好地理解原生JavaScript...
    android gallery 导航TAB样式 非常的漂亮和实用
    02-17
    在`GalleryDemo`这个项目中，开发者可能创建了一个示例应用，包含了一个`Gallery`实例，展示了如何将这个漂亮和实用的导航TAB样式应用到实际的Android应用中。开发者可能会在代码中设置`OnItemSelectedListener`监听...
    分享Android Gallery导航Tab的漂亮实用样式
    一个“漂亮的导航TAB样式”意味着它不仅仅具有功能上的实用性，还应具有吸引人的视觉效果，包括颜色、字体、动画等元素的和谐搭配。 在具体实现上，开发者通常会通过自定义Gallery组件的外观和行为来完成这样漂亮的...
    各种web的tab样式大全
    03-04
    这是web各种tab的实例，希望需要的人可以用上！
    VB漂亮蓝色窗口界面 TAB选项卡样式.rar
    07-10
    VB漂亮蓝色窗口界面 TAB选项卡样式，仿Windows MediaPlayer播放器窗口风格的选项卡控件，窗体风格也和MediaPlayer十分相似，很漂亮的VB窗体，制作信息管理系统和OA系统的都可以借鉴哦，具体运行效果请参见演示截图。
    android 很漂亮的tab 情景模式选择 有界面
    02-17
    声明：这也是我学习时在网上下载的，鉴于分享精神，并且觉得很不错才上传上来的。。。。。 android 很漂亮的tab 情景模式选择 有界面
    超漂亮的Tab切换插件
    07-31
    超级漂亮的Tab切换插件，支持的功能如下： 1、点击后样式定义类 2、tabs执行效果，如click,mouseover 3、tabs滑动模式，true启动内容滑动模式 4、tabs滑动模式下是否需要左右按钮 5、tabs滑动模式下按钮水平偏移 6、tabs滑动模式下按钮垂直偏移 7、tabs滑动模式下内容滑动速度 8、设置tabs开始的初始值
    简单好看的tab制作代码
    02-12
    满不错一个制作tab的简单代码，希望对大家有帮助
    【布局】各种TabLayout样式，好看的Tab样式， TabHost
    yfy1907的博客
    01-31 6797
    转自：https://www.cnblogs.com/neo-java/p/10185036.html demo下载：https://github.com/baitutang1221/FlycoTablayout    
    CSS+JS漂亮的tab选项卡
    ICode联盟
    07-01 503
    下载地址CSS+JS实现的漂亮的tab选项卡，带动画效果的tab切换插件。dd:
    一个简单的tab样式
    nanjing0412的专栏
    03-10 1790
    html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" > title>Testtitle> style type="text/css"> body{ margin:0; } .tab{
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值