随笔-50  评论-74  文章-9  trackbacks-0
  2007年9月29日

tcp_syn_retriesINTEGER
默认值是5

对于一个新建连接,内核要发送多少个 SYN 连接请求才决定放弃。不应该大于255,默认值是5,对应于180秒左右时间。(对于大负载而物理通信良好的网络而言,这个值偏高,可修改为2.这个值仅仅是针对对外的连接,对进来的连接,是由tcp_retries1 决定的)

tcp_synack_retriesINTEGER
默认值是5

对于远端的连接请求SYN,内核会发送SYN + ACK数据报,以确认收到上一个 SYN连接请求包。这是所谓的三次握手( threeway handshake)机制的第二个步骤。这里决定内核在放弃连接之前所送出的 SYN+ACK 数目。不应该大于255,默认值是5,对应于180秒左右时间。(可以根据上面的tcp_syn_retries来决定这个值)

tcp_keepalive_timeINTEGER
默认值是7200(2小时)
当keepalive打开的情况下,TCP发送keepalive消息的频率。(由于目前网络攻击等因素,造成了利用这个进行的攻击很频繁,曾经也有cu的朋友提到过,说如果2边建立了连接,然后不发送任何数据或者rst/fin消息,那么持续的时间是不是就是2小时,空连接攻击?tcp_keepalive_time就是预防此情形的.我个人在做nat服务的时候的修改值为1800秒)

tcp_keepalive_probes:INTEGER
默认值是9

TCP发送keepalive探测以确定该连接已经断开的次数。(注意:保持连接仅在SO_KEEPALIVE套接字选项被打开是才发送.次数默认不需要修改,当然根据情形也可以适当地缩短此值.设置为5比较合适)

tcp_keepalive_intvlINTEGER
默认值为75
探测消息发送的频率,乘以tcp_keepalive_probes就得到对于从开始探测以来没有响应的连接杀除的时间。默认值为75秒,也就是没有活动的连接将在大约11分钟以后将被丢弃。(对于普通应用来说,这个值有一些偏大,可以根据需要改小.特别是web类服务器需要改小该值,15是个比较合适的值)

tcp_retries1INTEGER
默认值是3
放弃回应一个TCP连接请求前﹐需要进行多少次重试。RFC 规定最低的数值是3﹐这也是默认值﹐根据RTO的值大约在3秒 - 8分钟之间。(注意:这个值同时还决定进入的syn连接)

tcp_retries2INTEGER
默认值为15
在丢弃激活(已建立通讯状况)的TCP连接之前﹐需要进行多少次重试。默认值为15,根据RTO的值来决定,相当于13-30分钟(RFC1122规定,必须大于100秒).(这个值根据目前的网络设置,可以适当地改小,我的网络内修改为了5)

tcp_orphan_retriesINTEGER
默认值是7
在近端丢弃TCP连接之前﹐要进行多少次重试。默认值是7个﹐相当于 50秒 - 16分钟﹐视 RTO 而定。如果您的系统是负载很大的web服务器﹐那么也许需要降低该值﹐这类 sockets 可能会耗费大量的资源。另外参的考 tcp_max_orphans(事实上做NAT的时候,降低该值也是好处显著的,我本人的网络环境中降低该值为3)

tcp_fin_timeoutINTEGER
默认值是 60
对于本端断开的socket连接,TCP保持在FIN-WAIT-2状态的时间。对方可能会断开连接或一直不结束连接或不可预料的进程死亡。默认值为 60 秒。过去在2.2版本的内核中是 180 秒。您可以设置该值﹐但需要注意﹐如果您的机器为负载很重的web服务器﹐您可能要冒内存被大量无效数据报填满的风险﹐FIN-WAIT-2 sockets 的危险性低于 FIN-WAIT-1 ﹐因为它们最多只吃 1.5K 的内存﹐但是它们存在时间更长。另外参考 tcp_max_orphans(事实上做NAT的时候,降低该值也是好处显著的,我本人的网络环境中降低该值为30)

tcp_max_tw_bucketsINTEGER
默认值是180000
系统在同时所处理的最大 timewait sockets 数目。如果超过此数的话﹐time-wait socket 会被立即砍除并且显示警告信息。之所以要设定这个限制﹐纯粹为了抵御那些简单的 DoS 攻击﹐千万不要人为的降低这个限制﹐不过﹐如果网络条件需要比默认值更多﹐则可以提高它(或许还要增加内存)。(事实上做NAT的时候最好可以适当地增加该值)

tcp_tw_recycleBOOLEAN
默认值是0
打开快速 TIME-WAIT sockets 回收。除非得到技术专家的建议或要求﹐请不要随意修改这个值。(做NAT的时候,建议打开它)


tcp_tw_reuseBOOLEAN
默认值是0
该文件表示是否允许重新应用处于TIME-WAIT状态的socket用于新的TCP连接(这个对快速重启动某些服务,而启动后提示端口已经被使用的情形非常有帮助)

tcp_max_orphansINTEGER
缺省值是8192
系统所能处理不属于任何进程的TCP sockets最大数量。假如超过这个数量﹐那么不属于任何进程的连接会被立即reset,并同时显示警告信息。之所以要设定这个限制﹐纯粹为了抵御那些简单的 DoS 攻击﹐千万不要依赖这个或是人为的降低这个限制(这个值Redhat AS版本中设置为32768,但是很多防火墙修改的时候,建议该值修改为2000)

tcp_abort_on_overflowBOOLEAN
缺省值是0
当守护进程太忙而不能接受新的连接,就象对方发送reset消息,默认值是false。这意味着当溢出的原因是因为一个偶然的猝发,那么连接将恢复状态。只有在你确信守护进程真的不能完成连接请求时才打开该选项,该选项会影响客户的使用。(对待已经满载的sendmail,apache这类服务的时候,这个可以很快让客户端终止连接,可以给予服务程序处理已有连接的缓冲机会,所以很多防火墙上推荐打开它)

tcp_syncookiesBOOLEAN
默认值是0
只有在内核编译时选择了CONFIG_SYNCOOKIES时才会发生作用。当出现syn等候队列出现溢出时象对方发送syncookies。目的是为了防止syn flood攻击。
注意:该选项千万不能用于那些没有收到攻击的高负载服务器,如果在日志中出现synflood消息,但是调查发现没有收到synflood攻击,而是合法用户的连接负载过高的原因,你应该调整其它参数来提高服务器性能。参考:
tcp_max_syn_backlog
tcp_synack_retries
tcp_abort_on_overflow
syncookie严重的违背TCP协议,不允许使用TCP扩展,可能对某些服务导致严重的性能影响(如SMTP转发)。(注意,该实现与BSD上面使用的tcp proxy一样,是违反了RFC中关于tcp连接的三次握手实现的,但是对于防御syn-flood的确很有用.)

tcp_stdurgBOOLEAN
默认值为0
使用 TCP urg pointer 字段中的主机请求解释功能。大部份的主机都使用老旧的 BSD解释,因此如果您在 Linux 打开它﹐或会导致不能和它们正确沟通。


tcp_max_syn_backlogINTEGER
对于那些依然还未获得客户端确认的连接请求﹐需要保存在队列中最大数目。对于超过 128Mb 内存的系统﹐默认值是 1024 ﹐低于 128Mb 的则为 128。如果服务器经常出现过载﹐可以尝试增加这个数字。警告﹗假如您将此值设为大于 1024﹐最好修改 include/net/tcp.h 里面的 TCP_SYNQ_HSIZE ﹐以保持 TCP_SYNQ_HSIZE*16<=tcp_max_syn_backlog ﹐并且编进核心之内。(SYN Flood攻击利用TCP协议散布握手的缺陷,伪造虚假源IP地址发送大量TCP-SYN半打开连接到目标系统,最终导致目标系统Socket队列资源耗尽而无法接受新的连接。为了应付这种攻击,现代Unix系统中普遍采用多连接队列处理的方式来缓冲(而不是解决)这种攻击,是用一个基本队列处理正常的完全连接应用(Connect()和Accept() ),是用另一个队列单独存放半打开连接。这种双队列处理方式和其他一些系统内核措施(例如Syn-Cookies/Caches)联合应用时,能够比较有效的缓解小规模的SYN Flood攻击(事实证明<1000p/s)加大SYN队列长度可以容纳更多等待连接的网络连接数,所以对Server来说可以考虑增大该值.)

tcp_window_scalingINTEGER
缺省值为1

该文件表示设置tcp/ip会话的滑动窗口大小是否可变。参数值为布尔值,为1时表示可变,为0时表示不可变。tcp/ip通常使用的窗口最大可达到 65535 字节,对于高速网络,该值可能太小,这时候如果启用了该功能,可以使tcp/ip滑动窗口大小增大数个数量级,从而提高数据传输的能力(RFC 1323)。(对普通地百M网络而言,关闭会降低开销,所以如果不是高速网络,可以考虑设置为0

tcp_timestampsBOOLEAN
缺省值为1
Timestamps 用在其它一些东西中﹐可以防范那些伪造的 sequence 号码。一条1G的宽带线路或许会重遇到带 out-of-line数值的旧sequence 号码(假如它是由于上次产生的)。Timestamp 会让它知道这是个 '旧封包'。(该文件表示是否启用以一种比超时重发更精确的方法(RFC 1323)来启用对 RTT 的计算;为了实现更好的性能应该启用这个选项。)

tcp_sackBOOLEAN
缺省值为1

使用 Selective ACK﹐它可以用来查找特定的遗失的数据报--- 因此有助于快速恢复状态。该文件表示是否启用有选择的应答(Selective Acknowledgment),这可以通过有选择地应答乱序接收到的报文来提高性能(这样可以让发送者只发送丢失的报文段)。(对于广域网通信来说这个选项应该启用,但是这会增加对 CPU 的占用。)

tcp_fackBOOLEAN
缺省值为1
打开FACK拥塞避免和快速重传功能。(注意,当tcp_sack设置为0的时候,这个值即使设置为1也无效)

tcp_dsackBOOLEAN
缺省值为1
允许TCP发送"两个完全相同"的SACK。

tcp_ecnBOOLEAN
缺省值为0
打开TCP的直接拥塞通告功能。

tcp_reorderingINTEGER
默认值是3
TCP流中重排序的数据报最大数量 。 (一般有看到推荐把这个数值略微调整大一些,比如5)

tcp_retrans_collapseBOOLEAN
缺省值为1
对于某些有bug的打印机提供针对其bug的兼容性。(一般不需要这个支持,可以关闭它)

tcp_wmem(3个INTEGER变量): min, default, max
min
:为TCP socket预留用于发送缓冲的内存最小值。每个tcp socket都可以在建议以后都可以使用它。默认值为4096(4K)

default:为TCP socket预留用于发送缓冲的内存数量,默认情况下该值会影响其它协议使用的net.core.wmem_default 值,一般要低于net.core.wmem_default的值。默认值为16384(16K)

max: 用于TCP socket发送缓冲的内存最大值。该值不会影响net.core.wmem_max,"静态"选择参数SO_SNDBUF则不受该值影响。默认值为131072(128K)(对于服务器而言,增加这个参数的值对于发送数据很有帮助,在我的网络环境中,修改为了51200 131072 204800)

tcp_rmem (3个INTEGER变量): min, default, max
min:为TCP socket预留用于接收缓冲的内存数量,即使在内存出现紧张情况下tcp socket都至少会有这么多数量的内存用于接收缓冲,默认值为8K

default:为TCP socket预留用于接收缓冲的内存数量,默认情况下该值影响其它协议使用的 net.core.wmem_default 值。该值决定了在tcp_adv_win_scaletcp_app_wintcp_app_win=0默认值情况下,TCP窗口大小为65535。默认值为87380

max:用于TCP socket接收缓冲的内存最大值。该值不会影响 net.core.wmem_max,"静态"选择参数 SO_SNDBUF则不受该值影响。默认值为 128K。默认值为87380*2 bytes。(可以看出,.max的设置最好是default的两倍,对于NAT来说主要该增加它,我的网络里为 51200 131072 204800)

tcp_mem(3个INTEGER变量):low, pressure, high
low:当TCP使用了低于该值的内存页面数时,TCP不会考虑释放内存。(理想情况下,这个值应与指定给 tcp_wmem 的第 2 个值相匹配 - 这第 2 个值表明,最大页面大小乘以最大并发请求数除以页大小 (131072 * 300 / 4096)。 )

pressure:当TCP使用了超过该值的内存页面数量时,TCP试图稳定其内存使用,进入pressure模式,当内存消耗低于low值时则退出pressure状态。(理想情况下这个值应该是 TCP 可以使用的总缓冲区大小的最大值 (204800 * 300 / 4096)。 )

high:允许所有tcp sockets用于排队缓冲数据报的页面量。(如果超过这个值,TCP 连接将被拒绝,这就是为什么不要令其过于保守 (512000 * 300 / 4096) 的原因了。 在这种情况下,提供的价值很大,它能处理很多连接,是所预期的 2.5 倍;或者使现有连接能够传输 2.5 倍的数据。 我的网络里为192000 300000 732000)

一般情况下这些值是在系统启动时根据系统内存数量计算得到的。

tcp_app_win : INTEGER
默认值是31

保留max(window/2^tcp_app_win, mss)数量的窗口由于应用缓冲。当为0时表示不需要缓冲。

tcp_adv_win_scale : INTEGER
默认值为2

计算缓冲开销bytes/2^tcp_adv_win_scale(如果tcp_adv_win_scale > 0)或者bytes-bytes/2^(-tcp_adv_win_scale)(如果tcp_adv_win_scale <= 0)。


tcp_rfc1337 :BOOLEAN
缺省值为0
这个开关可以启动对于在RFC1337中描述的"tcp 的time-wait暗杀危机"问题的修复。启用后,内核将丢弃那些发往time-wait状态TCP套接字的RST 包.


tcp_low_latency : BOOLEAN
缺省值为0

允许 TCP/IP 栈适应在高吞吐量情况下低延时的情况;这个选项一般情形是的禁用。(但在构建Beowulf 集群的时候,打开它很有帮助)


tcp_westwood :BOOLEAN
缺省值为0
启用发送者端的拥塞控制算法,它可以维护对吞吐量的评估,并试图对带宽的整体利用情况进行优化;对于 WAN 通信来说应该启用这个选项。


tcp_bic :BOOLEAN
缺省值为0
为快速长距离网络启用 Binary Increase Congestion;这样可以更好地利用以 GB 速度进行操作的链接;对于 WAN 通信应该启用这个选项。

posted @ 2007-09-29 22:45 彭帅 阅读(967) 评论(0) 编辑

1. 给页面的body上指定class或id,这样可以在一个共享css中为特定页面指定特别样式。

评论:这适用于样式较少的情况,可以把整个站点的样式集中于一个样式表。例如只有一两个页面有一两条特殊规则,就不需要使用多一个单独样式表。当然,样式多的时候,还是应分成若干个样式表,根据情况在页面中import所需样式表。


2. CSS签名,如body id="www-sitename-com",这样允许用户在用户样式表中为你的站点增加(或覆盖)样式。

评论:这个技巧很有意思,不过用户样式表很少被利用。为特定站点写特定样式,用user script之类的方法会更灵活。所以虽然初看时眼前一亮,但总的考虑下来,实用性不是很大。但是这给我一个启发,其实用用户样式表,加上IE7之类的库,就可以定制浏览器。


记录IE的bug:相对定位元素内若向右下进行绝对定位,需要设定相对定位元素的高宽。

模拟fixed的一个办法是使用脚本改变元素的绝对定位坐标,但是通常会导致抖动。实际上有两个小技巧可以模拟出不抖动的fixed。一个是使用css expression配合background-attachment:fixed。另一个(偶自行发现的)方法是使用ie的standard mode,然后html元素overflow:hidden,而body元素overflow:auto,这样body上绝对定位的元素在外层没有定位元素的情况下,会始终相对于html元素定位,从而达到和fixed定位一样的效果。这一方法是我在试图解决standard mode下scrollbar抢夺焦点的Bug(IE7似乎仍有这个bug)时偶然发现的。

关于containing block如何包围float元素(似乎有很多人以为这是FF的bug),需要额外的空元素来clear。为了避免引入无意义的标签,使用::after是个好方法,类似的,也许也可以用:last-child伪类,不过这两种方法无法用在IE上。但是IE可以用Holly hack,实际上就是让containing block获得hasLayout。

1. 固定宽度圆角框

实现:在外层元素(容器)上设定背景色和底部圆角图,在标题(内部第一个元素)上设定顶部圆角图。

限制:
* 宽度是定值像素的。
* 必须有内外两层block元素,内外层要紧贴(即外层不能有padding,内层不能有margin和border)。
* 圆角背景色是固定的(如白色),不能是透明的。

2. 固定宽度圆角框的变形

实现:在外层元素(容器)上设定纵向重复(repeat-y)的背景图,在内部第一个元素上设定顶部圆角图,在内部最后一个元素上设定底部圆角图。

限制:
* 宽度是定值像素的。
* 必须有内外两层block元素,内层至少有两个元素,内外层要紧贴(即外层不能有padding,内层不能有margin和border)。
* 圆角背景色是固定的(如白色),不能是透明的。

注:固定背景色的限制可以通过增加位移来解决,例如:

代码
  1. <div class="box">  
  2.     <div class="top">Heading</div>  
  3.     <div>Content...</div>  
  4.     <div class="bottom">Content...</div>  
  5. </div>  


代码
  1. .box {   
  2.     background:url(border-middle.png) repeat-y; width:120px;   
  3.     margin:12px 0;   
  4. }   
  5. .box .top {   
  6.     background:url(border-top.png) top no-repeat;   
  7.     margin:0;   
  8.     position:relative; top:-12px; padding-top:12px; margin-bottom:-12px;   
  9. }   
  10. .box .bottom {   
  11.     background:url(border-bottom.png) bottom no-repeat;   
  12.     margin:0;   
  13.     position:relative; top:12px; padding-bottom:12px; margin-top:-12px;   
  14. }   

注意,由于使用了margin,需要注意垂直合并的情况,增加了样式的复杂度。


3. sliding doors 技巧
实现:添加若干层额外的container,在每层上分别应用左下、右下、左上、右上的圆角图。
限制:
* 必须有四层block元素,内外层要紧贴(即外层不能有padding,内层不能有margin和border)。
* 圆角背景色是固定的(如白色),不能是透明的。

本质上,sliding doors技巧和前两个方式是一致的,都是通过多层block元素上的背景重叠来模拟总体效果。区别就是前面只需要两层——多数情况下,语义结构可以有两层元素,而几乎不可能出现语义结构需要四层元素的情况。

本书作者对此的看法是,如果只要少数地方,那忍受一下无意义标签也可以,但是如果有很多地方,那就需要考虑其方案。

我对此的看法有些不同。实际上,书中示例在容器宽度高度增大到超出图片宽高时,就会出现空白。如果要适应任意大小的容器,要么增大图片尺寸到一个很大的数值,要么增加更多层次,使用多达九层元素(相当于切分成井字形的九份)!

因此同样是忍受无语义元素,我宁可使用table构造一个井字布局来模拟border,这个方式比多层嵌套无语义div更清晰。

当然,最好的方案是使用CSS3的border-image和border-radius。在没有CSS3支持前,则是使用脚本自动插入辅助元素来实现。书中给出的是http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/


1. 简单的CSS阴影和Clagnut阴影

实现:在外层wrapper上将阴影图设为背景。元素本身通过margin或者相对定位做向左上方的偏移(以展现右下方向的阴影)。

限制:
* 阴影元素需要一个外层的wrapper元素。

2. 模糊阴影

实现:添加两层container,分别应用阴影图像和蒙板图像。

限制:
* 需要两个外层元素
* 外层背景色是固定的(与蒙板颜色一致)。洋葱皮阴影无此问题。

注意,蒙板需要png的alpha透明特性,但是IE6不支持。书中给出了使用AlphaImageLoader的filter方式,但是问题在于,在IE中与其这样,不如直接在元素上使用DropShadow或Shadow的filter。

3. 洋葱皮阴影

实现:添加两层container,分别应用两个阴影末尾图。

限制:
* 需要两个外层元素
* 外层背景色是固定的,但稍作改进可以避免这一限制。

总的来说,上述的阴影实现,都不是很好的方法,最好还是借助脚本。

最后是图像替换。

关于图像替换,除了本书作者所说的screen reader问题外,另一个问题是,在许多浏览器上,图像不会跟文本一起缩放。所以我的观点是尽量避免使用图像替换。本书作者提出的“公司品牌策略要求特定字体”的例子,我认为不足为证。如果真的需要这样强的视觉强制要求,也肯定不以字体为限,最好直接使用flash。

此外,display:none或visibility:hidden(译本有疏漏)会造成screen reader失效,这其实很大一部分是screen reader本身的问题。因为本身CSS可以只针对media=screen指定图像替换样式。但是许多screen reader忽视了CSS规范(多数是基于IE的)。

所以目前最可靠的图像替换法,仍是利用脚本的,如本书中的IFR和sIFR。

另,在XHTML2中,不需要专门的图像替换法。因为所有元素上都支持src属性。如果src指向的资源可用,就会被替换成该资源的内容(如视频、图像等),否则会使用元素内部的内容。

关于A上伪类的顺序,应按照LoVeHAte(Link Visited Hover Active)。

此外,关于链接伪类补充如下:

根据CSS21,link和visited伪类是互斥的,也就是*:link:visited不可能选择到任何元素。而hover、active与新增的focus伪类,可以共存于一个元素上。因此可以有以下的样式:

a:link:hover { color:red; text-decoration:underline }
a:visited:hover { color:maroon }
a:link { color:blue; text-decoration:none; }
a:visited { color:navy; text-decoration:none; }
a:active { background:green; color:white; }
a:visited:hover:active { text-decoration:line-through }

另,hover、active等动态伪类不限于A,也可以在其他某些元素上。但是IE6不支持。

active伪类还有点问题,因为早期规范定义不清,各个浏览器实现稍有不同。其中IE最离谱,实际效果近似一个只在a上有效的:focus伪类。实际上,IE DOM中的名为onactivate/ondeactivate的事件,也说明了IE是把active看成是一种特殊的focus的。

关于给外部链接加上图标,以及区分下载类型,是属性选择器的极好应用,只是IE6不支持。

Pixy方法,即将若干图合并于一个图片的方法,减少了http请求的数量,也避免了hover切换时的延迟。许多其他trick可以使用pixy方法,例如上一篇里提到的sliding door等。

本书还指出了Pixy方法受到IE的cache bug影响会闪烁。但是书中并没有说清楚这个问题。但其实该bug是有条件的,即IE的cache设置为Every visit to the page,而不是默认的Automatically。基本上,只有开发者才会把cache设置为每次访问检查更新,所以这个bug其实不会影响真正的用户(根据我在winxpsp2的ie6下测试,虽然可能仍然调用了一次网络存取的api,但是并没有发生实际的请求,症状就是鼠标有极短时间的抖动,但是图像不会闪烁)。此外有人发现了一个未公开的方法来让IE对背景图进行缓存:
document.execCommand("BackgroundImageCache",false,true)
使用这种方法甚至避免了api调用,貌似是直接缓存在IE内存中。
详见:http://www.mister-pixel.com/
BTW,我计划还要对这种方法做一些测试,看看是否能解决vml缓存问题

最后关于visited:在已访问链接后加一个打勾的图标,是一个很有意思的设计,可资参考。


关于列表,首先,由于list-style-image的位置各个浏览器实现的不一致,而且缩进使用padding或margin的不一致,所以本书后面的例子几乎完全抛弃了list-style,将padding和margin一律重置为0,然后从头重新定义。

BTW,关于列表缩进应该使用padding或者margin?我倾向于padding。理由另文撰述

关于导航条,本书的例子有一个问题,就是需要对第一个li元素专设样式。对于支持CSS21的浏览器来说,使用一个first-child伪类即可,但是对于IE,需要额外的一个first类。有一些解决的方法,我之前也讨论过这个话题

配合页面ID,可以设定页面特定的样式,例如本书中给出的在导航条中突出显示当前页面的例子。这是一个很有意思的技巧,沿着这个思路也可以有很多变化。

关于滑动门tab式导航,见上一篇关于sliding door的总结。幸运的是,在列表导航中,正好有li和a两层元素可供应用sliding door技巧。此外可以做一个简单的位移变形来支持边缘透明的tab。

关于图像映射,开始一段的译文有些歧义。我想作者是在说map和area,然后给出的是用CSS取代map的方法。我并不完全赞同作者关于map是将表现方式与内容混在一起的说法。在5.7远距离翻转的示例代码中,带有hotspot class的空span扮演的角色和area元素有何不同呢?实际上,map元素是有导航的语义的。xhtml2中新增的nl元素,就可以认为是map和ul的合体,在xhtml2中usemap所指向的也从map元素变成了nl元素。实际上,img等元素上的usemap属性提供了一种将对象(图像)与导航连接在一起的语义。

一个map的例子:

代码
  1. <img id="fu-image" src="fu.gif" alt="Bei Jing Huan Ying Ni" usemap="#fu-map" />  
  2. <map name="fu-map">  
  3.     <area href="#beibei" alt="BeiBei" shape="circle" coords="25,43,20" />  
  4.     <area href="#jingjing" alt="JingJing" shape="circle" coords="62,46,18" />  
  5.     <area href="#huanhuan" alt="HuanHuan" shape="circle" coords="102,36,24" />  
  6.     <area href="#yingying" alt="YingYing" shape="circle" coords="142,45,18" />  
  7.     <area href="#nini" alt="NiNi" shape="circle" coords="178,45,18" />  
  8. </map>  

 

又一个更语义化的例子(注:FF和Opera支持object上usemap,IE和Safari不支持object上usemap):

代码
  1. <object id="fu-nav" data="fu1.gif" type="image/gif" usemap="#fu-nav-map">  
  2.     <map name="fu-nav-map">  
  3.         <h2>Bei Jing Huan Ying Ni</h2>  
  4.         <ul>  
  5.             <li><a href="#beibei" tabindex="1" shape="circle" coords="25,43,20">BeiBei</a></li>  
  6.             <li><a href="#jingjing" tabindex="2" shape="circle" coords="62,46,18">JingJing</a></li>  
  7.             <li><a href="#huanhuan" tabindex="3" shape="circle" coords="102,36,24">HuanHuan</a></li>  
  8.             <li><a href="#yingying" tabindex="4" shape="circle" coords="142,45,18">YingYing</a></li>  
  9.             <li><a href="#nini" tabindex="5" shape="circle" coords="178,45,18">NiNi</a></li>  
  10.         </ul>  
  11.     </map>  
  12. </object>  

使用CSS做的图像映射,实际上与第二个例子相当接近,区别在于CSS无法作出圆形和多边形的点击区域。
当然作者的例子所展示的CSS设计的整个过程是很棒的。


posted @ 2007-09-29 04:49 彭帅 阅读(428) 评论(0) 编辑