13.其他知识

最新推荐文章于 2024-06-20 18:18:57 发布

无足舞者

最新推荐文章于 2024-06-20 18:18:57 发布

阅读量1.3k

点赞数 1

分类专栏：前端工程师【基础篇】文章标签： DW flash 网页视频 FLV 热区

本文链接：https://blog.csdn.net/u010567918/article/details/79280135

版权

前端工程师【基础篇】专栏收录该内容

14 篇文章 0 订阅

订阅专栏

其他

简介

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

内容

热区

描述

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

制作

简介

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

示范

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

代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<img src="bigptr.jpg"/>

</body>

</html>

效果

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

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

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

第五步：绘画热区

第六步：设置热区属性

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

详解

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

图解

代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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

</head>

<body>

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

</head>

<body>

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

</head>

<body>

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

</head>

<body>

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

</head>

<body>

<img src="sun.jpg"/>

</body>

</html>

data uri 方式

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

相同的效果

iframe （行内框架）

简介

1. 所有浏览器都支持 <iframe> 标签。

2. iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

范例

代码

<!DOCTYPE html>

<html>

<head>

<title>iframe</title>

</head>

<body>

frameborder="0" scrolling="no"></iframe>

</body>

</html>

分析

效果

flash引入

范例

代码

<!DOCTYPE html>

<html>

<head>

<title>引入flash</title>

</head>

<body>

</object>

</body>

</html>

分析

效果

常见问题（兼容性）

问题1

描述

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

代码

<!DOCTYPE html>

<html>

<head>

<title>引入flash</title>

</head>

<style>

body{background:#000;}

</style>

<body>

</object>

</body>

</html>

效果

问题2

描述

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

代码

<!DOCTYPE html>

<html>

<head>

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

<div class="box"></div> 

</body>

</html>

效果

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

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

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

描述

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

2. 使用flash插件

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

代码

<!DOCTYPE html>

<html>

<head>

<title>引入flash</title>

</head>

<style>

body{background:#000;}

.box{width:300px;height:300px;background:pink;

position:absolute;left:0;top:0;} /* 使用绝对定位将蒙版盖到flash上 */

</style>

<body>

<param name="wmode" value="transparent"/>

<embed src="1.swf" width="400px" height="400px"

wmode="transparent"></embed>

</object>

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

</head>

<body>

<div>

<h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>

</div>

</object>

</object>

swfobject.registerObject("FLVPlayer");

</script>

</body>

</html>

第三步：效果

方式二（使用第三方）

简介

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

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

第一步：获取视频代码

找到

复制得到的代码

allowFullScreen="true" quality="high" width="480" height="400" align="middle"

allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

第二步：使用

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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>

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

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

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

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

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

<title>盒模型怪异解析/怪异模式</title>

<style>

.box{width:200px;height:200px;border:10px solid #000;padding:50px;}

.div{height:50px;background:red;}

</style>

</head>

<body>

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

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

</body>

</html>

效果

隐藏元素

display:none;

特点

1. 不占用原始位置。

范例

代码

<!DOCTYPE html>

<html>

<head>

<style>

div{width:100px;height:100px;border:5px solid #000;background:red;}

/* .box1{display:none;} */

</style>

</head>

<body>

</body>

</html>

效果

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

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

visibility:hidden;

特点

1. 占用原始位置

范例

代码

<!DOCTYPE html>

<html>

<head>

<style>

div{width:100px;height:100px;border:5px solid #000;background:red;}

/* .box1{visibility:hidden;} */

</style>

</head>

<body>

</body>

</html>

效果

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

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

固定定位

简介

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

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

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

原生/自带

代码

<!DOCTYPE html>

<html>

<head>

<style>

body{margin:0;}

.box{height:2000px;}

.div{width:100px;height:100px;background:red;

position:fixed;left:100px;top:100px;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

标准浏览器

IE6

模拟

简介

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

方式一

简介

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

代码

<!DOCTYPE html>

<html>

<head>

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

</body>

</html>

效果

标准浏览器

IE6

分析

方式二

简介

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

代码

<!DOCTYPE html>

<html>

<head>

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

</body>

</html>

效果

标准浏览器

IE6

分析

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

方法一

简介

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

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

示范

代码

<!DOCTYPE html>

<html>

<head>

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

<img src="bigptr.jpg"/><span></span>

</div>

</body>

</html>

效果

分析

方法二

简介

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

示范

过程一

代码

<!DOCTYPE html>

<html>

<head>

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

</body>

</html>

效果

标准浏览器（OK）

IE6,7（无效）

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

代码

<!DOCTYPE html>

<html>

<head>

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

<span><img src="bigptr.jpg"/></span> 

</div>

</body>

</html>

效果

标准浏览器（OK）

IE6,7（OK）

列表的文字溢出

问题

范例

过程1

代码

<!DOCTYPE html>

<html>

<head>

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

<li>

<a href="#">文字文字文字文字文字文字</a>

</li>

<li>

<a href="#">文字文字文字文字文字文字</a>

</li>

<li>

<a href="#">文字文字文字文字文字文字</a>

</li>

</ul>

</body>

</html>

效果

过程2

代码

<!DOCTYPE html>

<html>

<head>

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

<li>

<a href="#">文字文字文字文字文字文字文字文字文字文字</a>

</li>

<li>

<a href="#">文字文字文字文字文字文字</a>

</li>

<li>

<a href="#">文字文字文字文字文字文字</a>

</li>

</ul>

</body>

</html>

效果

要求

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

解决

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

代码

<!DOCTYPE html>

<html>

<head>

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

<li>

<p>

<a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a>

</p>

</li>

</ul>

</body>

</html>

效果

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

代码

<!DOCTYPE html>

<html>

<head>

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

<li>

<p>

<a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a>

</p>

</li>

</ul>

</body>

</html>

效果

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

代码

<!DOCTYPE html>

<html>

<head>

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

<li>

<p>

<a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a>

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

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

<li>

<p>

<a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a>

</p>

</li>

<li>

<p>

<a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a>

</p>

</li>

<li>

<p>

<a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a>

</p>

</li>

</ul>

</body>

</html>

效果

标准浏览器（OK）

IE6,7（OK）

无足舞者

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
13.其他知识

其他简介1. “其他”是一些零散的知识点，前面实在是没地方塞了，所以小潘潘将其单独归类成一起了。内容热区描述1. 热区主要用于图像地图，通过该标记可以在图像地图中设定作用区域，一个“热区”可以包含多个“热点”，这样当用户的鼠标移到指定的热区，点击热区中的某个热点时，会自动链接到预先设定好的页面。制作简介1. 我们制作图片热区时可以手动编码，但这样做很难控制热区的
复制链接

扫一扫