Notes du septième jour HTML5

La nouvelle balise HTML5 H5 attache une grande importance à la sémantique

(équivalent à div, qui a par défaut l'effet de div dans les navigateurs non compatibles avec H5)

arrière-plan : aucun ; efface l'image d'arrière-plan

Position :

position :

statique : statique

fixe : positionnement fixe (changements par rapport au navigateur) ne conserve pas sa propre position

relatif : Le positionnement relatif (changements par rapport à lui-même) conserve sa position, généralement utilisé avec le positionnement absolu.

absolu : le positionnement absolu (modifié par rapport à l'élément parent) ne conserve pas sa position,

gauche :20px/50%

haut : 20px/50%

bottom:20px/50%

right:20px/50%

Lorsqu'un élément est positionné de manière absolue, le positionnement relatif doit être défini pour son élément parent.

Quand il y a des éléments de relation positionnés, il y a une relation en cascade.

z-index : définit la relation en cascade

z-index :-0 1 2 3 ...99999 (plus la valeur est grande, plus l'affichage est haut)

mode d'affichage des éléments

display:block;/inline;/inline-block;/none

display:block Le mode d'affichage par défaut des éléments de niveau bloc

display:inline Le mode d'affichage par défaut des éléments en ligne Mode

display:inline-block Le mode d'affichage par défaut des éléments de niveau bloc en ligne

display:none Masque l'étiquette. Ne prend pas de place

visibilité:cachée Masque l'espace occupé

Menu déroulant de navigation production

Menu déroulant




Ci-dessus Voici le contenu des notes du septième jour de HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

<nav class="nav">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a>
<div>
<p>本地</p>
<p>国内</p>
<p>国际</p>
<p>政府</p>
</div> 
</li>
<li><a href="#">娱乐</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">头条</a></li>
</ul> 
</nav>
li div{
display: none;
position: absolute;
background:darkgreen;
}
li:hover div{
display: block;
}
.nav ul{
position: relative;
}