HTML5의 새로운 태그 H5는 의미론에 큰 중요성을 부여합니다
1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5 헤더(H5와 호환되지 않는 브라우저에서 div의 효과를 기본으로 하는 div와 동일)
c787b9a589a3ece771e842a6176cf8e9
배경:없음; 배경 이미지 지우기
위치:
위치:
정적: 정적
고정: 고정 위치 (브라우저에 상대적인 변경)은 자체 위치를 유지하지 않습니다
상대적: 상대 위치 지정(자체를 기준으로 변경)은 자체 위치를 유지하며 일반적으로 절대 위치 지정과 함께 사용됩니다.
absolute: 절대 위치 지정(상위 요소를 기준으로 변경됨)은 위치를 유지하지 않습니다.
left:20px/50%
top: 20px/50%
하단:20px/50%
오른쪽:20px/50%
요소가 절대 위치에 있는 경우 상위 요소에 대해 상대 위치를 설정해야 합니다.
위치 관계 요소가 있을 때 계단식 관계가 있습니다.
z-index: 계단식 관계 설정
z-index:-0 1 2 3 ...99999(값이 클수록 표시가 높아짐)
요소 표시 모드
display:block;/inline;/inline-block;/none
display:block 블록 수준 요소의 기본 표시 모드
display:inline 인라인 요소의 기본 표시 모드 Mode
display:inline-block 인라인 블록 수준 요소의 기본 표시 모드
display:none 레이블을 숨깁니다. 공간을 차지하지 않음
visibility:hidden 점유된 공간을 숨김
탐색 드롭다운 메뉴 제작
드롭다운 메뉴
위 HTML5 7일차 노트 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 주목해주세요!
<nav class="nav">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a>
<div>
<p>本地</p>
<p>国内</p>
<p>国际</p>
<p>政府</p>
</div>
</li>
<li><a href="#">娱乐</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">头条</a></li>
</ul>
</nav>
li div{
display: none;
position: absolute;
background:darkgreen;
}
li:hover div{
display: block;
}
.nav ul{
position: relative;
}