实现一个更精简的Tab
浏览:2300次 出处信息
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
建议继续学习:
- 120个优秀的水平导航设计 (阅读:73607)
- 网站导航设计的6大分类 (阅读:7593)
- 即时通信与浏览器多TAB通信 (阅读:3493)
- 我们来做一个会呼吸的菜单吧!! (阅读:3136)
- jquery实现的回车(Enter)替换为Tab键 (阅读:3127)
- 递归并不一定非得是“自己调用自己的function” (阅读:3066)
- 浏览器多tab打开同一URL串行化的问题 (阅读:2817)
- tabIndent.js让你在Textarea中也能用Tab键 (阅读:2247)
- 关于网站地图 (阅读:2198)
- 用面包屑来简化多层的tabs (阅读:2164)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
文章信息
- 作者:kejun 来源: Kejun's Blog
- 标签: Tab 导航
- 发布时间:2010-06-21 17:29:49
建议继续学习
近3天十大热文
- [12] 逃出你的肖申克(五):看不见的牢笼(上)
- [9] linux 简单架设防火墙路由器
- [9] 关于身份证号的那些事
- [9] [Perl]Moose::Manual::T
- [8] 数据与理论结合,让交互设计更专业
- [8] 位置服务类产品的用户状态和地点管理设想
- [8] 优先为移动设计的理由
- [8] SNS背后的科学(1)从六度分隔到无尺度网络
- [8] iOS的定位原理揭秘
- [8] Nginx带宽控制