章倒三角滑动门及ie6的那些常见bug.pptxVIP

BF-TECH Web前端开发工程师就业课程;第1章 倒三角滑动门及IE6的那些常见bug;课程内容; 用图片背景。 用border制作倒三角。 特殊符号◆构造倒三角。;所谓滑动门技术，就是标签像一个滑动门一样，可以根据内容的大小自由滑动。下面通过一个实例来说明其原理。 HTML结构： a href=“”span文字/span/a 使用背景： 网页效果：;滑动门的原理：将图片分为左右两部分，左侧图片很窄，包含于a的background属性中，是固定不变的，而右侧图片要做的尽可能宽一些。嵌套在span中的background属性中，处于右上角，且距离左侧留出左侧图片的宽度，以便左侧图片显示，这样，由于右侧图片足够长，随着文本增长，不会超过其长度，就好像可以随文本长度变化而变化一样。;怎么产生： 当父元素无浮动，其子元素有浮动且有左右方向的外边距且与父元素相邻，此时有可能产生。 解决办法： display：inline；;滤镜解决方法： _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=logo.png); 注意：滤镜的图片路径是以页面为基点，并非以CSS文件。 用js插件解决： !--[if IE 6] script language=javascript