妙味课堂

实际上，我们的超链接，又叫做锚点，也就是这个东东：

<a href=”http://www.miaov.com”>妙味课堂</a>，

无论你管它叫超链接，或者是锚点，它们只是叫法上的不同。

锚点内的 href 除了可以链接其他页面以外，还能指向当前页面的其他地方，

比如：>>到页面底端

实现 锚点 的代码是：

<a href=”#to_bottom”>到页面底端</a>

<h3 id=”to_bottom”>这里是页面最底端</h3>

a 标签里设置的 #to_bottom 就是目的地（id）的名字；

h3 标签里的 id 名就是最终的目的地咯～··

id 名可以放置在任何的标签内，所以你可以把锚点设置在页面的任意地方。

…………延伸出一个小例子…………

根据锚点的原理，我们来做一个例子，先看效果：

>>点击查看

>>下载源代码

效果：点击右侧小图片，切换左侧相对应的大图片。

原理：

把三张大图片全部放到 id 名为“#pic”盒子里，但限制盒子的大小，只允许盒子一次性显示一张图片，所以给盒子 overflow: hidden; 样式，其余的二张大图片则“隐藏”在第一张大图片的下面。

当点击右侧相应的小图片时，分别给这三个小图片设置“目的地”（id）名称，让它们一一对应大图片的名字（id），这样就制作了一个简单的图片切换效果。

同样的原理还可以制作一些其他的效果，比如：按钮背景的切换等等，这就看每个人的想象力如何发挥了。 

这里是文章最底端！    >>返回顶部