HTML5-Notizen zum siebten Tag

HTML5s neues Tag H5 legt großen Wert auf Semantik

1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5 Header (entspricht div, das standardmäßig die Wirkung von div in Browsern hat, die nicht mit H5 kompatibel sind)

c787b9a589a3ece771e842a6176cf8e9

Hintergrund:kein; das Hintergrundbild löschen;

Position:

statisch: statisch

fest: Feste Positionierung (Ändert sich relativ zum Browser) behält seine eigene Position nicht bei

relativ: Die relative Positionierung (Änderungen relativ zu sich selbst) behält ihre Position bei und wird im Allgemeinen zusammen mit der absoluten Positionierung verwendet.

absolut: Die absolute Positionierung (relativ zum übergeordneten Element geändert) behält ihre Position nicht bei,

links:20px/50%

oben: 20px/50%

unten:20px/50%

rechts:20px/50%

Wenn ein Element absolut positioniert ist, muss die relative Positionierung für sein übergeordnetes Element festgelegt werden.

Wenn positionierte Beziehungselemente vorhanden sind, liegt eine kaskadierende Beziehung vor.

z-index: Legen Sie die kaskadierende Beziehung fest

z-index:-0 1 2 3 ...99999 (je größer der Wert, desto mehr wird er auf der oberen Ebene angezeigt)

Der Anzeigemodus des Elements

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

display:block Der Standardanzeigemodus von Elementen auf Blockebene

display:inline Der Standardanzeigemodus von Inline-Elementen. Modus

display:inline-block Der Standardanzeigemodus von Inline-Elementen auf Blockebene.

display:none Versteckt die Beschriftung . Belegt keinen Platz

Sichtbarkeit:versteckt Versteckt den belegten Platz

Erstellung des Navigations-Dropdown-Menüs

Dropdown-Menü




Oben Dies ist der Inhalt der Notizen zum siebten Tag von HTML5. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (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;
}