📄 remote-rollovers.htm
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Remote Rollovers</title><style type="text/css"><!--body { font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;} #pic { width: 640px; height: 425px; position: relative;}#pic ul { margin: 0; padding: 0; list-style: none; font-size: 1.8em;}#pic a { text-decoration: none; color: #039;}#pic a .hotspot { width: 100px; height: 120px; position: absolute;}#pic a .link { position: absolute; display: block; width: 15em;}/* :BUG: This rule on it's own does not work in IE */#pic a:hover .hotspot { border: 1px solid #fff;}/* :BUG: Neither does this rule */#pic a:hover .link { color: #0066FF;}/* :KLUDGE: However if you add this rule, both the previous rules now work. Weird*/#pic a:hover { border: none;}#pic .rich a .hotspot { top: 15px; left: 95px;}#pic .andy a .hotspot { top: 115px; left: 280px;}#pic .jeremy a .hotspot { top: 250px; left: 425px;}#pic .rich a .link { bottom: -2em; left: 0;}#pic .andy a .link { bottom: -3.2em; left: 0;}#pic .jeremy a .link { bottom: -4.4em; left: 0;}--></style></head><body><div id="pic"><img src="images/group-photo.jpg" width="640" height="425" alt="Richard, Andy and Jeremy" /><ul><li class="rich"><a href="http://www.clagnut.com/" title="Richard Rutter"><span class="hotspot"></span><span class="link">» Richard Rutter</span></a></li><li class="andy"><a href="http://www.andybudd.com/" title="Andy Budd"><span class="hotspot"></span><span class="link">» Andy Budd</span></a></li><li class="jeremy"><a href="http://www.adactio.com/" title="Jeremy Keith"><span class="hotspot"></span><span class="link">» Jeremy Keith</span></a></li></ul></div></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -