HTML5+CSS+JavaScript学习布局小导航功能

任何网站如果想看上去美观都要经过专业的网页布局设计，实例按传统的电子商务网站布局方式进行布局，文字样式的美化设计是使用样式表直接设计的，实例的通用样式表保存在global.css文件中，个性化的样式表写在index.css文件里。

导航频道是网站建设中很重要的部分，通常情况下一个网站的页面会有几十个，更大型的可能会达到几千个甚至几万个，每个页面都有导航栏。但是，在网站后期维护或者需要更改的时候，这个工作量会变得很大。为了方便通常把导航栏开发成单独的一个页面，然后让每个页面单独调用它。这样当需要变更的时候只要修改导航栏这一个页面，其他的页面就自动全部更新了。实例创建的最顶部的小导航栏如图7-13所示。

图7-13 小导航功能

制作步骤如下：

（1）在Dreamweaver CC 2015中单击“显示代码视图”按钮，进入代码视图窗口，输入小导航的DIV布局程序。

＜div class="head_box"＞;

在布局过程中的主要技术难点在于对一些层的隐藏设置，即“我的会员中心”“进货单”“收藏夹”等一级菜单显示，而其二级菜单及小功能显示的内容要隐藏，使用“style="display：none；"”命令实现。如果在样式文件或页面文件代码中直接用display：none对元素进行了隐藏，载入页面后，在没有通过JS设置样式使元素显示的前提下使用JS代码无法正确获得该元素的一些属性，例如offSetTop、offSetLeft等，返回的值会为0，通过JS设置style.display使元素显示后才能正确地获得这些值。

（2）在global.css文件中输入该布局的样式控制命令。(www.xing528.com)

在实例中使用到了position：absolute样式，主要用于定位元素位置，那么absolute和relative怎么区分，怎么用呢？大家都知道absolute是绝对定位，relative是相对定位。

absolute，在CSS中的写法是position：absolute，意思是绝对定位，指参照浏览器的左上角配合Top、Right、Bottom、Left（下面简称TRBL）进行定位，在没有设定TRBL时，默认依据父级的坐标原始点为原始点。如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器的左上角为原始点进行定位，位置将由TRBL决定。一般来讲，网页居中用absolute很容易出错，因为网页一直是随着分辨率的大小自动适应的，而absolute则会以浏览器的左上角为原始点，不会因为分辨率的变化而变化位置。很多人出错就出在这点上。而网页居左，其特性与relative很相似，但还是有本质的区别的。

relative，在CSS中的写法是position：relative，意思是绝对相对定位，指参照父级的原始点为原始点，若无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点参照父级内容区的原始点进行定位。

（3）加入CSS样式代码后，就会发现在编辑文档窗口中基本上已经布局到位，但鼠标经过的动作需要使用JavaScript命令具体实现，实现后的效果如图7-14所示。

图7-14 自动生成代码占位符

在common.js文件中输入DIV实现下拉菜单的JS命令：

保存制作的页面，按下＜F12＞;键即可在浏览器中看到制作好的小导航效果。