当前位置:Gxlcms > JavaScript > cssnav-left属性怎么用

cssnav-left属性怎么用

时间:2021-07-01 10:21:17 帮助过:15人阅读

css nav-left属性用于规定当使用nav-left导航键时,向何处进行导航,其语法是nav-left: auto|id|target-name|inherit。

css nav-left属性怎么用?

作用:nav-left 属性规定当使用 nav-left 导航键时,向何处进行导航。

语法:

  1. nav-left: auto|id|target-name|inherit

说明:

auto 浏览器决定导航到哪个元素。

id 规定被导航元素的 id。

target-name 规定被导航的目标框架。

inherit 规定应从父元素继承 nav-left 属性的值。

注释:目前只有 Opera 支持 nav-left 属性。

css nav-left 属性使用示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. button
  6. {
  7. position:absolute;
  8. }
  9. button#b1
  10. {
  11. top:20%;left:25%;
  12. nav-index:1;
  13. nav-right:#b2; nav-left:#b4;
  14. nav-down:#b2; nav-up:#b4;
  15. }
  16. button#b2
  17. {
  18. top:40%;left:50%;
  19. nav-index:2;
  20. nav-right:#b3; nav-left:#b1;
  21. nav-down:#b3; nav-up:#b1;
  22. }
  23. button#b3
  24. {
  25. top:70%;left:25%;
  26. nav-index:3;
  27. nav-right:#b4; nav-left:#b2;
  28. nav-down:#b4; nav-up:#b2;
  29. }
  30. button#b4
  31. {
  32. top:40%;left:0%;
  33. nav-index:4;
  34. nav-right:#b1; nav-left:#b3;
  35. nav-down:#b1; nav-up:#b3;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <button id="b1">Button 1</button>
  41. <button id="b2">Button 2</button>
  42. <button id="b3">Button 3</button>
  43. <button id="b4">Button 4</button>
  44. <p><b>注释:</b>目前只有 Opera 支持 nav-* 属性。当您使用方向键导航时,请同时按下 Shift 键。</p>
  45. </body>
  46. </html>

效果输出:

d61225e3945f6b4e9bd13bb83118d36.png

以上就是css nav-left属性怎么用的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行