집 >웹 프론트엔드 >HTML 튜토리얼 >html+css|요소의 부동 및 위치 지정

html+css|요소의 부동 및 위치 지정

高洛峰원래의: 2017-02-09 13:36:482187검색

1. Float 속성 float

Clear float Clear

overflow 속성

visible: 콘텐츠가 잘리지 않고 요소 상자 외부에 표시됩니다.

hidden: 오버플로된 콘텐츠가 잘리고 빌드된 콘텐츠가 표시되지 않습니다.

auto: 필요할 때 스크롤 막대를 생성합니다. 즉, 표시할 콘텐츠에 맞게 조정합니다.

scroll: Overflow 내용이 잘리고 브라우저는 항상 스크롤 막대를 표시합니다

2. 위치 지정 속성 위치

정적: 정적 위치

상대적 위치

절대: 절대 위치

고정: 고정 위치

예시는 다음과 같습니다.

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. 음악 페이지

다음 코드:

<!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 중국어 웹사이트!

성명：

이전 기사：그림 스크롤 효과다음 기사：그림 스크롤 효과

html+css|요소의 부동 및 위치 지정

관련 기사