仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 807|回复: 9
打印 上一主题 下一主题

[DIV+CSS] 来看看:网站计划Tab标签切换的效果制造

[复制链接]
小妖女 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一个样式规则由一个选择器后跟一个声明块组成,声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
在现在的网页计划中,Tab标签切换的使用已长短常的普遍,基础在每一个网站中都有如许的效果被使用到前台的计划中往,来完成之前没法完成的义务。以是,Tab标签的计划也就成了一个不成小觑的事情流程,在扫瞄一个网站时,看到了他们的Tab标签制造的导航菜单效果,但倒是没有到达该有的效果,反而增添了用户扫瞄的狐疑,该站的Tab标签效果以下图:

那末,经由过程这个最终效果,你能够断定我确当前操纵形态是在哪一个标签下吗?SiteDetails仍是Statistics?明显,功效完成了,但效果失利了。
你能够说是在SiteDetails标签的激活形态,由于,SiteDetails标签的box明显更年夜些,而且其背景色彩恰好跟底部横向条的色彩分歧;你也能够以为以后是在Statistics标签的激活形态,由于乍一看,Statistics标签跟两头的红色距离条是很分歧的;二者皆有大概,那用户就要利诱了,利诱也就招致了毛病的体验,下降了可用性。
Tab标签切换的使用之以是愈来愈普遍,次要是它能够无效地对页面内容举行公道正确的导航,告之用户他以后页面的操纵形态。Tab标签不但感官上给人恬逸易操纵的印象,也完整跟我们一样平常生存中利用的文件夹标签一样,以是更简单让用户承受。
这里分5步复杂地排列出了制造一套完全的Tab标签的全历程
1,将激活形态下的标签跟内容严密接洽
在入手下手提到的谁人效果中,我以后的扫瞄形态是SiteDetails标签内容,可是,因为计划的忽略招致SiteDetails标签跟上面的内容发生了一个红色的间距,从而使其功效发生了歧义,效果也是失容良多。以是,激活形态下的标签必定要跟其对应的内容很好的分离起来。

2,确保其他标签(未处在激活形态的)跟以后标签款式的分歧
要做到这一点其实不难,你能够经由过程修正其他标签款式的色彩、边框、背景等等属性,来到达跟以后标签的分歧,从而,明白地告之用户他以后的操纵形态。你一能够经由过程背景图片的办法对其他标签款式举行伪3D的效果润色,或是加深色彩打造暗影等等,办法多种多样。

3,改动激活形态下标签的字体色彩
改动激活形态下标签的字体色彩,使其效果跟其他标签完整分歧,从而在视觉上发生激烈的反差,云云计划的优点之一就是,可让用户一览无余地看分明,除以后形态以外,还能够举行哪些内容的操纵,便利用户操纵切换。

4,Tab标签链接地区的界线跨度
将全部Tab标签链接地区的宽度和高度全体举行link设置,不要只是对链接文本举行小地区的润色,如许不仅下降了页面的易操纵性,并且在视觉上也是一个很年夜的成绩。以是,在对Tab的anchor锚点举行设置时,只管做到添补全体Tab标签的全体地区,你能够经由过程对CSS款式中的padding属性设置完成。

5,确保每一个页面都有激活形态的标签
当用户第一次进进你的网站或是某个页面时,起首,他们将会注重下网站的Tab标签形态,判别以后的Tab标签是不是和本人查找的内容分歧。特别关于经由过程搜刮引擎进进到网站中某一页面的用户来讲,这个功效特别主要。页面中得当地位的Tab标签,就像一面旌旗,指引和引诱用户正确地举行页面操纵。
以是,在对你的网站计划Tab标签切换的效果时,无妨参考本文为你排列出来的几个复杂的注重事项,把Tab标签的操纵效果计划的更公道。

提高易用性。使用CSS可以结构化HTML,例如:标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。
精灵巫婆 该用户已被删除
沙发
发表于 2015-1-18 05:15:39 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
山那边是海 该用户已被删除
板凳
发表于 2015-1-18 05:15:39 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
海妖 该用户已被删除
地板
发表于 2015-1-25 19:08:20 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
5#
发表于 2015-2-3 19:49:08 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
再见西城 该用户已被删除
6#
发表于 2015-2-9 05:19:17 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
因胸联盟 该用户已被删除
7#
发表于 2015-2-27 04:02:04 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
只想知道 该用户已被删除
8#
发表于 2015-3-8 21:44:37 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
变相怪杰 该用户已被删除
9#
发表于 2015-3-16 19:11:54 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
分手快乐 该用户已被删除
10#
发表于 2015-3-23 03:49:33 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-6 03:15

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表