오늘은 간단한 네비게이션 바를 만드는 방법을 공유하겠습니다.
1단계: CSS 스타일 시트를 소개하고 nav라는 ID로 새 레이어를 만든 다음
nbsp;html> <meta> <title></title> <link> <p> </p>
두 번째 단계는 CSS 스타일을 설정하는 것입니다.
1. nav 속성을 설정합니다
#nav{ width: 500px; height: 50px; border: 1px solid red; }
표시 효과는 다음과 같습니다.
2. 앞의 점
을 지웁니다.#nav ul{ list-style: none; }
3.
#nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; }
4. 마우스 슬라이드 오버 효과 설정
#nav ul li a:hover{ background-color: #ABCDEF; }
최종 효과:
전체 HTML 코드 부분:
nbsp;html> <meta> <title></title> <link> <p> </p>
CSS 스타일 코드 부분 완성:
*{ margin: 0; padding: 0; } #nav{ width: 500px; height: 50px; border: 1px solid red; margin: 30px; } #nav ul{ list-style: none; } #nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; } #nav ul li a:hover{ background-color: #ABCDEF; }
결제해 주세요 HTML 1단계 탐색 제작 PHP 중국어 웹사이트와 관련된 더 많은 기사에 주목하세요!