制作“youarehere”按钮

《制作“youarehere”按钮》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、制作“YouAreHere”按钮>>edu.5151doc.教育资源库“YouAreHere”按钮一般具有不同的外观样式，以使其区别于导航栏中的其它按钮。例如，在“YouAreHere”按钮上，你可以使用与导航栏中其它按钮的文本及背景颜色相反的颜色，或者使用比其它按钮的阴影更淡的阴影。最近我读了一篇文章，这篇文章使我重新考虑了我一直在用的制作“YouAreHere”按钮的方法。结果是我现在有两个可行的方法可供选择，在给定的情况下我可以选择使用其中比较容易的那个方法来实现这种按钮。下面让我们来对比一下这两种方法，看看你应该在什么时候使用哪种方法。背景：我们想要做什么

2、“YouAreHere”按钮是我使用的一个术语，表示一个指向当前页面的按钮或者链接，并且这个按钮或链接表现为不同的样式以帮助访问者确定他们目前在btrail”中的一个链接，或者任何指向当前页面的链接。“YouAreHere”按钮一般具有不同的外观样式，以使其区别于导航栏中的其它按钮。例如，在“YouAreHere”按钮上，你可以使用与导航栏中其它按钮的文本及背景颜色相反的颜色，或者使用比其它按钮的阴影更淡的阴影。为了避免迷惑站点访问者，“YouAreHere”按钮应该不能表现为可点击的链接，因为它并不会把访问者带到另外一个页面中。换句话说，“YouAreHere”

3、不应该有滚翻效果，并且在把光标放到“YouAreHere”按钮上时光标不应该变成小手的形状。方法一：忽略链接可能最简单的实现“YouAreHere”按钮的方法是赋给包含“YouAreHere”按钮文本的＜div＞或＜li＞一个class或ID，然后创建一个样式将适当的格式应用到那个class或ID上。由class或ID负责“YouAreHere”控制按钮的外观。为了保证“YouAreHere”不是可点击的链接，可以移除为那个按钮定义链接的＜a＞标签。例如，下面是一个我几个月前所写的“YouAreHere”按钮示例的标记（markup）。图A给出了代码的实际运行效果

4、。＜divid="menu"＞＜ul＞＜li＞＜ahref="Link1-T1.html"＞Button1＜/a＞＜/li＞＜liclass="youarehere"＞Button2＜/li＞＜li＞＜ahref="Link3-T1.html"＞Button3＜/a＞＜/li＞＜/ul＞＜/div＞下面是使前面的代码能够产生期望的效果所用的CSS代码。div#menu{height:auto;enuli{height:40px;argin:10px;font-family:Arial,Helvetica,sans-serif;font-size:small;tex

5、t-align:center;line-height:250%;list-style-type:none;background-color:#003399;border:1pxsolid#000000;}#menulia{display:block;enulia:link,#menulia:visited{font-al;color:#FFFFFF;}#menulia:hover{font-enuli.youarehere{color:#000099;background-color:#66CCFF;}注意，.youarehere类（class）被应用到标记中的＜

6、li＞标签，而且“YouAreHere”按钮（button2）没有包含定义超链接的＜a＞标签。结果是虽然它具有按钮的外形，但是却不是一个可点击的链接。相反，它只是当前页面中导航按钮栏中的一个摆设。CSS代码中的#menuli.youarehere样式定义“YouAreHere”按钮的文本及背景颜色。按钮尺寸、边框以及其它格式都来自于#menuli样式。对于基于无序列表的导航栏，以及具有标签而又不是＜a＞标签的类似情况，这种方法效果相当好。方法二：控制链接（以及光标）的样式有时候更改标记以及从“YouAreHere”按钮中移除＜a＞标签并不是很方便。例如，导航按钮的

7、标签可能是动态生成的；或者可能是包含在服务器端的include文件中的，而并没有直接包含在它将要呈现给浏览器的页面中。在这种情况下，从一个按钮中移除＜a＞标签以及控制其＜li＞的样式就显得不大实际。相应的，你需要通过控制选定按钮的＜a＞标签的样式来创建“YouAreHere”效果。一般情况下，这种效果是可以通过为每个按钮分配一个唯一的ID12下一页[这篇文章来自..，]，然后使用基于ID的选择器（selector）控制当前页面的“YouAreHere”按钮的样式来实现。定义“YouAreHere”按钮的样式可以嵌在文档头中，也可以存储在页面指定的样式级联表中，以使

8、它只对一个