提升设计品质的8个布局方案[译]（2）
作者：笨活儿 来源：笨活儿 发布时间：2010-03-18 16:06:00
标签：设计,布局,网页设计,导航
2.标签卡导航元素
本质上标签卡导航和滑门效果是差不多的技巧。它们都能帮你把一大片内容放到一小块区域里。标签卡导航很常见，但也有很多不常见的运用方式。我们这里关注的是在一个页面内部的标签卡，而不是用于在不同页面之间跳转的标签样式主导航。标签卡很明显地将内容划分到不同区块，最终又把他们融合到占地面积很小的一个区块中。
标签卡的样式范例
出众的背景，大的可点击区域，明显的分割
第一个例子来自 Mac Pro网站的“Performance”部分，其标签元素的组织非常值得学习。这些标签卡上的文字都十分易读，可点击区域很大，各标签视觉上的区分也很明显，这正是大部分用户期待的样式啊。你也应该能注意到，当前标签卡上还有着十分微妙的渐变背景，与主内容区块很好地融合在了一起。未激活的标签背景则略暗，主内容区块在其上有微弱的投影，这种做法加强了深度感和立体效果。十分简单而有效的技巧。
按钮区分的简洁标签卡
以下是另一个利用标签卡紧凑地展示信息的实例。根据 Atebits的布局结构，介绍性内容的空间被挤压，不太适合做成多区块样式。所以他们介绍内容的三大部分被组织到了标签中，保持了布局的整洁有序。再一次地，当前标签卡的背景与主内容区融合，不活动标签卡则是较暗的灰色背景。你同样也会发现标签卡之间有着漂亮的分割线，使得每个标签卡看起来都像是独立的按钮。
为整个标签集提供清晰的分割线
Fontcase 的标签卡设计也很精妙，很有现代感。尽管在未激活标签之间没有分割线，当前标签却有明显的边线。你也能注意到，在整个标签集的上方和下方各有一条边线。标签卡使用了图标与留白来突出文字，提高了易用性。
标签卡效果脚本
0
投稿猜你喜欢
- 题目：用 JavaScript 代码实现空位补零，比如 pad(12, 3) => 012实现一：/* 平淡无奇法 */functio
写在前面最近正好有音视频编辑的需求，虽然之前粗略的了解过FFmpeg不过肯定是不够用的，借此重新学习下；基本概念ffmpeg概念Fmpeg的- atan 和 atan2 都是反正切函数，返回的都是弧度对于两点形成的直线，两点分别是 point(x1,y1) 和 point(x2,y2
- 1.建立设计规范的意义 建立设计文档的根本目的
- 本文为大家分享了机器学习10大经典算法，供大家参考，具体内容如下1、C4.5C4.5算法是机器学习算法中的一种分类决策树算法,其核心算法是I
- SQL Server Sa用户相信大家都有一定的理解，下面就为您介绍SQL Server 2000身份验证模式的修改方法及SQL Serve
- 大家好，今天给大家分享一下明哥整理的一篇 Python 参数的内容，内容非常的干，全文通过案例的形式来理解知识点，自认为比网上 80％ 的文
- 在通过scrapy框架进行某些网站数据爬取的时候，往往会碰到页面动态数据加载的情况发生，如果直接使用scrapy对其url发请求，是绝对获取
- 什么是约束作用于表上的规则，限制存储在表中的数据约束分类：约束描述关键字非空约束该字段数据不能为nullNOT NULL唯一约束该字段数据唯
- 1、转化成时间格式seconds =35400m, s = divmod(seconds, 60)h, m = divmod(m, 60)p
- Web开发中，我们经常会遇到分页显示和排序数据记录集的情况，这在服务器端使用服务器端的代码和数据库技术是件很轻松的事情，比如：ASP、PHP
- web跨域请求1.为什么要有跨域限制举个例子：1.用户登录了自己的银行页面 http://mybank.com，http://mybank.
- 我们来学习一下 Python 中的加密模块，加密模块在工作中被广泛应用。比如数据的传入 不希望被捕获，通过把数据加密。这样即使被捕获也无法获
- Example.asp<％@LANGUAGE="VBSCRIPT" CODEPAGE="65001&qu
- 一、逻辑数据库和表的设计数据库的逻辑设计、包括表与表之间的关系是优化关系型数据库性能的核心。一个好的逻辑数据库设计可以为优化数据库和应用程序
- 直接使用model2=model1会出现当更新model2时，model1的权重也会更新，这和自己的初始目的不同。经评论指出可以使用：mod
- 很久以前就知道微软的Petshop的很经典，昨天抽出时间去学习，一开始还真的不适应，什么成员资格，还真的看不太懂，运行petshop想从登陆
- Function closeUBB(strContent) '*************************
- 一. 10句话1.不要依赖register_global=ON的环境，从你刚懂得配置php运行环境甚至尚不明白register_global
- 导言在前面的教程里我们学习了DataList提供了一些风格样式的属性.而且我们还学习了如何定义HeadStyle, ItemStyle, A
