其他
简介
1. “其他”是一些零散的知识点,前面实在是没地方塞了,所以小潘潘将其单独归类成一起了。
内容
热区
描述
1. 热区主要用于图像地图,通过该标记可以在图像地图中设定作用区域,一个“热区”可以包含多个“热点”,这样当用户的鼠标移到指定的热区,点击热区中的某个热点时,会自动链接到预先设定好的页面。
制作
简介
1. 我们制作图片热区时可以手动编码,但这样做很难控制热区的坐标,一般开发中我们可以通过开发工具来制作,这里我们选用的是DW。
示范
第一步:编写基本代码并引入图片
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>其他</title> </head> <body> <img src="bigptr.jpg"/> </body> </html> |
效果
第二步:将DW视图切换到设计视图
第三步:勾选出“菜单栏>窗口>属性”面板,再将属性面板拖到底部
第四步:鼠标单击选中图片,使属性菜单发生变化
第五步:绘画热区
第六步:设置热区属性
第七步:按F12打开浏览器点击热点
详解
切换到代码视图,分析上述“示范”热区完成后的代码
图解
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>其他</title> </head> <body> <img src="bigptr.jpg" usemap="#Map"/> <map name="Map"> <area shape="circle" coords="379,127,50" href="http://www.baidu.com" target="_blank"> </map> </body> </html> |
语法
circle(圆形)
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>其他</title> </head> <body> <img src="bigptr.jpg" usemap="#Map"/> <map name="Map"> <area shape="circle" coords="379,127,50" href="http://www.baidu.com" target="_blank"> </map> </body> </html> |
分析
rect(矩形)
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>其他</title> </head> <body> <img src="bigptr.jpg" usemap="#Map"/> <map name="Map"> <area shape="rect" coords="232,125,329,188" href="http://www.qq.com" target="_blank"> </map> </body> </html> |
分析
poly(多边形)
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>其他</title> </head> <body> <img src="bigptr.jpg" usemap="#Map"/> <map name="Map">
<area shape="poly" coords="225,251,182,220,156,234,141,274,161,316, 202,341,237,319,221,283" href="http://www.163.com" target="_blank"> </map> </body> </html> |
分析
一起使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>其他</title> </head> <body> <img src="bigptr.jpg" usemap="#Map"/> <map name="Map"> <area shape="rect" coords="237,125,320,190" href="http://www.hao123.com"> <area shape="circle" coords="379,135,40" href="http://www.biaodian.com" target="_blank"> <area shape="poly" coords="224,254,180,219,143,284,184,344,240,320,223,280" href="#" target="_blank"> </map> </body> </html> |
素材
1. bigptr.jpg
data uri
简介
data uri是什么?
1. DATA-URI 是指可以在Web 页面中包含图片但无需任何额外的HTTP 请求的一类URI。
原理
1. 传统方式是通过一个超链接地址,发起http请求来加载服务器图片的。我们其实知道,对于计算机来说,所有东西都是二进制数据代码表示,那么其实图片也可以用数据代码来表示,我们可以将图片用工具转换成数据代码,用这数据代码表示图片。
在线转换
1. http://tool.c7sky.com/datauri/
优缺点
优点
1. 可以减少http请求。
缺点
1. 无法重复使用
2. 会使文件变大
范例
传统 方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>data uri</title> </head> <body> <img src="sun.jpg"/> </body> </html> |
data uri 方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>data uri</title> </head> <body> <img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNTdBOURBOTUyQUQxMUUzOUM4MEZEMUY2QTk0QTU3RSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNTdBOURBQTUyQUQxMUUzOUM4MEZEMUY2QTk0QTU3RSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkY1N0E5REE3NTJBRDExRTM5QzgwRkQxRjZBOTRBNTdFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkY1N0E5REE4NTJBRDExRTM5QzgwRkQxRjZBOTRBNTdFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4AJkFkb2JlAGTAAAAAAQMAFQQDBgoNAAAFfQAABoEAAAeXAAAIwv/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8IAEQgAFAAcAwERAAIRAQMRAf/EAMQAAAMBAQAAAAAAAAAAAAAAAAUGBwMEAQACAwEAAAAAAAAAAAAAAAAEBgIDBQcQAAAGAgMBAQAAAAAAAAAAAAERAhIDBAATEBQFIiQRAAEDAgMECAcAAAAAAAAAAAIBEQMSEwAhBFFhMhQQMUFxIiMzBZHBQlJDJFQSAAAEAwcEAwEAAAAAAAAAAAABESFBUQIQ8DFhcaESsdHhIoHxMmITAQACAgEDBQEBAQEAAAAAAAERIQAxQfBRYRBxgZHBobHR8f/aAAwDAQACEQMRAAABcuH9hfWHCWMrSGCE7WQu/QUeeLTBP1ze2nAmWMGBM7L6f//aAAgBAQABBQJSlLVF5SH2qqKqNkmuvN15qV5Pmo9WVbMk17Kfc4/P1//aAAgBAgABBQIRPEVAOaEIwcJRrYqCxoC2sSxRHBs4+W//2gAIAQMAAQUCACxVrIpX40DkQ8JoNw1U8JMpmcfTv//aAAgBAgIGPwIGnuXFjKffLHIE7xKXkJAKi6g6Kyf9evS7IjhUpStyOP3PNbGwFXCT6Rs/rZO4/9oACAEDAgY/AgS+pq6yvHcGzdQsQmA5Um2D38qrBFNaWSF5fFj4guU21sy3Uf/aAAgBAQEGPwIjMlIiVyJc1VVxqbQF7rAulItNPDlTJk1SOmafbmu7Gn/YGSeQVKeAU9LYJLt2p2YtVlaqrtP4aup2wEtqOel/KlSoFdGzTEuk1cKDPGJ6o49KNQiJLVSTdSo/czZ4OXltKsHupXoNSI+YLM4u+S5eLeq9B2qrVS2q+KnsdsarlP5z5rh9H6uL5dH5Obubrdtvi74//9oACAEBAwE/IUAOf2BVdrhFJq0qQJFzSgTwDBTjJc/0NAo9nPuaGjwpipz5BkwbBMTJ5xb3U+al1l1wiC7GkmU0MIWbG4z6mhs8KY3GdXlPy7u3p1j0V2jP/9oACAECAwE/IUUtrlJspoRwmynvgnsoGs/4X/RSJnPtpjie8d8jIocCT5MCoIoEgNyjST7MExeoBSIqeKd5K3bL97VO44nzn2Hh/b8vt6e/bxo+7fEZ/9oACAEDAwE/IQEGsaJqoOXKK0+w3hHoGn/R47POcD2TzHae2SM3yKfvEK8SbhUqSdj9sAyctJtu45P8FPSh80anmPGfT+Xt1+16e3Xo4iPmc//aAAwDAQACEQMRAAAQGzoxeN//2gAIAQEDAT8QcA6FAryoVVZXEAX1HLpFRQiauBqamAAQfAiAIinT6ZL7cmK1nXKjQwE0ByhNH8QlIoMODIoAO1uJVcCEgpR6P19k/E/BOqzq46Z+r06K61/TP//aAAgBAgMBPxB+6hVWVW1VtV24CUQChwgWDayZEljFiFIDKmn+Q5BGRF+wgdEdilTExWckJscibCYmS9g4VYRA15rWEx3iKCRKIJoLlVCBJCSvo8iGjZwVSJip1nQ9X8fRddda/pn/2gAIAQMDAT8QAGAIAoA0BwGJijYphmTlPFE0FCWz6gd+YfG9CyQiHHKaDZPctcam82JothhGrRMQ+FMackxBOGpSx8gBMVMhE1DC2WdJOBE5xyhs0cl21NxvOjS37f09P/T7Ol/DP//Z"/> </body> </html> |
相同的效果
iframe (行内框架)
简介
1. 所有浏览器都支持 <iframe> 标签。
2. iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
范例
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>iframe</title> </head> <body> <iframe src="http://www.baidu.com" width="1200" height="800px" frameborder="0" scrolling="no"></iframe> </body> </html> |
分析
效果
flash引入
范例
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>引入flash</title> </head> <body> <object> <!-- 标准做法建议加上object元素,object就表示对象或说媒体东西 --> <embed src="1.swf" width="400px" height="400px"></embed> </object> </body> </html> |
分析
效果
常见问题(兼容性)
问题1
描述
1. flash有默认的白色背景,有时这背景会无法与页面色调融合到一起,会不美观。
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>引入flash</title> </head> <style> body{background:#000;} </style> <body> <object> <!-- 标准做法建议加上object元素,object就表示对象或说媒体东西 --> <embed src="1.swf" width="400px" height="400px"></embed> </object> </body> </html> |
效果
问题2
描述
1. 有时我希望这个flash盖上一个蒙版或其它东西。
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>引入flash</title> </head> <style> body{background:#000;} .box{width:300px;height:300px;background:pink; position:absolute;left:0;top:0;} /* 使用绝对定位将蒙版盖到flash上 */ </style> <body> <object> <!-- 标准做法建议加上object元素,object就表示对象或说媒体东西 --> <embed src="1.swf" width="400px" height="400px"></embed> </object> <div class="box"></div> <!-- 蒙版 --> </body> </html> |
效果
标准浏览器(蒙版盖在了flash上面了)
IE所有版本(蒙版盖在了flash下面了)
解决(两个问题同一个处理)
描述
1. 上面“问题1”与“问题2”其实是同一个处理办法。
2. 使用flash插件
a) flash插件可以将flash背景变为透明的。
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>引入flash</title> </head> <style> body{background:#000;} .box{width:300px;height:300px;background:pink; position:absolute;left:0;top:0;} /* 使用绝对定位将蒙版盖到flash上 */ </style> <body> <object> <!-- 标准做法建议加上object元素,object就表示对象或说媒体东西 --> <param name="wmode" value="transparent"/> <embed src="1.swf" width="400px" height="400px" wmode="transparent"></embed> </object> <div class="box"></div> <!-- 蒙版 --> </body> </html> |
效果
标准浏览器(OK)
IE所有版本(OK)
总结
1. 使用了flash插件后,flash背景透明了,而且蒙版也盖在了flash上了。
引入视频
简介
1. 如果我们用的是html5的话那么引入视频就很简单了,html5中有“video”元素可以简单的实现,html5中的video标签有很多相关的js接口,可以控制视频播放、暂停、声音等等。但这里我们使用传统兼容各大浏览器的方式来实现。
方式一(使用DW自带的视频播放器)
简介
1. DW自带的视频播放器只支持“flv”视频。
示范
第一步:打开“FLV…”窗口
第二步:嵌入代码
1. 设置
2. 生产的代码(不需要仔细研究生成出的代码)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>引入视频</title> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> </head> <body> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1105" height="622" id="FLVPlayer"> <param name="movie" value="FLVPlayer_Progressive.swf" /> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt"> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=11&autoPlay=true&autoRewind=true" /> <param name="swfversion" value="8,0,0,0"> <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 --> <param name="expressinstall" value="Scripts/expressInstall.swf"> <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="1105" height="622"> <!--<![endif]--> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt"> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=11&autoPlay=true&autoRewind=true" /> <param name="swfversion" value="8,0,0,0"> <param name="expressinstall" value="Scripts/expressInstall.swf"> <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 --> <div> <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> <script type="text/javascript"> swfobject.registerObject("FLVPlayer"); </script> </body> </html> |
第三步:效果
方式二(使用第三方)
简介
1. 将视频上传到第三方网站上,然后将地址拿过来。
2. 这里我们上传到优酷上,优酷有完善的代码生成,很方便。
第一步:获取视频代码
找到
复制得到的代码
<embed src="http://player.youku.com/player.php/sid/XMTQwMjQ3Mzg5Mg==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> |
第二步:使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>引入视频</title> </head> <body> <embed src="http://player.youku.com/player.php/sid/XMTQwMjQ3Mzg5Mg==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> </body> </html> |
第三步:效果
词内断行
简介
1. 词内断行是对单词的排版进行自动修正。
问题
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>词内断行</title> <style> p{width:200px;border:1px solid #000;font:14px/24px Arial;} </style> </head> <body> <p> fdisaehfkjshfklsdfkdsfhsldijflk hsdoifhdskjfs7yf8979999998 111111111111111111111111111111111111111111111111111 dsfhdsjkfs dshof1111111111111111111111111111hjo </p> </body> </html> |
效果
解决
word-wrap
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>词内断行</title> <style> p{width:200px;border:1px solid #000;font:14px/24px Arial; word-wrap:break-word;} </style> </head> <body> <p> fdisaehfkjshfklsdfkdsfhsldijflk hsdoifhdskjfs7yf8979999998 111111111111111111111111111111111111111111111111111 dsfhdsjkfs dshof1111111111111111111111111111hjo </p> </body> </html> |
效果
word-break(个人推荐)
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>词内断行</title> <style> p{width:200px;border:1px solid #000;font:14px/24px Arial; word-break:break-all;} </style> </head> <body> <p> fdisaehfkjshfklsdfkdsfhsldijflk hsdoifhdskjfs7yf8979999998 111111111111111111111111111111111111111111111111111 dsfhdsjkfs dshof1111111111111111111111111111hjo </p> </body> </html> |
效果
省略号
简介
1. 文本溢出显示省略号。
准备知识
white-space:nowrap;
介绍
1. 此样式属性表示强制文字不换行。
a) 这与上面学习的“词内断行”相反的。
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>强制不换行</title> <style> p{width:200px;border:1px solid #000; white-space:nowrap;} </style> </head> <body> <p> fdisaehfkjshfklsdfkdsfhsldijflk hsdoifhdskjfs7yf8979999998 111111111111111111111111111111111111111111111111111 dsfhdsjkfs dshof1111111111111111111111111111hjo </p> </body> </html> |
效果
text-overflow
简介
1. 是否显示省略号
2. text-overflow是css3中新增的样式,虽然是新增但没有兼容性问题,它有两个常见属性:
a) clip(默认) :不显示省略号
b) ellipsis :显示省略号
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>强制不换行</title> <style> p{width:200px;border:1px solid #000; /* 宽度必须有,否则不知道到哪算溢出 */ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* 三缺一不可 */ </style> </head> <body> <p> fdisaehfkjshfklsdfkdsfhsldijflk hsdoifhdskjfs7yf8979999998 111111111111111111111111111111111111111111111111111 dsfhdsjkfs dshof1111111111111111111111111111hjo </p> </body> </html> |
效果(OK)
盒模型怪异解析
简介
描述
1. 盒模型怪异解析又叫怪异模式。
2. 正常情况下 可视宽=设置宽(width)+padding+border ,元素内容宽=设置宽,但在html文档没有文档声明时,低版本的IE浏览器 可视宽=设置宽(width),元素内容宽=设置宽-padding-border,这就是怪异模式。
示范
代码(没有文档声明)
<html> <head> <meta charset="utf-8"/> <title>盒模型怪异解析/怪异模式</title> <style> .box{width:200px;height:200px;border:10px solid #000;padding:50px;} .div{height:50px;background:red;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
标准浏览器(正常OK)
IE低版本(怪异模式)
防止怪异模式产生
核心
1. 就是坚持每一个html文档都必须加文档声明,而且必须保证正确。
box-sizing
简介
1. box-sizing是css3新增样式属性,可以通过它的属性值来改变解析模式。
a) 在我看来这是一个鸡肋。
2. box-sizing有两个属性,分别如下:
a) “box-sizing:border-box;”表示用怪异模式来解析此元素。
b) “box-sizing:content-box;”表示用正常模式来解析此元素。
范例
问题
1. 标准浏览器下盒模型怪异解析。
代码
<html> <head> <meta charset="utf-8"/> <title>盒模型怪异解析/怪异模式</title> <style> .box{width:200px;height:200px;border:10px solid #000;padding:50px; box-sizing:border-box;} .div{height:50px;background:red;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
隐藏元素
display:none;
特点
1. 不占用原始位置。
范例
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>隐藏元素</title> <style> div{width:100px;height:100px;border:5px solid #000;background:red;} /* .box1{display:none;} */ </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html> |
效果
不使用“.box1{display:none;}”时
使用样式:“.box1{display:none;}”后
visibility:hidden;
特点
1. 占用原始位置
范例
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>隐藏元素</title> <style> div{width:100px;height:100px;border:5px solid #000;background:red;} /* .box1{visibility:hidden;} */ </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html> |
效果
不使用“.box1{visibility:hidden;}”时
使用“.box1{visibility:hidden;}”后
固定定位
简介
1. 我们前面学习过css提供的固定定位在IE6下不起作用,为了解决这个问题,我们需要通过其他方式来模拟出固定定位。
2. 有的公司其实已经不再考虑垃圾的IE6是否支持,就使用它原生的了。
3. 其实早期为了兼容IE6推荐使用js的方式来模拟固定定位,这里不是js课程也就不讲了。
原生/自带
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>固定定位</title> <style> body{margin:0;} .box{height:2000px;} .div{width:100px;height:100px;background:red; position:fixed;left:100px;top:100px;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
标准浏览器
IE6
模拟
简介
1. 这里只介绍用css方式来模拟固定定位。
方式一
简介
1. 这种方式其实是一个障眼法,用body的滚动条取代文档的滚动条,而本身文档的滚动条被我们隐藏掉,所以当拖动滚动条时,实际上拖动的是body的,所以作为定位父级的文档位置不会发生变化,自然定位元素位置也不会随着拖动滚动条而发生变化,因为它们根本没关系,所以不会影响,这种方式问题会很多,开发中不推荐使用,但用来面试还是挺唬人的。
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>模拟固定定位</title> <style> html{height:100%;overflow:hidden;} body{margin:0;height:100%;overflow:auto;} .box{height:2000px;} .div{width:100px;height:100px;background:red; position:absolute;left:100px;top:100px;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
标准浏览器
IE6
分析
方式二
简介
1. 使用css hack与css表达式来兼容IE6
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>模拟固定定位</title> <style> body{margin:0;} .box{height:2000px;} .div{width:100px;height:100px;background:red; position:fixed;left:100px;top:100px;_position:absolute;_top: /* css hack */ expression(eval(document.documentElement.scrollTop+100))} /* css表达式 */ </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
标准浏览器
IE6
分析
未知宽高的img如何在容器里水平垂直居中
方法一
简介
1. 此方法是借助与另个元素等高来实现的。
2. 此方法特点:简单、没有兼容性问题。
示范
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>PLF未知宽高的img如何在容器里水平垂直居中</title> <style> .box{width:800px;height:600px;border:2px solid #000; text-align:center;} /* 水平方向居中 */ span{display:inline-block;height:100%;vertical-align:middle;} img{vertical-align:middle;} </style> </head> <body> <div class="box"> <img src="bigptr.jpg"/><span></span> </div> </body> </html> |
效果
分析
方法二
简介
1. 使用display:table来实现,但这种样式属性IE6,7下不支持,因为IE6,7下不支持把一个div变成display:table类型,所以还需要结合定位来进一步解决。
示范
过程一
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>未知宽高的img如何在容器里水平垂直居中</title> <style> .box{width:800px;height:600px;border:2px solid #000; display:table;} /* 将box元素模拟成一个表格table */ /* 将span模拟成单元格,那么单元格中的text-align、vertical-align都是可用的 */ span{display:table-cell;text-align:center;vertical-align:middle;} </style> </head> <body> <div class="box"> <span><img src="bigptr.jpg"/></span> </div> </body> </html> |
效果
标准浏览器(OK)
IE6,7(无效)
过程二(进一步兼容IE6,7)
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>未知宽高的img如何在容器里水平垂直居中</title> <style> .box{width:800px;height:600px;border:2px solid #000;display:table; position:relative;/* 定位父级 */ /* 因为下面的img使用了相对定位(不脱离文档流),移动后会留下多余超出box元素的空白位置 */ overflow:hidden;} span{display:table-cell;text-align:center;vertical-align:middle; *position:absolute;left:50%;top:50%;} /* 绝对定位,相对于box */ img{*position:relative;left:-50%;top:-50%; /* 相对定位,相对于span */ vertical-align:top;} /* 去掉img下边的空隙 */ </style> </head> <body> <div class="box"> <span><img src="bigptr.jpg"/></span> <!-- span的宽度被图片撑开 --> </div> </body> </html> |
效果
标准浏览器(OK)
IE6,7(OK)
列表的文字溢出
问题
范例
过程1
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>列表的文字溢出</title> <style> .list{width:302px;margin:0;padding:0;list-style:none;} li{height:30px;font-size:12px;line-height:30px;border:1px solid #000;} a{float:left;} span{float:left;padding-left:10px;width:60px;} </style> </head> <body> <ul class="list"> <li> <a href="#">文字文字文字文字文字文字</a> <span>文字</span> </li> <li> <a href="#">文字文字文字文字文字文字</a> <span>文字</span> </li> <li> <a href="#">文字文字文字文字文字文字</a> <span>文字</span> </li> </ul> </body> </html> |
效果
过程2
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>列表的文字溢出</title> <style> .list{width:302px;margin:0;padding:0;list-style:none;} li{height:30px;font-size:12px;line-height:30px;border:1px solid #000;} a{float:left;} span{float:left;padding-left:10px;width:60px;} </style> </head> <body> <ul class="list"> <li> <a href="#">文字文字文字文字文字文字文字文字文字文字</a> <span>文字</span> </li> <li> <a href="#">文字文字文字文字文字文字</a> <span>文字</span> </li> <li> <a href="#">文字文字文字文字文字文字</a> <span>文字</span> </li> </ul> </body> </html> |
效果
要求
1. 如上面“问题”所述,当列表中内容超出了某个限度时,会将span给挤下去,我们要达到的目的是,当列表中内容超出一定限度时,以省略号显示,并且不会将span给挤下去。
解决
过程1:使用P标签限定出右侧span需要的空间
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>列表的文字溢出</title> <style> .list{width:302px;margin:0;padding:0;list-style:none;} li{height:30px;font-size:12px;line-height:30px;border:1px solid #000;} p{margin:0;float:left;padding-right:50px;} /* 空出span需要占用的宽度10+40 */ a{float:left;} span{float:left;padding-left:10px;width:40px;} </style> </head> <body> <ul class="list"> <li> <p> <a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a> <span>文字</span> </p> </li> </ul> </body> </html> |
效果
过程2:将span绝对定位上去
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>列表的文字溢出</title> <style> .list{width:302px;margin:0;padding:0;list-style:none;} li{height:30px;font-size:12px;line-height:30px;border:1px solid #000;} p{margin:0;float:left;padding-right:50px; /* 空出span需要占用的宽度10+40 */ position:relative;} /* 定位父级 */ /* a{float:left;} */ /* 添加了绝对定位后,a和span标签上的浮动就可以去掉了 */ span{/*float:left;*/padding-left:10px;width:40px; position:absolute;right:0;top:0;} </style> </head> <body> <ul class="list"> <li> <p> <a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a> <span>文字</span> </p> </li> </ul> </body> </html> |
效果
过程3:隐藏列表超出的内容
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>列表的文字溢出</title> <style> .list{width:302px;margin:0;padding:0;list-style:none;} li{height:30px;font-size:12px;line-height:30px;border:1px solid #000; overflow:hidden;} /* 将超出列表的内容给隐藏掉 */ p{margin:0;float:left;padding-right:50px; /* 空出span需要占用的宽度10+40 */ position:relative;} /* 定位父级 */ /* a{float:left;} */ /* 添加了绝对定位后,a和span标签上的浮动就可以去掉了 */ span{/*float:left;*/padding-left:10px;width:40px; position:absolute;right:0;top:0;} </style> </head> <body> <ul class="list"> <li> <p> <a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a> <span>文字</span> </p> </li> <li> <p> <a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a> <span>文字</span> </p> </li> <li> <p> <a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a> <span>文字</span> </p> </li> </ul> </body> </html> |
效果
过程4:兼容IE6,7
问题
描述
1. 在IE6,7下,li本身没有浮动,内容有浮动,li之间会产生间隙。
2. 在IE6,7下,父元素的overflow包不住相对定位,也就是父元素的overflow遇到子元素的相对定位会失效。
效果
1. 将上面“过程3”中的代码拿到IE6,7下运行效果如下:
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>列表的文字溢出</title> <style> .list{width:302px;margin:0;padding:0;list-style:none;} /* li的"height:30px;"不能不加,关系到前面清浮动知识,不多说了,自己去想吧 */ li{height:30px;font-size:12px;line-height:30px;border:1px solid #000; /* overflow:hidden;*/ vertical-align:top;} /* 1. 去掉在IE6,7下,li下面的空隙 */ p{margin:0;float:left;padding-right:50px; /* 空出span需要占用的宽度10+40 */ position:relative; /* 定位父级 */ height:30px;overflow:hidden;} /*2. 直接将overflow拿到底下来即可*/ /* a{float:left;} */ /* 添加了绝对定位后,a和span标签上的浮动就可以去掉了 */ span{/*float:left;*/padding-left:10px;width:40px; position:absolute;right:0;top:0;} </style> </head> <body> <ul class="list"> <li> <p> <a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a> <span>文字</span> </p> </li> <li> <p> <a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a> <span>文字</span> </p> </li> <li> <p> <a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a> <span>文字</span> </p> </li> </ul> </body> </html> |
效果
标准浏览器(OK)
IE6,7(OK)