만들기 방법: 약제형 네비게이션

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 네비게이션 패널

강의:실제로 시도해 보세요