HTML5-Notizen zum siebten Tag-H5-Tutorial-php.cn

HTML5-Notizen zum siebten Tag

黄舟

Freigeben： 2016-12-28 17:19:17

Original

1381 Leute haben es durchsucht

HTML5s neues Tag H5 legt großen Wert auf Semantik

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

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 (m.sbmmt.com).

<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;
}

Nach dem Login kopieren