nav-up属性如何使用

2020-07-23 10:50:58
nav-up属性设置或检索对象的导航方向,有四个属性值可以设置:auto(浏览器决定导航到哪个元素), id(规定被导航元素的id,target-name (规定被导航的目标框架),inherit(规定应从父元素继承 nav-up 属性的值) 。

css nav-up属性如何使用?

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

语法:

nav-up: auto|id|target-name|inherit;

说明:

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

id :规定被导航元素的 id。

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

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

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

css nav-up属性使用示例

<!DOCTYPE html><html><head><style>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>

效果图:

1.jpg