Maison >interface Web >tutoriel CSS >Comment utiliser l'attribut CSS3 nav-right ?

Comment utiliser l'attribut CSS3 nav-right ?

青灯夜游
青灯夜游original
2019-02-21 11:58:143445parcourir

L'attribut CSS3 nav-right est un attribut CSS3 utilisé pour spécifier où naviguer lors de l'utilisation de la touche de navigation flèche droite. Sa syntaxe est "nav-right: auto|id|target-name ;", le paramètre ". auto" indique vers quel élément le navigateur décide de naviguer.

Comment utiliser l'attribut CSS3 nav-right ?

La propriété nav-right est une propriété CSS3 qui spécifie où naviguer lorsque vous utilisez la touche de navigation flèche droite.

Recommandé : "Tutoriel vidéo CSS3"

Attribut de navigation CSS3 droit

Fonction :L'attribut nav-right spécifie où naviguer lorsque vous utilisez la touche de navigation nav-right.

Syntaxe de base :

nav-right: auto|id|target-name;

auto : Le navigateur décide vers quel élément accéder.

id : Spécifiez l'ID de l'élément vers lequel accéder.

target-name : Spécifiez le cadre cible vers lequel accéder

Remarque : Actuellement uniquement Opera prend en charge l'attribut nav-right.

Exemple d'utilisation de l'attribut CSS3 nav-right

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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">按钮1</button>
<button id="b2">按钮2</button>
<button id="b3">按钮3</button>
<button id="b4">按钮4</button>
<p><b>注释:</b>目前只有 Opera 支持 nav-* 属性。当您使用方向键导航时,请同时按下 Shift 键。</p>
</body>
</html>

Ce qui précède est l'intégralité du contenu de cet article, j'espère que cela pourra vous aider tout le monde apprend Aide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn