만들기 방법: 약제형 네비게이션
CSS를 사용하여 약제형 네비게이션 메뉴를 만들어보세요.
약제형 네비게이션
약제형 네비게이션 생성
第一步 - HTML 추가:
<div class="pill-nav"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div>
第二步 - CSS 추가:
/* 약제형 네비게이션 메뉴 내 링크 스타일 설정 */ .pill-nav a { display: inline-block; color: black; text-align: center; padding: 14px; text-decoration: none; font-size: 17px; border-radius: 5px; } /* 마우스 오버 시 링크의 색상 변경 */ .pill-nav a:hover { background-color: #ddd; color: black; } /* 활성/현재 링크에 색상 추가 */ .pill-nav a.active { background-color: dodgerblue; color: white; }
수직의 약제형 네비게이션
链接에 display: block 추가하여 수직으로 표시됩니다 대신 수평으로 표시됩니다:
관련 페이지
강의:CSS 네비게이션 패널
강의:실제로 시도해 보세요