Maison > Article > interface Web > html css|flottant et positionnement des éléments
1. Attribut float float
Effacer float clear
attribut overflow
visible : le contenu ne sera pas tronqué et sera présenté en dehors de la boîte de l'élément
masqué : le contenu en débordement sera coupé et le contenu construit est invisible
auto : génère des barres de défilement en cas de besoin, c'est-à-dire s'adapte au contenu à afficher
défilement : débordement Le contenu sera coupé et le navigateur affichera toujours la barre de défilement
2. Position de l'attribut de positionnement
statique : positionnement statique
relatif : positionnement relatif
absolu : positionnement absolu
fixe : positionnement fixe
Les exemples sont les suivants :
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. Créez une image de focus pour la page musique de voiture
Le code suivant :
<!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>
Définir la feuille de style CSS
*{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; }
Pour plus d'articles liés au flottement et au positionnement des éléments CSS html | , veuillez faire attention au site Web PHP chinois !