章倒三角滑动门及那些常见_第1页
章倒三角滑动门及那些常见_第2页
章倒三角滑动门及那些常见_第3页
章倒三角滑动门及那些常见_第4页
章倒三角滑动门及那些常见_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

BF-TECHWeb前端开发工程师就业课程

课程三

Web前端设计师之内功修炼-CSS高级及兼容Hack技术

讲师：叮咚第1章倒三角滑动门及IE6的那些常见bug课程内容特殊符号制作倒三角滑动门技术IE6双边距bugIE6中兼容png24背景透明IE的滤镜用图片背景。用border制作倒三角。特殊符号◆构造倒三角。倒三角制作

所谓滑动门技术，就是标签像一个滑动门一样，可以根据内容的大小自由滑动。下面通过一个实例来说明其原理。HTML结构： <ahref=“”><span>文字</span></a>使用背景：

网页效果：滑动门技术

滑动门的原理：将图片分为左右两部分，左侧图片很窄，包含于a的background属性中，是固定不变的，而右侧图片要做的尽可能宽一些。嵌套在span中的background属性中，处于右上角，且距离左侧留出左侧图片的宽度，以便左侧图片显示，这样，由于右侧图片足够长，随着文本增长，不会超过其长度，就好像可以随文本长度变化而变化一样。滑动门技术

怎么产生：

当父元素无浮动，其子元素有浮动且有左右方向的外边距且与父元素相邻，此时有可能产生。解决办法： display：inline；IE6双边距bug

滤镜解决方法：_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="logo.png");注意：滤镜的图片路径是以页面为基点，并非以CSS文件。用js插件解决：<!--[ifIE6]><scriptlanguage="javascript"type="text/javascript"src="js/DD_belatedPNG_0.0.8a-min.js"></script><scripttype="text/javascript"language="javascript">DD_belatedPNG.fix('background,img');</script><![endif]-->IE6中兼容png24背景透明

不透明度：opacity:0.5;filter:alpha(opacity=50);注意：此透明方法会将父元素中所有元素都进行不透明度的变化。不透明度（不影响子元素）：相关代码IE的滤镜

总结三种倒三角优缺点IE6双边距bug怎么产生的？课后作业作业：

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论