IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

实现一个更精简的Tab

Kejun's Blog 2010-06-21 17:29:49 累计浏览 3,410 次
本机暂存

tab形式的导航是最常见的一种UI。看看下面这个例子:

原图已失效
细节:
1. 分选中/非选中状态
2. 每项是叠在前面下面的效果,左边有个阴影,但第一项没有
3.所有按钮宽度适应文字可变
4. 最后还有一个阴影
5. 底部有条灰线100%宽

HTML结构:

完全是从信息结构出发设计。可见,UI无论多复杂,HTML结构也可以独立出去。

具体实现: http://hikejun.com/demo/css/css_simple_tab.html

CSS实现用到块级格式上下文(Block Formatting Contexts,这篇文章值得好好看看)。
其实,如果用过开心网的话就会对这个Tab很眼熟,但他们写的不够好,可以做为对比的反例。

--------------(补充)----------------------------------

同样的HTML结构。利用CSS3实现无图版:
http://hikejun.com/demo/css/css_simple_tab_nopics.html

同分类推荐文章

  1. 新特性速递:focus()行为新增focusVisible控制 (2026-05-29 16:23:06)
  2. Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()` (2026-05-28 21:00:00)
  3. Revealing Text With CSS letter-spacing (2026-05-27 20:37:33)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,265)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,363)
  3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,268)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,805)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,764)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,687)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,245)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,145)
  9. 什么是全栈工程师? (累计阅读 13,946)
  10. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,907)