结合对于背景控制的探讨，可以尝试继续完成我们前面所制作的导航系统，并在此基础上对于导航进行改进。基于背景的基本控制并结合我们上一章上的布局方法。首先可以简单实现导航后的黑色图案背景。根据布局设计方法，将导航ul标签放入了id为header的div中。实现其包含式结构”css代码.
对于项部区区域定义了了div id为header，基础背景设定。对于包含在header中的#Dav，我们根据CSS布局方法将其放置在header的右下角。实现了项部区域的布局，在最初我们实现的使用图片背景制作的交互式导航中，对于每一个导航项中的标准状态当前状态鼠标交互状态3个状态中，均使用了三张图片，通过CSS中的a:hover进行切，换来实现实际效果。大家应该还记得，在背景定位一节中，我们讨论了实现一张背景在一个标签中采用top及left的距离来实现绝对定位，而我们的标签式导航三张图片是不是也可在通栏用一张图片，而使用绝对定位来实现呢？不妨尝试一下实际编码，先把三张图片合为一张。天津网站建设，天津网站制作，天津做网站，天津网站优化
我们重点放在链接标签的背景设置上，先前的三张图片背景被我们指定为了一张background:url(img/nav.gif);；；当然这不是实现导航图片的核心代码， 重点在于background-position的定义，由于三张图片合为了一张，在有了背景精确定位这项技术之后，我们完全可以通过改变图片在标签中显示的位置来实现图片的切换，因此在#nav li a:hover{}中将背景定位向上位移了，而在#nav li a#current{}中将图片向上位移了52px，实现了同：一张图片，通过其在标签中的不同定位，来达到显示不同图片的效果。
，也许有人会闯了，感觉怪怪的真，真似乎是些不入流的小技巧。大家大可不必怀疑这种用法的优劣。实际上这种通过同一张图来实现状态切换的方法；源自于软件开发领域，软件开中为了便于管理软件界面中的资源（图片、素材等），通用作法是将所有图片做到一张图中，通过代码级的控制，在需要某一张图片时，‘就定位到大图片中的某一个局部，这样作的好处是首先统一节省了图片的文件尺寸，我们的三张图片合为一张，已经消除了约1/3的代码量，再者对于大型项目而言，需要很多图片进行管理，而我们将图片合为张，一个导航就是一个图片，对于管理而言非常方便，可以通一进行修改与整理。图片技巧不仅仅带给我们如此好处，它还代表着一种改变我们网页设计方式的技术，通过CSS的优秀的属性控制，乙、无论是代码级还是资源管理，”都可以换一种思维去学习与思考，真正实现CSS优势最大化。