技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 信息和交互 --> 实现一个更精简的Tab

实现一个更精简的Tab

浏览:2393次  出处信息

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. 120个优秀的水平导航设计    (阅读:73808)
  2. 网站导航设计的6大分类    (阅读:7837)
  3. 即时通信与浏览器多TAB通信    (阅读:3537)
  4. 我们来做一个会呼吸的菜单吧!!    (阅读:3244)
  5. jquery实现的回车(Enter)替换为Tab键    (阅读:3146)
  6. 递归并不一定非得是“自己调用自己的function”    (阅读:3166)
  7. 浏览器多tab打开同一URL串行化的问题    (阅读:2913)
  8. tabIndent.js让你在Textarea中也能用Tab键    (阅读:2290)
  9. 关于网站地图    (阅读:2383)
  10. 用面包屑来简化多层的tabs    (阅读:2349)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:设计上的小细节
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1