css3 nav-left属性笔记

原创 国哥笔记  2019-03-04 11:40  阅读 234 views 次

nav-left属性定义及用法

在css中,nav-left属性是用来指定使用箭头向左导航键导航。该属性是css3新增属性,目前大多数浏览器还不支持该属性,只有Opera浏览器支持nav-left属性。

nav-left属性语法格式

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

属性值说明

  • auto :浏览器将决定哪个元素导航;
  • id:指定导航到该元素的ID;
  • target-name:指定导航到目标帧;
  • inherit:指定nav-left属性的值,应该从父元素继承;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 nav-left属性笔记</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-left.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情