13.其他知识

其他

简介

1. “其他”是一些零散的知识点，前面实在是没地方塞了，所以小潘潘将其单独归类成一起了。

内容

热区

描述

1. 热区主要用于图像地图，通过该标记可以在图像地图中设定作用区域，一个“热区”可以包含多个“热点”，这样当用户的鼠标移到指定的热区，点击热区中的某个热点时，会自动链接到预先设定好的页面。

制作

简介

1. 我们制作图片热区时可以手动编码，但这样做很难控制热区的坐标，一般开发中我们可以通过开发工具来制作，这里我们选用的是DW。

示范

第一步：编写基本代码并引入图片

代码

效果

 

第二步：将DW视图切换到设计视图

 

第三步：勾选出“菜单栏>窗口>属性”面板，再将属性面板拖到底部

 

第四步：鼠标单击选中图片，使属性菜单发生变化

第五步：绘画热区

 

第六步：设置热区属性

 

第七步：按F12打开浏览器点击热点

 

详解

切换到代码视图，分析上述“示范”热区完成后的代码

图解

 

代码

usemap="#Map"/>                               href="http://www.baidu.com" target="_blank">

 

语法

circle（圆形）

代码

usemap="#Map"/>                    circle" coords="379,127,50"            href="http://www.baidu.com" target="_blank">

分析

 

rect（矩形）

代码

usemap="#Map"/>                    rect" coords="232,125,329,188"            href="http://www.qq.com" target="_blank">

分析

 

poly（多边形）

代码

usemap="#Map"/>                               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">

分析

 

一起使用

usemap="#Map"/>                      rect" coords="237,125,320,190" href="http://www.hao123.com">             circle" coords="379,135,40" href="http://www.biaodian.com" target="_blank">             poly" coords="224,254,180,219,143,284,184,344,240,320,223,280" href="#" target="_blank">

素材

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. 会使文件变大

范例

传统 方式

sun.jpg"/>

data uri 方式

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"/>

相同的效果

 

iframe （行内框架）

简介

1. 所有浏览器都支持

分析

 

效果

 

flash引入

范例

代码

分析

 

效果

 

常见问题（兼容性）

问题1

描述

1. flash有默认的白色背景，有时这背景会无法与页面色调融合到一起，会不美观。

代码

效果

 

问题2

描述

1. 有时我希望这个flash盖上一个蒙版或其它东西。

代码

效果

标准浏览器（蒙版盖在了flash上面了）

 

IE所有版本（蒙版盖在了flash下面了）

 

解决（两个问题同一个处理）

描述

1. 上面“问题1”与“问题2”其实是同一个处理办法。

2. 使用flash插件

a) flash插件可以将flash背景变为透明的。

代码

效果

标准浏览器（OK）

 

IE所有版本（OK）

 

总结

1. 使用了flash插件后，flash背景透明了，而且蒙版也盖在了flash上了。

引入视频

简介

1. 如果我们用的是html5的话那么引入视频就很简单了，html5中有“video”元素可以简单的实现，html5中的video标签有很多相关的js接口，可以控制视频播放、暂停、声音等等。但这里我们使用传统兼容各大浏览器的方式来实现。

方式一（使用DW自带的视频播放器）

简介

1. DW自带的视频播放器只支持“flv”视频。

示范

第一步：打开“FLV…”窗口

 

第二步：嵌入代码

1. 设置

 

2. 生产的代码（不需要仔细研究生成出的代码）

第三步：效果

 

方式二（使用第三方）

简介

1. 将视频上传到第三方网站上，然后将地址拿过来。

2. 这里我们上传到优酷上，优酷有完善的代码生成，很方便。

第一步：获取视频代码

找到

 

复制得到的代码

allowFullScreen="true" quality="high" width="480" height="400" align="middle"         allowScriptAccess="always" type="application/x-shockwave-flash">

第二步：使用

allowFullScreen="true" quality="high" width="480" height="400" align="middle"         allowScriptAccess="always" type="application/x-shockwave-flash">

第三步：效果

 

词内断行

简介

1. 词内断行是对单词的排版进行自动修正。

问题

代码

fdisaehfkjshfklsdfkdsfhsldijflk hsdoifhdskjfs7yf8979999998             111111111111111111111111111111111111111111111111111             dsfhdsjkfs dshof1111111111111111111111111111hjo

效果

 

解决

word-wrap

代码

fdisaehfkjshfklsdfkdsfhsldijflk hsdoifhdskjfs7yf8979999998             111111111111111111111111111111111111111111111111111             dsfhdsjkfs dshof1111111111111111111111111111hjo

效果

 

word-break（个人推荐）

代码

fdisaehfkjshfklsdfkdsfhsldijflk hsdoifhdskjfs7yf8979999998             111111111111111111111111111111111111111111111111111             dsfhdsjkfs dshof1111111111111111111111111111hjo

效果

 

省略号

简介

1. 文本溢出显示省略号。

准备知识

white-space:nowrap;

介绍

1. 此样式属性表示强制文字不换行。

a) 这与上面学习的“词内断行”相反的。

代码

fdisaehfkjshfklsdfkdsfhsldijflk hsdoifhdskjfs7yf8979999998             111111111111111111111111111111111111111111111111111             dsfhdsjkfs dshof1111111111111111111111111111hjo

效果

 

text-overflow

简介

1. 是否显示省略号

2. text-overflow是css3中新增的样式，虽然是新增但没有兼容性问题，它有两个常见属性：

a) clip（默认） ：不显示省略号

b) ellipsis ：显示省略号

代码

fdisaehfkjshfklsdfkdsfhsldijflk hsdoifhdskjfs7yf8979999998             111111111111111111111111111111111111111111111111111             dsfhdsjkfs dshof1111111111111111111111111111hjo

效果（OK）

 

盒模型怪异解析

简介

描述

1. 盒模型怪异解析又叫怪异模式。

2. 正常情况下 可视宽=设置宽（width）+padding+border ，元素内容宽=设置宽，但在html文档没有文档声明时，低版本的IE浏览器 可视宽=设置宽（width），元素内容宽=设置宽-padding-border，这就是怪异模式。

示范

代码（没有文档声明）

效果

标准浏览器（正常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. 标准浏览器下盒模型怪异解析。

代码

效果

 

隐藏元素

display:none;

特点

1. 不占用原始位置。

范例

代码

box1          box2          box3

 

效果

不使用“.box1{display:none;}”时

 

使用样式：“.box1{display:none;}”后

 

visibility:hidden;

特点

1. 占用原始位置

范例

代码

box1          box2          box3

效果

不使用“.box1{visibility:hidden;}”时

 

使用“.box1{visibility:hidden;}”后

 

固定定位

简介

1. 我们前面学习过css提供的固定定位在IE6下不起作用，为了解决这个问题，我们需要通过其他方式来模拟出固定定位。

2. 有的公司其实已经不再考虑垃圾的IE6是否支持，就使用它原生的了。

3. 其实早期为了兼容IE6推荐使用js的方式来模拟固定定位，这里不是js课程也就不讲了。

原生/自带

代码

效果

标准浏览器

 

IE6

 

模拟

简介

1. 这里只介绍用css方式来模拟固定定位。

方式一

简介

1. 这种方式其实是一个障眼法，用body的滚动条取代文档的滚动条，而本身文档的滚动条被我们隐藏掉，所以当拖动滚动条时，实际上拖动的是body的，所以作为定位父级的文档位置不会发生变化，自然定位元素位置也不会随着拖动滚动条而发生变化，因为它们根本没关系，所以不会影响，这种方式问题会很多，开发中不推荐使用，但用来面试还是挺唬人的。 

代码

效果

标准浏览器

 

IE6

 

分析

 

方式二

简介

1. 使用css hack与css表达式来兼容IE6

代码

效果

标准浏览器

 

IE6

 

分析

 

未知宽高的img如何在容器里水平垂直居中

方法一

简介

1. 此方法是借助与另个元素等高来实现的。

2. 此方法特点：简单、没有兼容性问题。

示范

代码

效果

 

分析

 

方法二

简介

1. 使用display:table来实现，但这种样式属性IE6,7下不支持，因为IE6,7下不支持把一个div变成display:table类型，所以还需要结合定位来进一步解决。

示范

过程一

代码

效果

标准浏览器（OK）

 

IE6,7（无效）

 

过程二（进一步兼容IE6,7）  

代码

效果

标准浏览器（OK）

 

IE6,7（OK）

 

列表的文字溢出

问题

范例

过程1

代码

文字文字文字文字文字文字                 文字                                        文字文字文字文字文字文字                 文字                                        文字文字文字文字文字文字                 文字

效果

 

过程2

代码

文字文字文字文字文字文字文字文字文字文字                 文字                                        文字文字文字文字文字文字                 文字                                        文字文字文字文字文字文字                 文字

 

效果

 

要求

1. 如上面“问题”所述，当列表中内容超出了某个限度时，会将span给挤下去，我们要达到的目的是，当列表中内容超出一定限度时，以省略号显示，并且不会将span给挤下去。

解决

过程1：使用P标签限定出右侧span需要的空间

代码

文字文字文字文字文字文字文字文字文字文字文字文字文字文字                     文字

效果

 

过程2：将span绝对定位上去

代码

文字文字文字文字文字文字文字文字文字文字文字文字文字文字                     文字

效果

 

过程3：隐藏列表超出的内容

代码

文字文字文字文字文字文字文字文字文字文字文字文字文字文字                     文字                                                                             文字文字文字文字文字文字文字文字文字文字文字文字文字文字                     文字                                                                             文字文字文字文字文字文字文字文字文字文字文字文字文字文字                     文字

效果

 

过程4：兼容IE6,7

问题

描述

1. 在IE6,7下，li本身没有浮动，内容有浮动，li之间会产生间隙。

2. 在IE6,7下，父元素的overflow包不住相对定位，也就是父元素的overflow遇到子元素的相对定位会失效。

效果

1. 将上面“过程3”中的代码拿到IE6,7下运行效果如下：

 

代码

文字文字文字文字文字文字文字文字文字文字文字文字文字文字                     文字                                                                             文字文字文字文字文字文字文字文字文字文字文字文字文字文字                     文字                                                                             文字文字文字文字文字文字文字文字文字文字文字文字文字文字                     文字

效果

标准浏览器（OK）

 

IE6,7（OK）