无忧启动论坛

标题: 求助CSS高手，代码修改 (二) [打印本页]

---

作者: proof    时间: 4 小时前
标题: 求助CSS高手，代码修改 (二)
CSS代码，仿Chrome标签页(梯形标签页)，用于文件管理软件Tablacus Explorer。
想做一个改进，就是提升文字位置，如图：



CSS代码（待修改）

1. /* ============================================
   
2.    基础设置与颜色定义
   
3.    ============================================= */
   
4. 
   
5. /* 1. 去除默认的边框、阴影和凸起效果 */
   
6. .tab, .tab2, .tab3, .activetab,
   
7. .tab:hover, .tab2:hover, .tab3:hover {
   
8.   box-shadow: none !important;
   
9.   border: none !important;
   
10.   outline: none !important;
    
11. }
    
12. 
    
13. /* 2. 标签栏整体背景 */
    
14. .tab0 {
    
15.   /* 这里设置标签栏底色，建议使用深蓝灰色 */
    
16.   background-color: #648ca5;
    
17.   padding: 5px 0 0 10px; /* 顶部留点空隙，左侧留空隙 */
    
18.   height: 30px; /* 强制高度，防止布局乱跳 */
    
19. }
    
20. 
    
21. /* =============================================
    
22.    标签通用形状 (所有标签都生效的样式)
    
23.    ============================================ */
    
24. .tab, .tab2, .tab3, .activetab {
    
25.   position: relative;
    
26.   display: inline-block;
    
27.   height: 26px;        /* 标签高度 */
    
28.   line-height: 28px;   /* 文字垂直居中微调 */
    
29.   padding: 0px 10px;     /* 文字左右间距 */
    
30.   margin: 0 8px;       /* 标签之间的重叠/间距，负数可以让它们重叠 */
    
31.   font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
    
32.   cursor: default;
    
33.   vertical-align: top; /* 顶部对齐 */
    
34. }
    
35. 
    
36. /* 通用的伪元素设置 (用于显示梯形两侧) */
    
37. .tab:before, .tab:after,
    
38. .tab2:before, .tab2:after,
    
39. .tab3:before, .tab3:after,
    
40. .activetab:before, .activetab:after {
    
41.   content: "";
    
42.   position: absolute;
    
43.   bottom: 0;
    
44.   width: 25px;  /* SVG图片的宽度 */
    
45.   height: 26px; /* 必须与标签高度一致 */
    
46.   pointer-events: none; /* 防止鼠标点到圆角上没反应 */
    
47. }
    
48. 
    
49. /* 左侧圆角位置 */
    
50. .tab:before, .tab2:before, .tab3:before, .activetab:before {
    
51.   left: -21px; /* 根据SVG宽度调整，负值 */
    
52. }
    
53. 
    
54. /* 右侧圆角位置 (镜像翻转) */
    
55. .tab:after, .tab2:after, .tab3:after, .activetab:after {
    
56.   right: -21px;
    
57.   transform: scaleX(-1);
    
58. }
    
59. 
    
60. /* =============================================
    
61.    状态 A: 非当前页 (普通标签)
    
62.    ============================================= */
    
63. .tab, .tab2, .tab3 {
    
64.   /* 非当前页背景色 (稍浅于底色，或灰色) */
    
65.   background-color: #8daabb;
    
66.   color: #FFFFFF; /* 非当前页文字颜色 */
    
67.   z-index: 1;  /* 层级低，被当前页压住 */
    
68. }
    
69. 
    
70. /* 非当前页的梯形 SVG (填充色必须对应上面的 background-color: #8daabb) */
    
71. .tab:before, .tab:after,
    
72. .tab2:before, .tab2:after,
    
73. .tab3:before, .tab3:after {
    
74.   /* 下方 fill=%238daabb 就是颜色代码，如果改背景色，这里也要改 */
    
75.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%238daabb%22%20d%3D%22M24%200C9%200%2015%2026%200%2026h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
76. }
    
77. 
    
78. /* ==============================================
    
79.    状态 B: 鼠标悬停 (Hover)
    
80.    ============================================= */
    
81. .tab:hover, .tab2:hover, .tab3:hover {
    
82.   /* 悬停时的背景色 (浅蓝色) */
    
83.   background-color: #bfe0f0;
    
84.   color: #000;
    
85.   z-index: 5; /* 悬停时层级提高 */
    
86. }
    
87. 
    
88. /* 悬停时的梯形 SVG (填充色 fill=%23bfe0f0) */
    
89. .tab:hover:before, .tab:hover:after,
    
90. .tab2:hover:before, .tab2:hover:after,
    
91. .tab3:hover:before, .tab3:hover:after {
    
92.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23bfe0f0%22%20d%3D%22M24%200C9%200%2015%2026%200%2026h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
93. }
    
94. 
    
95. /* =============================================
    
96.    状态 C: 当前页 (Active)
    
97.    ============================================= */
    
98. .activetab {
    
99.   /* 当前页背景色 (白色) */
    
100.   background-color: #ffffff;
     
101.   color: #000; /* 当前页文字颜色 */
     
102.   z-index: 10; /* 层级最高，压在所有标签上面 */
     
103.   font-weight: normal;
     
104. 
     
105. }
     
106. 
     
107. /* 当前页的梯形 SVG (填充色 fill=%23ffffff) */
     
108. .activetab:before, .activetab:after {
     
109.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M24%200C9%200%2015%2026%200%2026h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
     
110. }

复制代码

---

作者: it323    时间: 3 小时前
感谢分享！

---

作者: a66    时间: 2 小时前

• 文字压底边通过 line-height: 28px; 实现（比 height: 26px 高 2px），让文字略微下沉到底部。
• 如果你以后想改成 垂直居中 或 顶部对齐，只需要修改 line-height 和 padding 即可。
  

以下代码，供参考

1. /* ============================================
   
2.    基础设置与颜色定义
   
3.    ============================================= */
   
4. 
   
5. /* 1. 去除默认的边框、阴影和凸起效果 */
   
6. .tab, .tab2, .tab3, .activetab,
   
7. .tab:hover, .tab2:hover, .tab3:hover {
   
8.   box-shadow: none !important;
   
9.   border: none !important;
   
10.   outline: none !important;
    
11. }
    
12. 
    
13. /* 2. 标签栏整体背景 */
    
14. .tab0 {
    
15.   /* 这里设置标签栏底色，建议使用深蓝灰色 */
    
16.   background-color: #648ca5;
    
17.   padding: 5px 0 0 10px; /* 顶部留点空隙，左侧留空隙 */
    
18.   height: 30px; /* 强制高度，防止布局乱跳 */
    
19. }
    
20. 
    
21. /* =============================================
    
22.    标签通用形状 (所有标签都生效的样式)
    
23.    ============================================ */
    
24. .tab, .tab2, .tab3, .activetab {
    
25.   position: relative;
    
26.   display: inline-block;
    
27.   height: 26px;        /* 标签高度 */
    
28.   line-height: 28px;   /* 文字靠近底部（压底边） */
    
29.   padding: 0px 10px;     /* 文字左右间距 */
    
30.   margin: 0 8px;       /* 标签之间的重叠/间距，负数可以让它们重叠 */
    
31.   font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
    
32.   cursor: default;
    
33.   vertical-align: top; /* 顶部对齐 */
    
34. }
    
35. 
    
36. /* 通用的伪元素设置 (用于显示梯形两侧) */
    
37. .tab:before, .tab:after,
    
38. .tab2:before, .tab2:after,
    
39. .tab3:before, .tab3:after,
    
40. .activetab:before, .activetab:after {
    
41.   content: "";
    
42.   position: absolute;
    
43.   bottom: 0;
    
44.   width: 25px;  /* SVG图片的宽度 */
    
45.   height: 26px; /* 必须与标签高度一致 */
    
46.   pointer-events: none; /* 防止鼠标点到圆角上没反应 */
    
47. }
    
48. 
    
49. /* 左侧圆角位置 */
    
50. .tab:before, .tab2:before, .tab3:before, .activetab:before {
    
51.   left: -21px; /* 根据SVG宽度调整，负值 */
    
52. }
    
53. 
    
54. /* 右侧圆角位置 (镜像翻转) */
    
55. .tab:after, .tab2:after, .tab3:after, .activetab:after {
    
56.   right: -21px;
    
57.   transform: scaleX(-1);
    
58. }
    
59. 
    
60. /* =============================================
    
61.    状态 A: 非当前页 (普通标签)
    
62.    ============================================= */
    
63. .tab, .tab2, .tab3 {
    
64.   /* 非当前页背景色 (稍浅于底色，或灰色) */
    
65.   background-color: #8daabb;
    
66.   color: #FFFFFF; /* 非当前页文字颜色 */
    
67.   z-index: 1;  /* 层级低，被当前页压住 */
    
68. }
    
69. 
    
70. /* 非当前页的梯形 SVG */
    
71. .tab:before, .tab:after,
    
72. .tab2:before, .tab2:after,
    
73. .tab3:before, .tab3:after {
    
74.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%238daabb%22%20d%3D%22M24%200C9%200%2015%2026%200%2026h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
75. }
    
76. 
    
77. /* ==============================================
    
78.    状态 B: 鼠标悬停 (Hover)
    
79.    ============================================= */
    
80. .tab:hover, .tab2:hover, .tab3:hover {
    
81.   /* 悬停时的背景色 (浅蓝色) */
    
82.   background-color: #bfe0f0;
    
83.   color: #000;
    
84.   z-index: 5; /* 悬停时层级提高 */
    
85. }
    
86. 
    
87. /* 悬停时的梯形 SVG */
    
88. .tab:hover:before, .tab:hover:after,
    
89. .tab2:hover:before, .tab2:hover:after,
    
90. .tab3:hover:before, .tab3:hover:after {
    
91.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23bfe0f0%22%20d%3D%22M24%200C9%200%2015%2026%200%2026h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
92. }
    
93. 
    
94. /* =============================================
    
95.    状态 C: 当前页 (Active)
    
96.    ============================================= */
    
97. .activetab {
    
98.   /* 当前页背景色 (白色) */
    
99.   background-color: #ffffff;
    
100.   color: #000; /* 当前页文字颜色 */
     
101.   z-index: 10; /* 层级最高，压在所有标签上面 */
     
102.   font-weight: normal;
     
103. }
     
104. 
     
105. /* 当前页的梯形 SVG */
     
106. .activetab:before, .activetab:after {
     
107.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M24%200C9%200%2015%2026%200%2026h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
     
108. }

复制代码

---

欢迎光临 无忧启动论坛 (http://bbs.wuyou.net/)

Powered by Discuz! X3.3