HTML5中利用“滑动门”技术制作精美导航.pdf
应用研发 多媒体设计
HTML5 中利用 “滑动门”技术制作精美导航
刘宇 / 河源市高级技工学校
摘 要：网页制作是中职学校电子商务、计算机网络应用等专业的必修课程，而网页导航条的制作一直都是网页制作课
程的重点，方法种类繁多、效果各有不同。这里主要探讨和研究利用最新的“滑动门”技术来制作精美的导航条效果，
通过实际的案例为大家抛砖引玉，分析由网页制作在HTML5+CSS3变革下衍生出的新的布局方法在导航条上的具体应用。
关键词：滑动门；HTML5+CSS3；网页制作；导航条；水晶按钮
着互联网技术的发展，这门课程几乎每年都 侧的圆角。nav_hover.png则是当鼠标指针经过菜单项的时
在发生变化。如今，网页制作方法已经由原 候显示出来的。它在这里就充当了滑动门的角色，只要在
随
来的table嵌套式布局完全转向了更加标准的 文字内容两边设置标签作为 “钩子”把它 “挂”起来就可
HTML5+CSS3布局，这使网页制作方法有了翻天覆地的变 以了。这里只使用这一张图像来制作所有导航文字的滑过
化，各种新方法、新技术如雨后春笋般不断涌现。 “滑动 效果，不过有一点要注意，那就是这张图片一定要比所有
门”技术也在此时应运而生，它可以仅仅使用一张图片就 导航文字都要长，不能比任何导航文字短，而且最好要长
完成各种宽度不同的圆角背景显示，自适应文字的宽度。 至少1/3 。
这就大大减少了图像的应用和流量的浪费，加快了网页的
浏览速度。因此， “滑动门”技术成为 目前比较流行的网
页制作方法之一，得到了广泛的应用。
那么，什么是 “滑动门”技术呢？ 图2
当在导航文字中设置鼠标滑过时显示圆角矩形框时， 思路清楚了就可以制作了，由于导航左右各有圆角组
因为每个文字的长度不同，所以传统的方法是给每个导航 成，所以先编写相应的HTML代码。传统的制作方法使用
文字各绘制一个单独长度的圆角矩形，每个导航显示不同 table 的嵌套，可以使用1行5列的表格制作。但是，为了更
的图像。这样做不仅复杂，而且造成图像使用多，访问流 好的适应 “滑动门”技术，这里使用HTML5+CSS3方法来
量增加。因此，技术的更新时必要的，那就是使用 “滑动 做，这样可以更好的精简代码，也是大势所趋。具体代码
门”技术来制作。 如下：
首先分析下滑动门技术的核心原理：在每个导航文字 < nav>
的两边各利用一个标签来设置同一张圆角矩形背景图像，
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
