




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- Unit 4 Time to celebrate Understanding ideas教学设计 2024-2025学年外研版(2024)七年级英语上册
- 2018春济南版八年级生物下册第七单元第2章同步教学设计:7.2.1基因工程
- 企业创新管理挑战与机遇
- 人力资源管理数字化升级之路
- 中国古代宗教文化研究
- 人工智能在化妆品行业的个性化定制
- 环境保护组织信息技术能力提升方案
- 中医药抗衰老的研究与成果
- 企业国际化经营的策略与挑战
- 儿童康复治疗师的责任与任务
- 建筑施工人员的职业道德培训计划
- 《养成学习习惯》ppt课件完整版
- 年产10万吨聚氯乙烯生产工艺设计毕业设计
- 高中18岁成人仪式主题活动设计
- 《珠穆琅玛峰》课件
- 代码生成器的需求分析报告
- 药学概论(全套课件355P)
- 2023年-2024年电子物证专业考试复习题库(含答案)
- 公司与公司签订劳务合同范本
- 信息资源管理(马费成-第三版)复习重点
- 焊接工艺评定报告PQR115
评论
0/150
提交评论