滑动门技术在自适应宽度导航条中的应用

许炜熔

【摘要】当前在中等职业教育中，网页设计课程已成为信息专业学生专业课程中重要的一部分。然而，学生的网页制作技能掌握程度和网页设计作品却不容乐观。究其原因有生源自身综合素质的影响因素，更有学校专业课堂教学的不足、专业课程设置的影响。因此，提高学生的综合素质和优化课程、钻研专业课程也应成为学校专业教学中的重要组成部分。

【关键词】网页 滑动门技术 综合素质 中职 信息专业

【中图分类号】TP393.092-4；G642 【文献标识码】A 【文章编号】2095-3089（2017）04-0251-01

目前，在网页布局方面多数采用CSS+DIV的布局方式，使用CSS层叠式样式表来实现页面的外观。CSS+DIV代替了传统的用表格布局，因为它在网页布局中具有了更多的优势，如修改设计更高效，降低流量成本，更好的被收录在搜索引擎中，使页面加载速度更快，最重要的是对浏览器更具亲和力。除此之外，CSS+DIV还可以做出很多其他意想不到的效果，给开发人员和设计师更大的设计制作空间。比如，CSS+DIV网页制作中有一种著名的技术叫滑动门技术，就是DIV标签像滑动门一样，可以根据内容的多少在另一个DIV标签上滑动，就像一扇滑动门，可以将一部分展现或隐藏起来。这种技术应用在很多方面，典型的有图片阴影制作和自适应宽度导航条上。现在很多网站都使用了美观大方的导航条，比如带有背景图案的圆角导航條，但有些导航条中的每个导航项并不是等宽的，这样就不能用一张圆角图片做所有导航项的背景了。但使用滑动门技术就能实现：当导航项中的文字增多时，圆角图片就能够自动伸展（当然不是通过对图片进行拉伸实现的），这样就能用一张很宽的圆角图片给所有导航项做背景了。滑动门技术的主角就是被点击的操作对象，它的CSS属性是指这个导航条上的按钮以及在按钮上的元素属性发生变化，属性主要是指这个元素的背景、字体颜色、大小、粗细、边框、以及padding内间距和margin外间距等等。

1、滑动门的原理：把背景图片分成左右两部分，左边图片窄一点，放在a标签的background背景标签中，固定不变。而右边图片要根据内容估计做的尽量长一些，包含在b标签中的background中，放在标签的右上角，在左边留出左边图片的宽度，以便显示出左边图片。这样，因为右边图片比较宽，随着导航文字的增加，向右移动，不会超出右边图片的长度，那就好像导航背景图片可以随着文字多少而变化一样。

2、具体的操作：a元素的盒子放圆角图片的左边部分，这可以通过设置盒子宽度比圆角图片窄，让圆角图片作为背景从左边开始平铺盒子。b元素盒子放圆角图片的右边部分，由于盒子宽度小于圆角图片宽，让圆角图片作为背景从右边开始平铺盒子。再把b元素插入到a元素中，这时a元素的盒子为了容纳b的盒子会被撑大，这样里面盒子的背景就位于外面盒子背景的上方，通过设置a元素的左填充值使b的盒子不会挡住a盒子左边的圆角，而b盒子右边的圆角则挡住了a盒子右边的背景，这样左右两边的圆角就都出现了。同时，导航中文本数量的多少，可以让导航条自动伸展以适应文字的多少，而圆角图片位于DIV框的填充属性中，不会受到影响。

3、需要注意点：如果导航文字多少的增长，超过了以上所显示的图片的长度，归因于文字大小及字体的改变，会拉伸图像，产生图片间不漂亮的间隙。所以在制作之前我们要预测这种可拉伸的量有多长。如果在制作时改变字体的多少，图片又会怎么增长呢？事实上，我们必须至少要预计到字体增长到百分之三百的情况，图片要能适应这种字体的增长。

4、知识点拓展：滑动门技术不仅可以应用在自适应宽度导航条上，还可以制作三维立体的阴影样式、有角的边沿部分和具备特色的左侧部分。也可以发挥想像力改变左右两幅图形的位置，用这种巧妙的图形控制方法和细致周到的布局方式，去掉导航条按钮的下边框，以便让标签图形可以更好地去适应背景图像。假如浏览器能够支持不同样式表之间的切换，那就可以依靠这个技术在不同版本的导航条之间进行自由地切换。

滑动门技术实际上是一种背景图片的高级运用技巧，主要是通过两个盒子背景的重叠和控制背景图片的定位来实现的。使用CSS+DIV网页设计的滑动门技术还可以完成许多其他效果，比如改变鼠标悬停的文本色彩、制作图像阴影等，所以不断地研究，就可以不断地创造奇迹。

在CSS+DIV网页布局设置中，除了滑动门技术，还可以制作出很多功能很强大的导航条，比如利用相对定位和绝对定位制作的缺角的导航条，利用项目列表制作的具有动态立体感的变色导航条等等。我们中职学生对于程序代码普遍有畏难情绪，所以我们教师要抓住课堂教学时间，好好引导，用心钻研，从滑动门技术来控制导航条的宽度就可以看到代码的强大，所以在CSS+DIV的网页设计中会找到代码操控网页的乐趣。