网络编程
位置:首页>> 网络编程>> 网页设计>> 倾斜的鼠标翻转导航制作上的烦恼

倾斜的鼠标翻转导航制作上的烦恼

作者:小毅 来源:blueidea 发布时间:2007-06-20 16:39:00 

标签:CSS,鼠标,翻转

小毅的blog:http://andymao.com/

前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了。我打开源文件看了一下,发现她根本没有掌握一个鼠标翻转的特性。并且对于倾斜导航的思考也不足。虽然我当时看出来了这些问题,但是由于手上一个项目正在收尾一时也没有时间向她一个讲解。正好昨天工作忙完了,现在又拿起那个文件看了一下,发现通过这个事件可以讲解好多个知识点,有一些地方比较容易让人不太注意,但是确实是非常关键的。下面我们通过制作一个倾斜的鼠标翻转导航为过程来针对不同的地方做出一些提示,希望可以帮助一些对于鼠标翻转导航制作上还存在疑问的朋友。

我们先看一下想要实现的效果,当然在没做之前这些只能是存在于我们的脑子或是草图上。我们首先要想到它是个什么样子,然后才能去分析我们想要实理的效果是应该如何去做,闲言少叙,先看图:

我们看到上图,可以会觉得好像并没什么,好像很容易做。好我们来细细的分析一下这个效果。我们用标准来实现就不能直接插入一张图片在HTML里。用标准来做就需要把图片作为背景的方式用CSS进行调用。那么我们来看一下这样的导航是否可以直接就那么直接调用,其中是不是还有什么问题出现?下面请看一下这个导航效果的放大图:

大家注意上图中的“危险区”很明显,如果我们把两个倾斜的正块放在一起就必然会有一段重复区,我们现在的CSS还不支持异形处理。要解决这个问题就必需要使得这两个方块进行重叠。重叠就需要把他们放在不同的层次上。这就要用到CSS中的定位:“position : static | absolute | fixed | relative ”。关于position的详细请查看苏昱的《CSS2中文手册》,关于如何定位请查看我的《解读absolute与relative》

做鼠标翻转我们通常会把所有的背景做成一个图,然后通过CSS来设置不同标签下的图片的不同位置。也许有人就会认为这个导航 的背景图应该是这样的:

0
投稿

猜你喜欢

  • 下面的asp函数实现了对站点的所有缓存Application的清理,释放!Sub RemoveAllCache()  D
  • 作者:F. Permadi译者:Sheneyan(子乌)英文原文: INTRODUCTION TO JavaScript Functions
  • RegExp对象的语义和使用:检查字符串匹配获取字符串中的部分内容在原字符串的基础上构建一个新的字符串(包括添加、删除和修改)构建一个Reg
  • 我见到有的网站好像可以把数据库的记录读到表格里去,是这样的吗?如何做到的?可能是这样的,因为我们确实能把数据库里的记录用表格来储存,看看下面
  • 最近在做一个魔术网的div+css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性。趁现在还清醒赶紧记下笔记
  • em 和 strong 的区别,可以从三个层次上来谈。首先看 HTML 4.01 中的说明:EM: Indicates emphasis.S
  • 北京时间2月15日据国外媒体报道,美国知名sns网站Facebook全球活跃用户量已突破1.75亿大关。数据显示,全球20%的网民都使用Fa
  • 如果你只使用一个更新日志,你只须清空日志文件,然后移走旧的更新日志文件到一个备份中,然后启用新的更新日志。用下列方法可以强制服务器启用新的更
  • 假如一个页面中的文本采用的都是同样的字体、同样的字号、同样的颜色,做为读者的你能轻易的区分出哪里是标题,哪里是正文内容吗?所以通常情况下,设
  • 特点:1.图片预载入,载入后再显示。意图一次呈现,不会让一块一块下载破坏你的页面,绝佳的用户体验,颠覆传统的浏览器呈现图片的处理方式(需要后
  • 内置300余汉字点阵.纯ASP实现汉字验证码.不读数据库.多种属性自由调节,其中包括:生成的图片长和宽,字符数,背景显示效果(渐变,杂色,固
  •   我想大多数的人在编写ASP程序的时候,都碰到过类似的错误信息:   Error Num
  • 以下是我做美工的两年生活中一条条总结出来的经验,每一点都是我常用的,虽然不是什么大学问,但我觉得要互相学习才能提高,所以现在拿出来和大家一起
  • 最近关心电子商务比较多,阿里系产品目前还是业内标杆,值得学习的对象。前几天Jack Ma对支付宝用户体验的严厉批评,成为业内交流热点,据说原
  • Web 设计离不开调色板,现成的调色板多不胜数,不管是 Windows 标准色板,还是 Web 标准色板,还是 Pantone 色板,它们虽
  • 关于段落<p></p>相信大家已经都在自己的工作中开始关注并应用了。因为那真的是非常简单的事,只要你愿意你随时都可以
  • 用过jQuery的朋友一定对jQuery中方法的链式调用印象深刻,最近发布的YUI3也支持了方法的链式调用。这是一个非常不错的语法特性,能让
  • 网页可以说是网站构成的基本元素。当我们轻点鼠标,在网海中遨游,一幅幅精彩的网页会呈现在我们面前,那么,网页的精彩与否的因素是什么呢?色彩的搭
  • oracle命令删除用户:connect / as sysdba; shutdown abort; startup;&n
手机版 网络编程 asp之家 www.aspxhome.com