网页前端滑动门技术剖析

董桃利 马占锋

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

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

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

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

1 工作原理

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

滑动门技术的实现的关键技术就是对图片切片和拼接。切片的实现：切片是为了满足页面版面设计的特殊需求，通常把效果图中需要的部分剪切下来作为网页制作时所需的素材。拼接的实现：定义三个盒子模型，第一个和第三个盒子的宽度和高度设置为对应的图片宽和高，并且分别设为盒子背景为切片所得hd_left和hd_right图片；中间的盒子只设置高度不指定宽度，盒子的宽度会被内容自动撑开，盒子背景设为切片所得hd_middle图片，并且必须设置图片为X轴平铺特效。

2 案例分析

滑动门技术在网页前端技术中用途广泛，下面理论联系实际，结合具体案例对滑动门技术进行详细讲解，以加深学者对滑动门技术的理解和应用能力。

（1）分析效果图。通常在页面导航中，页面导航菜单项分为多个子菜单，每个子菜单项文字长度因需求各不相同，效果图如图1所示。对每一個子菜单项进行分析，会发现每一个子菜单项的结构是类似的，每一项是由左、右两张不规则图片和中间自由扩展长度的图片组成。（2）切片图片。为了满足导航菜单中不同长度菜单项目显示效果一致的这种特殊要求的版面效果，需要把美工设计的菜单项中有用的部分剪切下来用作网页素材，这一过程在网页设计中就是切片。切片中需要注意对图片的特殊需求进行分析。导航美工设计图导航项目原图如图2-1所示。经需求分析，按照需求和切片原则对其进行切片，切片为三张资源素材。切片后得到图片素材nav_left.png、nav_middle.png、nav_right.png。分别如图2-2、图2-3、图2-4所示。（3） 搭建页面结构。在页面中实现导航效果，用的是列表标签

。菜单栏的每一项通过列表项标签
• 实现，将子菜单项两侧的不规则图形分别以标签背景图的形式来实现，中间的图片设这为列表项中标签的背景图，这是导航菜单采用最多的设计方案，核心代码段如图3所示。（4）定义CSS样式。通过使用CSS样式实现菜单自动滑动门特效。在CSS样式中，首先，进行整体页面设置，设置外边距、内边距、列表项清零；其次，设置导航菜单整体宽度、高度、及导航水平居中；第三步，设置盒子模型每一个盒子模型的高，以及设置盒子为左浮动；第四步，设置、、的背景效果特效，核心代码如表1所示。

  3 结语

  本文结合实际案例通过深入浅出理论结合实践的细致讲解，对使用页面前端滑动门技术实现不规则菜单进行了深度阐述，旨在使学习者能够充分掌握这门实了用的技术，能够游刃有余的进行页面前端设计。

  参考文献

  [1]徐平.基于CSS技术的网页导航栏制作[J].无线互联科技，2016，（07）：39-40.

  [2]张琳.浅析HTML5+CSS3在网页设计中的新特性及优势[J].西安文理学院学报（自然科学版），2017，（06）：82-84.

  [3]葛蓝.基于HTML5+CSS3的网页布局[J].数字技术与应用，2017，（10）：92-93.

  [4]李君君.HTML5+CSS3在电子商务网站建设中的优势[J].信息与电脑（理论版），2018，（03）：27-29.

  [5]严伟中.关于HTML5的核心技术研究与应用[J].网络安全技术与应用，2014，（03）：30.