董桃利 马占锋

摘要：随着互“联网+”时代的到来，网页前端技术越来越受到大家的青睐。在页面前端技术中，为了使页面整体看上去美观，常常需要给页面菜单设置不规则的背景图，但由于导航的内容随时需要变更，导航背景不能自适应，这样就给页面更改带来了很多麻烦，本文通过典型案例剖析、讲解如何通过滑动门技术来解决这一系列问题。

关键词：前端技术；导航；滑动门技术

中图分类号：TP393 文献标识码：A 文章编号：1007-9416（2018）07-0235-02

随着时代的发展，网页前端技术越来越受到大家的追捧。前端技术不仅是新奇的技术，更重要的是它的一些全新概念，这将给互联网带来更多无限的可能。在页面中导航菜单是每个页面的主题所在，因此每个网站都会把自己的导航菜单做的尽善尽美，然而菜单导航内容与背景不能自适应一直困扰着程序设计者。滑块门技术很好的解决了这一问题，在滑块门技术的使用上学者会遇到这样或者这样的问题。下面笔者将通过由浅入深、理论结合实践，对这门技术进行详细的阐述。

1 工作原理

滑动门技术工作原理：在页面导航中，把整个导航模块设置为一个盒子模型。每一项菜单文字的两边各使用一组容器标签，用来设置不规则背景图像；每一项菜单文字放在一个盒子模型中，背景填充为规则的背景图， 此盒子的宽度由盒子内容文字自动撑开；两边的不规则图像之间的距离就像两扇推拉门一样，受到中间文字长度控制，因此把这一项技术称为“滑动门”技术。……