一. 热区
map 热区,area 点击区域
shape="circle" 圆型,coords="圆心点X,圆心点Y,圆的半径"
shape="rect" 矩形,coords="矩形左上角x,矩形左上角Y,矩形右下角X,矩形右下角Y"
shape="poly" 多边形,coords="第一个点X,第一个点Y,第二个点X,第二个点Y..."
<img src="bigptr.jpg" usemap="#Map" />
<map name="Map">
<area shape="circle" coords="378,132,56" href="http://www.baidu.com">
<area shape="rect" coords="462,157,566,217" href="http://www.qq.com">
<area shape="poly" coords="227,251,186,220,168,221,159,234,147,258,141,283,146,300,153,
315,161,329,171,336,182,343,201,343,219,339,235,324,238,319,236,313,231,301,227,290,224,
280,224,272,224,268,226,261" href="http://www.sina.com.cn">
</map>
二. iframe
iframe元素会创建包含另外一个文档的内联框架(即行内框架)
<iframe src="http://www.baidu.com" width="1200" height="600" frameborder="0" scrolling="no"></iframe>
三. flash和视频的引入
① 引入flash:
<style>
body{ background:#000;}
.box{width:300px;height:300px;background:pink; position:absolute;left:0;top:0;}
</style>
<object>
<param name="wmode" value="transparent"> <!-- flash 透明 -->
<embed src="1.swf" width="400" height="400" wmode="transparent"></embed>
</object>
<div class="box"></div>
② 引入视频:
<embed src="http://player.youku.com/player.php/sid/XNjQ0MDk4MDI0/v.swf" allowFullScreen="true"
quality="high" width="480" height="400" align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash">
</embed>
四. 词内断行和省略号
① 词内断行:
<style>
p{width:200px;border:1px solid #000; font:14px/24px Arial; word-break:break-all;}
</style>
<p>
adsadasdsad asdasdasdasdsadasd asdasdas asdasdasd
11111111111111111111111111111111111111 sadasdasd
asdsadsad asdasdsad
</p>
② 省略号:
<style>
p{width:200px;border:1px solid #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
</style>
<p>
要闻
给志愿者回信:青年有担当国家就有前途 会见拜登 美称对中国新领导集体充满期待
卡梅伦成都吃火锅花877元 遭遇"奇葩"提问 教育部:高考改革将减少科目 探索不分文理科
</p>
五. 未知宽度的img居中
<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>
<body>
<div class="box">
<img src="bigptr.jpg" /><span></span>
</div>
</body>
六. 列表文字溢出问题
<style>
.list{width:302px; margin:0;padding:0; list-style:none;}
li{ height:30px; font-size:12px; line-height:30px;border:1px solid #000; vertical-align:top;}
p{margin:0;float:left;padding-right:50px; position:relative; overflow:hidden;height:30px;}
span{padding-left:10px;width:40px; position:absolute;right:0;top:0;}
</style>
<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>
<li>
<p>
<a href="#">字文字文字文字字文字</a>
<span>文字</span>
</p>
</li>
</ul>
</body>
七. ico小图标
① 生成ico图标: http://www.bitbug.net/
② 加入代码: <link href="xxx.ico" rel="icon" />
分享到:
相关推荐
教程名称:妙味课堂Javascript之XHTML CSS2整站视频教程【12讲】 课程目录: 【】妙味课堂-XHTML CSS2整站视频教程-1 【】妙味课堂-XHTML CSS2整站视频教程-10 【】...
妙味课堂JS视频课后作业-完整详细版,是我自己学习过程中整理的文件,还有leo老师的解法~希望能给学前端的伙伴们提供方便。
妙味课堂——前端HTML+CSS修炼之道--附赠章节源代码 妙味课堂——前端HTML+CSS修炼之道--附赠章节源代码
提供的是妙味课堂的JavaScript视频教程全集下载,百度网盘链接 《初级》 http://pan.baidu.com/s/1hqyEjJ2 《中级》 http://pan.baidu.com/s/1pJ3P8uf 《高级》 http://pan.baidu.com/s/1mgu2msK
880集视频 120G 太给力了 web前端妙味教程课堂开发全套 百度网盘:txt 链接下载
妙味课堂- 播放器,是专门用来播放妙味课程的播放器!
03妙味课堂——javascript彩虹圈效果03妙味课堂——javascript彩虹圈效果
防妙味课堂运动框架,javascript,运动框架,花了2天学习妙味课堂运动框架,一天时间敲代码,调试,辛苦的结晶。一分,对得起我的劳动吧。
教程名称:妙味课堂Javascript特效视频教程 课程目录: 【】01-视频教程版块——360度全景图片 【】02-视频教程版块——QQ幻灯片 【】03-视频教程版块——变量详解(2课...
妙味课堂-视频问题解答-jQuery,源码,方便学习
JavaScript妙味课堂:动画弹性的产品展示效果,其实更像是一个菜单,可以分类的菜单,点击下边的文字分类,上边的图片会慢慢消失然后对应的分类就回来了,带点Flashr动画效果。
1 妙味课堂原创JavaScript视频教程 JS基础教程5课资料
教程名称:妙味课堂Javascript高级进阶视频课程【16讲】 课程目录: 【】8-dom高级1 【】8-dom高级2 【】8-php后台1 【】8-php后台2 【】8-事件高级应用1 ...
01妙味课堂——360度全景展示效果01妙味课堂——360度全景展示效果
2 妙味课堂原创JavaScript视频教程 DOM 2课 BOM课程资料
JavaScript妙味课堂首页的Banner图片切换代码,有着极平滑的图片过渡效果,两幅图片采用淡入、淡出交替,控制按钮可控制播放进度,当然,它自己也会切换的,做的挺不错,不亏是JavaScript脚本的培训课堂。
妙味视频+JavaScript+jquery+html5+css3视频教程(88GB)+项目实战
妙味热身01 课后练习 请为下面的div设置样式,通过点击设置来选择颜色、宽度、高度。
妙味课堂是一家网页教学工作室,他们擅长JS前端技术,本文就是妙味课堂出品的JS模拟Flash动感的图文导航菜单,效果流畅,图文结合的Flash菜单,超不错,分享给大家。
此资源包含妙味课堂老师讲的js课程,非常有用,如果有想提高自己原生js和逻辑思维的小伙伴可以下载这些代码来观看,自己动手编程,进步会很大呢~