css3 nav-down属性笔记

原创 国哥笔记  2019-03-04 10:01  阅读 289 views 次

nav-down属性定义及用法

在css中,nav-down属性是用来规定当使用nav-down导航键时,向何处进行导航。该属性是css3新增属性,目前大多数浏览器还不支持该属性,只有Opera浏览器支持nav-down属性。

nav-down属性语法格式

  1. css语法:nav-down: auto/id/target-name/inherit;
  2. JavaScript语法:object.style.navDown="#div2";

属性值说明

  • auto :浏览器决定导航到哪个元素;
  • id:规定被导航元素的id;
  • target-name:规定被导航的目标框架;
  • inherit:从父元素继承nav-down属性的值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 nav-down属性笔记</title>
<style type="text/css">
button{position:absolute;}
button#b1{top:20%;left:25%;nav-index:1;nav-right:#b2; nav-left:#b4;nav-down:#b2; nav-up:#b4;}
button#b2{top:40%;left:50%;nav-index:2;nav-right:#b3; nav-left:#b1;nav-down:#b3; nav-up:#b1;}
button#b3{top:70%;left:25%;nav-index:3;nav-right:#b4; nav-left:#b2;nav-down:#b4; nav-up:#b2;}
button#b4{top:40%;left:0%;nav-index:4;nav-right:#b1; nav-left:#b3;nav-down:#b1; nav-up:#b3;}
</style>
</head>
<body>
<button id="b1">Button 1</button><button id="b2">Button 2</button>
<button id="b3">Button 3</button><button id="b4">Button 4</button>
<p><b>注释:</b>目前只有 Opera 支持 nav-* 属性。当您使用方向键导航时,请同时按下 Shift 键。</p>
</body>
</html>

运行结果:

css3 nav-down属性笔记

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-nav-down.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情