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

html+css|Floating und Positionierung von Elementen

高洛峰
高洛峰Original
2017-02-09 13:36:482184Durchsuche

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!

Stellungnahme:
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
Vorheriger Artikel:BildlaufeffekteNächster Artikel:Bildlaufeffekte