HTML-Grundlagen - CSS-Stylesheets, Style-Attribute, Format- und Layoutdetails

1. Position : fest

Gesperrte Position (relativ zum Browser), wie z. B. das Popup-Fenster in der unteren rechten Ecke mancher Websites.

Beispiel:

2. Position : absolut

Absolute Position:

1. Die äußere Ebene hat keine absolute (oder relative) Position. Dann wird das Div relativ zum Browser positioniert, wie in b in der folgenden Abbildung gezeigt (50 Pixel vom rechten Rand des Browsers und 20 Pixel vom unteren Rand).

2. Die äußere Ebene hat die Position: absolut (oder relativ); dann wird das div relativ zum äußeren Rand positioniert, wie z. B. bb in der Abbildung unten (50 Pixel vom rechten Rand von d und 20 Pixel vom unteren Rand von d).

Beispiel:

3. Position : relativ

Relative Position:

Wie in der folgenden Abbildung gezeigt, ist es relativ zu einer bestimmten Position des Div, das dieses Div enthält, fixiert. Wenn die äußere Ebene es nicht enthält, ist die relative Position relativ zum Browser festgelegt.

Beispiel:

4. Schichtung ( Z-Index )

Die Schichtung in Richtung der z -Achse kann als Aufteilen eines Stapels von Blättern verstanden werden. Dabei gilt: Je höher die Anzahl der Schichten, desto weiter oben liegen sie.

Im relativen Beispiel oben sehen wir, dass aa a abdeckt. Dies liegt daran, dass die Anzeigeebene des später geschriebenen Codes weiter vorne liegt. Wie können wir also aa abdecken, ohne die Reihenfolge des Codes zu ändern? wie folgt:

Beispiel:

5. schweben : links , rechts

Bei Verwendung von Left oder right muss die Position ( links oder oben ) nicht angegeben werden, sie ist direkt relativ zum Browser. Wenn der äußere Teil umbrochen wird, wird er mit Ausnahme einer Zeile an der oberen linken oder oberen rechten Position relativ zum äußeren Div angezeigt.

Zusätzlich: 1. overflow: hidden; //Den überzähligen Teil ausblenden; scrollen, Bildlaufleiste anzeigen;

<div ></div> //Den Fluss abschneiden

2. Cursor: die Form des Zeigers, wenn die Maus auf ihn zeigt;

3. Transluzenter Effekt:

<div class="box">Transparenter Bereich<div>

Der Code im Stylesheet lautet:

.Kasten

{

Deckkraft: 0,5; -moz-Deckkraft: 0,5; Filter: Alpha (Deckkraft = 50)

}

Um das Praxisbeispiel zusammenzufassen: Machen Sie einen Teil des Formatlayouts der Druba-Website

HTML Quelltext:

Diagramm der Anzeigeeffekte beim Betrieb von Webseiten:

Der obige Artikel über grundlegende HTML-Kenntnisse – detaillierte Erklärungen zu CSS-Stylesheets, Stilattributen, Format und Layout – ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen und ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/H2921306656/archive/2016/07/10/5658870.html