Heim > Web-Frontend > HTML-Tutorial > html+css|Floating und Positionierung von Elementen

html+css|Floating und Positionierung von Elementen

高洛峰
Freigeben: 2017-02-09 13:36:48
Original
2191 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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;
    }
Nach dem Login kopieren

Weitere Artikel zum Floating und zur Positionierung von HTML+CSS| Elemente, achten Sie bitte auf die chinesische PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage