滑动门与css精灵综合应用.docVIP

某某学院 软件开发专业 PAGE PAGE 2 Web前端开发实训案例二 滑动门与css精灵综合应用 要求 实现nav.png效果图的导航菜单，鼠标移入各按钮时出现高亮渐变背景，保证按钮的宽度自适应，应用到网络时性能较高。 案例背景 宽或高自适应的渐变色圆角有较好的体验效果，项目中经常会遇到。然而从页面性能及兼容性方面考虑，于开发者而言则存在一些另人头疼的问题，比如开发效率等。仅仅使用Css3圆角属性border-radius无法做到全兼容、一定尺寸的背景图在内容宽度超出预期后就不再适用了。通过本案例演示滑动门及css精灵知识点的应用，虽然开始会很慢，但咱们相信熟能生巧，悟透本例，一切的自适应圆角效果都能攻破。 预备知识 ps切图、修图、测量的基本技能 html元素盒模型的理解 html元素的嵌套规范 浮动与清浮动的应用 内联元素与块元素的转化 滑动门实现过程 Css精灵的使用原理 实现过程 结构分析 效果图中按钮的宽度是随着内容的多少自适应的，要解决圆角的兼容性问题，因此把整个圆角按钮分成左角、右角和中间平铺共三部分，然后利用背景图像的可层叠性，允许他们在彼此之上进行滑动达到宽度自适应的效果。 圆角之后还有导航区域默认的背景，是全屏的效果，那么总的背景图应该是四张。由此得到下面的html结构。 布局思路分析 （1）自适应宽度的圆角效果实现过程解析 内容两侧展现圆角效果，中间部位平铺的背景应该放在按钮的最外层li标签上。a标签和span标签上分别设置各自圆角背景，从而能够层叠在最上面，接着设置两个圆角显示在按钮本身的左右两侧就能达到预期效果，注意实现的标签结构为三层嵌套。 （2）性能优化的思路分析 单个按钮由左右角和中间平铺的图标三部分构成，通过Ps拼接组合成一张icon图标，此为css精灵。体现模块化的同时也降低了访问过程中http请求资源的次数，从而起到优化的效果，不过咱们都意识到实现的过程变得繁琐了。下面所示为重置默认样式及清浮动以外的样式表。 此处给导航的第一个li加了active类名，做出了当前默认选中状态的按钮效果。 （3）扩展与小结 宽度自适应的按钮制作过程也可以应用到网页的模块上，或者按需求变通一下做成高度自适应的效果，模块中一般用三个div元素嵌套来达到目的，具体的模块内容则在三层嵌套内部来完善。 请实现上图中圆角矩形宽度自适/高度自适应的布局 应用css精灵时，通常宽度自适应的效果图片应该竖着拼接，而高度自适应的情况下则让图片水平拼接，究其原因可以自己尝试。 项目实训案例评分标准 按要求完成实训效果 掌握滑动门及其css精灵的应用技巧 自己实现扩展中的需求 通过本例总结滑动门及css精灵使用中存在的一些优缺点