html+css第九篇 - 爱码网

热区：
<img src="img/login.gif" alt="" border="0" usemap="#Map"/>
<map name="Map" id="Map">
    <area shape="circle" coords="94,96,63" href="http://www.baidu.com" />
    <area shape="poly" coords="46,194,177,194,179,221,174,218,170,222,161,219,160,225,153,226,5,224,5,211,26,203,40,205,44,203,51,203" href="#" />
    <area shape="rect" coords="5,237,87,271" href="#" />
</map>

data uri

优点：减少HTTP请求数；

缺点：无法被重复利用；会使文件变大 
http://dancewithnet.com/lab/2009/data-uri-mhtml/create/1376100722.php

iframe的样式设置问题
<embed></embed>

flash透明<param name="wmode" value="transparent"> wmode="transparent"

词内断行和省略号
text-overflow （clip | ellipsis）

white-space:nowrap

word-break:break-all 和 word-wrap:break-word;

盒模型的怪异模式
box-sizing 盒模型解析模式
Content-box  标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content

css模拟固定定位
expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2));

未知宽高的img居中问题

li的里分为左右两块元素，右边元素一直跟在左侧内容后边并距离左侧元素10px间距，左侧元素宽度由左侧内容撑开。如果左右两侧内容总宽度超出了li宽度，就把左侧多出的文字隐藏掉

热区案例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<base target="_blank" />
</head>
<body>
<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>
<!--
map 热区
area 点击区域    
    shape="circle" 圆型 coords="圆心点X,圆心点Y,圆的半径"
    shape="rect" 矩形 coords="矩形左上角x,矩形左上角Y,矩形右下角X,矩形右下角Y"
    shape="poly" 多边形 coords="第一个点X，第一个点Y，第二个点X，第二个点Y,..."
-->
</body>
</html>

View Code