ホームページ >ウェブフロントエンド >htmlチュートリアル >html+css|要素のフローティングと配置

html+css|要素のフローティングと配置

高洛峰オリジナル: 2017-02-09 13:36:482216ブラウズ

1. Float 属性 float

Clear float Clear

overflow 属性

visible: コンテンツはトリミングされず、要素ボックスの外側に表示されます

hidden: オーバーフローコンテンツはトリミングされ、構築されたコンテンツは非表示になります

auto: 必要に応じてスクロールバーを生成します。つまり、表示されるコンテンツに適応します。

scroll: オーバーフローしたコンテンツはトリミングされ、ブラウザーには常にスクロールバーが表示されます。

2 位置決め属性の位置

static: 静的位置

relative: 相対位置

absolute: 絶対位置

fixed: 固定位置

例は次のとおりです:

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. 車の音楽ページの Web フォーカス画像を作成します

次のコード:

<!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 スタイルシートを定義する

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

html+css 要素のフローティングと配置に関するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：画像スクロール効果次の記事：画像スクロール効果

続きを見る

html+css|要素のフローティングと配置

関連記事