Heim > Artikel > Web-Frontend > html+css|Floating und Positionierung von Elementen
1. Float-Attribut float
Float löschen
Überlaufattribut
sichtbar: Der Inhalt wird nicht abgeschnitten und außerhalb der Elementbox angezeigt
versteckt: Überlaufender Inhalt wird abgeschnitten und der erstellte Inhalt ist unsichtbar
automatisch: Bildlaufleisten werden bei Bedarf generiert, d. h. an den anzuzeigenden Inhalt angepasst
Bildlauf: Überlauf Der Inhalt wird gekürzt und der Browser zeigt immer die Bildlaufleiste an
2. Positionierungsattribut Position
statisch: statische Positionierung
relativ: relative Positionierung
absolut: Absolute Positionierung
fest: feste Positionierung
Beispiele sind wie folgt:
P196
<!doctype html> <html> <head> <meta charset="utf-8"> <title>子元素相对于直接父元素定位</title> <style type="text/css"> body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;} .father{ margin:10px auto; width:300px; height:300px; padding:10px; background:#ccc; border:1px solid #000; position:relative; } .child01,.child02,.child03{ width:100px; height:50px; line-height:50px; background:#ff0; border:1px solid #000; margin:10px 0px; text-align:center; } .child02{ position:absolute; left:50px; top:100px; z-index:1000; } .child03{ position:absolute; left:10px; top:80px; z-index:100; } </style> </head> <body> <div class="father"> <div class="child01">child-01</div> <div class="child02">child-02</div> <div class="child03">child-03</div> </div> </body> </html>
3. Erstellen Sie ein Fokusbild für die Automusikseite
Der folgende Code:
<!doctype html> <html> <head> <meta charset=”utf-8”> <title>车载音乐页面</title> </head> <body> <div> <img src=”images/11.jpg”alt=”车载音乐”> <a href=”#”class=”left”></a> <a href=”#”class=”right”></a> <ul> <li class=”max”></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
CSS-Stylesheet definieren
*{margin:0;padding:0;border:0;list-style:none;} a{text-decoration:none;font-size:30px;color:#fff;} div{ width:580px; height:200px; margin:50px auto; position:relative; } a{ float:left; width:25px; height:90px; line-height:90px; background:#333; opacity:0.7; border-radius:4px; text-align:center; display:none; cursor;pointer; } .left{ position:absolute; left:-12px; top:60px; } .right{ position:absolute; right:-12px; top:60px; } div:hover a{ display:block; } ul{ width:110px; height:20px; background:#333; opacity:0.5; border-radius:8px; position:absolute; right:30px; bottom:20px; text-align:center; } li{ width:5px; height:5px; background:#ccc; border-radius:50%; display:inline-block; } .max{ width:12px; background:#03BDE4; border-radius:6px; }
Weitere Artikel zum Floating und zur Positionierung von HTML+CSS| Elemente, achten Sie bitte auf die chinesische PHP-Website!