HTML5 일곱째 날 노트

HTML5의 새로운 태그 H5는 의미론에 큰 중요성을 부여합니다

헤더(H5와 호환되지 않는 브라우저에서 div의 효과를 기본으로 하는 div와 동일)

배경:없음; 배경 이미지 지우기

위치:

위치:

정적: 정적

고정: 고정 위치 (브라우저에 상대적인 변경)은 자체 위치를 유지하지 않습니다

상대적: 상대 위치 지정(자체를 기준으로 변경)은 자체 위치를 유지하며 일반적으로 절대 위치 지정과 함께 사용됩니다.

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 중국어 홈페이지(www.php.cn)를 주목해주세요!

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