在开始的时候有一件事情我们一直说后面再说后面再说，但是后来我忘了……为什么酱紫……
不过现在来讲一点也不晚啊，我们来讲一讲导航里那个奇葩的链接地址的问题，回过头来改一下导航里的链接地址哦……
等等……为什么是改……因为我后面没按着那个写啊……额，我说我写错了你能原谅我吗？算了，我就这么写了，你来咬我呀！
<ul id=“nav-items”>
<li class=“nav-item”><a href=“#”>首页</a></li>
<li class=“nav-item”><a href=“#post”>下载</a></li>
<li class=“nav-item”><a href=“#post-a”>特点</a></li>
<li class=“nav-item”><a href=“#post-b”>关于</a></li>
</ul>
有没有觉得似乎看懂了什么？诶，链接到的好像是我们页面中的的 ID 耶。嗯哼，挺好理解的吧？这个写法叫做锚点，可以链接（用来跳转）到页面的指定元素。事实上他可以用来跳转到指定页面的指定元素。比如写作：<a href="http://coffee.zji.me/index.html#footer"></a>
这个效果大家可以去试试看，我就不截图了，毕竟静态图片也不是很好表示。
然后加点小料，因为老板端着他那杯 82 年的普洱过来说：要动起来，动次打次的节奏啊~~我的滑板鞋……
老板渐行渐远，我的内心却久久无法平复。还没学到 Javascript 啊！怎么做动态？好在我们还有别的办法进行变通。现在我们就来给高大上的二维码部分做一个简单的动态效果。
首先我们分析一下：我要做的是鼠标滑到二维码上二维码放大的效果。那么这个效果中有一个小要点，就是放大前后的图片哪个点的坐标是不变的？这是一个放大的基准点。假设是图片的左上角位置不变，那么放大的时候就是图片向右侧和下方进行延伸（拉伸）效果。当然这个样子的话可能显得比较突兀（毕竟我们现在还没办法做过渡效果），所以我们选择中心点不动，放大时图片向四周延伸的效果，这样视觉的焦点基没变，会觉得舒服一些。
其实 Html 部分我们完全不需要修改，只要在现在的 CSS 文件上做些小手脚就可以了的。
#qrcode {
float: right;
}
#qrcode img {
width: 250px;
height: 250px;
}
这是当前相关的 CSS，因为现在的图片已经很大了，其实我们并不希望他更大，所以我们可以先把他弄的小一点，把放大的空间也预留出来。
#qrcode {
float: right;
}
#qrcode img {
width: 210px;
height: 210px;
padding: 20px;
}
现在图片内容的宽高各缩小了 40px，但是因为加了内补，所以它所占的面积并没有变化，他的中心点也依旧在原来的位置。然后我们给图片加一个 :hover 状态。
#qrcode img:hover {
width: 250px;
height: 250px;
padding: 0;
}
其实就是鼠标滑到上面的时候恢复到以前啊，来仔细看一看，认真想一想，是不是很简单的一件事情？其实就凭一个 hover 就可以做出很多好玩的效果啦~
然后学到这里你的写的怎么样了呢？是不是比我的高大上许多倍？想不想发出来给大家看一看？下节课来教大家如何发布页面到互联网上。
本章代码下载：本章代码
暂无评论内容