html css|flottant et positionnement des éléments-tutoriel HTML-php.cn

html css|flottant et positionnement des éléments

高洛峰

Libérer： 2017-02-09 13:36:48

original

2216 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

Pour plus d'articles liés au flottement et au positionnement des éléments CSS html | , veuillez faire attention au site Web PHP chinois !