收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1099|回复: 2

请大家帮我解释一下上面的代码!

[复制链接]
发表于 2010-4-17 16:22:09 | 显示全部楼层 |阅读模式
  1. <html>
  2. <head><style>
  3. html, body, div, dl, dt, dd,{margin:0;padding:0;border:0;outline: 0;}
  4. ol, ul {list-style: none;}
  5. li{vertical-align:middle;}
  6. i{font-style:normal;}
  7. body{font-size:12px; text-align:center}
  8. a:link,a:visited{color:#000;text-decoration:none;}
  9. a:hover{color:#f60;text-decoration:underline;}

  10. /*报价列表*/
  11. .PriceLinks{height:8px;text-align:left; width:190px; position:absolute;top:200px; z-index:2;}
  12. .theadPrice{height:27px;width:190px;line-height:27px;background:url(http://www1.pconline.com.cn/global/2009/images/0907/index_bg_0907.gif) no-repeat 0 -178px;}
  13. .theadPrice .mark{padding:0px 8px 0px 30px;text-align:left;font-weight:bold;}
  14. .theadPrice .mark a{text-decoration:none;}
  15. .newPriceLinks{height:auto;/*clear:both;*/zoom:1;overflow:visible;border:1px solid #dbdbdb;border-top:none;background:#fafaf8 url(http://www1.pconline.com.cn/global/2009/images/0907/price_bg.gif) repeat-x 0 bottom;}
  16. .newPriceLinks dl{ height:auto;margin-top:3px;zoom:1;clear:both;overflow:visible;}

  17. .newPriceLinks dt{ height:19px;line-height:14px;padding:5px 7px 0 8px;border-top:1px dashed #c9c5c6;zoom:1;clear:both;overflow:visible;}
  18. .newPriceLinks dt.nobr{ border-top:1px dashed #ffffff;}
  19. .newPriceLinks dt p{ line-height:14px;border-bottom:none;padding:0;}
  20. .newPriceLinks dt i.title{ color:#f76f01;padding-left:13px;background:url(http://www1.pconline.com.cn/global/2008/081121/images/arrowy.gif) no-repeat 4px 3px;float:left;}
  21. .newPriceLinks dt i.title a{ color:#f76f01;}
  22. .newPriceLinks dt i.arrow{ width:9px;height:10px;background:url(http://www1.pconline.com.cn/global/2008/081121/images/arrowy3.gif) no-repeat;display:none;overflow:hidden;}
  23. .newPriceLinks dt a:hover{ text-decoration:none;}
  24. .newPriceLinks dt a.more{ float:right;}
  25. .newPriceLinks dd{ height:21px;line-height:21px;margin:0 0 0 6px;padding:0;word-wrap:break-word;word-break:break-all;float:left;display:inline;}
  26. .newPriceLinks dd a{white-space:nowrap;float:left;}
  27. .newPriceLinks dt.sfhover{ height:18px;line-height:14px;padding:5px 6px 0 7px;border:1px solid #fcc36c;background:#fdf6e3;position:relative;overflow:visible; z-index:88;}
  28. .newPriceLinks dt.sfhover i.title{ color:#9b3203;background:url(http://www1.pconline.com.cn/global/2008/081121/images/arrowy2.gif) no-repeat 4px 3px;}
  29. .newPriceLinks dt.sfhover a.more,.newPriceLinks dt.sfhover i.title a{ color:#9b3203;}
  30. .newPriceLinks dt.sfhover i.arrow{ display:block;position:absolute;z-index:99;left:-4px;top:7px;}
  31. .newPriceLinks dt.sfhover div{padding:3px;left:-310px;top:-15px;border:1px solid #ffbd66;background:#fff6d9;position:absolute;z-index:88;display:block;}
  32. .newPriceLinks dt.sfhover div dl{ width:286px;line-height:24px;padding:5px 6px 3px 10px;margin-top:0;background:#ffffff;zoom:1;clear:both;overflow:hidden;}
  33. .newPriceLinks dt.sfhover div dt{ height:24px;line-height:24px;padding:0;border:none;font-weight:bold;color:#d80005;background:none;overflow:hidden;}
  34. .newPriceLinks dt.sfhover div dt a{ color:#d80005;}
  35. .newPriceLinks dt.sfhover div dt.short{ height:21px;line-height:21px;float:left;}
  36. .newPriceLinks dt.sfhover div dd a:hover{ color:#d80005;text-decoration:underline;}
  37. .newPriceLinks dt div{ left:0;top:0;display:none;}
  38. .newPriceLinks .divScroll{height:23px;width:175px;padding:0 5px 0 8px;overflow:hidden;border-bottom:1px dashed #c9c5c6;}
  39. .newPriceLinks .divScroll .contentdiv{zoom:1;}
  40. .newPriceLinks .divScroll i{display:block;float:left;}
  41. .newPriceLinks .divScroll .iKey{width:28px;height:13px;padding:2px 0 0 1px;margin:3px 5px 0 0;background:url(http://www1.pconline.com.cn/global/2009/images/0907/hot_icon1.gif) no-repeat;text-align:center;color:#fff;}
  42. .newPriceLinks .divScroll .iTit{width:140px;height:23px;font-weight:bold;line-height:23px;}

  43. /**/</style>
  44. <div class="PriceLinks">
  45. <div class="theadPrice">
  46. <span class="mark"><a target="_blank" href="#/">产品报价</a></span></div>
  47. <div id="newPriceLinks" class="newPriceLinks">
  48. <dl>
  49. <dt class="nobr">
  50. <i class="title"><a target="_blank" href="#/cpu/">DIY硬件</a></i><a class="more" target="_blank" href="#/cpu/">更多>></a><i class="arrow"></i>
  51. <div>
  52. <dl>
  53. <dt class="short"><a href="#/cpu/" title="CPU" target="_blank">CPU</a>:</dt>
  54. <dd><a target="_blank" href="#/cpu/intel/">Intel</a></dd>
  55. <dd><a target="_blank" href="#/cpu/amd/">AMD</a></dd>
  56. <dd><a target="_blank" href="#/cpu/">更多>></a></dd>
  57. </dl>




  58. <dl>
  59. <dt class="short"><a target="_blank" href="#/memory/">内存</a>:</dt>
  60. <dd><a target="_blank" href="#/memory/kingston/">金士顿</a></dd>
  61. <dd><a target="_blank" href="#/memory/adata/">威刚</a></dd>
  62. <dd><a target="_blank" href="#/memory/apacer/">宇瞻</a></dd>
  63. <dd><a target="_blank" href="#/memory/kingmax/">胜创</a></dd>
  64. <dd><a target="_blank" href="#/memory/kingtiger/">金泰克</a></dd>
  65. <dd><a target="_blank" href="#/memory/samsung/">三星</a></dd>
  66. <dd><a target="_blank" href="#/memory/">更多>></a></dd>
  67. </dl>

  68. </dl>
  69. </div>
  70. <script>
  71. //今日报价菜单
  72. if (document.getElementById("newPriceLinks")){
  73. var sfEls = document.getElementById("newPriceLinks").getElementsByTagName("dt");
  74. for (var i=0; i<sfEls.length; i++) {
  75. sfEls[i].onmouseover=function() {
  76. this.className+=(this.className.length>0? " ": "") + "sfhover";
  77. }
  78. sfEls[i].onmouseout=function() {
  79. this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
  80. "");
  81. }
  82. }
  83. }
  84. </script>









  85. </body>
  86. </html>
复制代码





请大家帮我解释一下上面的代码!
怎么让DT标签弹出的框在右边!
详细一点好!
谢谢!
发表于 2010-4-17 16:37:45 | 显示全部楼层
HTML标签一塌糊涂  
回复 支持 反对

使用道具 举报

发表于 2010-4-17 16:41:49 | 显示全部楼层

  1. if (document.getElementById("newPriceLinks")){
  2.     //如果newPriceLinks元素存在
  3.     //那么找到所有dt
  4.     var sfEls = document.getElementById("newPriceLinks").getElementsByTagName("dt");
  5.     //轮流访问dt
  6.     for (var i=0; i<sfEls.length; i++) {
  7.         //给dt设置事件句柄
  8.         sfEls[i].onmouseover=function() {
  9.         //当dt上面鼠标划过时,追加sfhover类[显示]
  10.         this.className+=(this.className.length>0? " ": "") + "sfhover";
  11.         }
  12.         //当dt上面鼠标划出时,去掉sfhover类[隐藏]
  13.         sfEls[i].onmouseout=function() {
  14.         this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
  15.         "");
  16.         }
  17.     }
  18. };//也就是为划入划出事件进行CSS类的增删,以模拟显隐效果
复制代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-12-9 03:07 , Processed in 0.100332 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表