CSS 웹 네비게이션 바 디자인: 다양한 네비게이션 바 스타일 만들기-CSS 튜토리얼-php.cn

CSS 웹 네비게이션 바 디자인: 다양한 네비게이션 바 스타일 만들기

WBOY

풀어 주다： 2023-11-18 16:41:06

원래의

1562명이 탐색했습니다.

CSS 웹 네비게이션 바 디자인: 다양한 네비게이션 바 스타일 만들기

CSS 웹 네비게이션 바 디자인: 다양한 네비게이션 바 스타일을 만들려면 특정 코드 예제가 필요합니다.

네비게이션 바는 웹 디자인에서 가장 중요한 구성 요소 중 하나입니다. , 또한 웹사이트 구조에 대한 명확한 지침을 제공합니다. 내비게이션 바를 디자인할 때 우리가 자주 직면하는 문제는 어떻게 하면 아름답고 기능적인 내비게이션 바를 만들 수 있느냐는 것입니다. 이 기사에서는 몇 가지 일반적인 CSS 탐색 모음 디자인 방법을 소개하고 독자가 이를 더 잘 이해하고 적용할 수 있도록 해당 코드 예제를 제공합니다.

기본 탐색 모음
기본 탐색 모음은 가장 일반적인 디자인으로, 일반적으로 탐색 모음의 메뉴 항목을 나타내기 위해 순서가 지정되지 않은 목록(ul)을 사용합니다. CSS를 사용하여 배경색, 글꼴 크기, 여백 등과 같은 탐색 모음의 스타일을 설정할 수 있습니다.

HTML 코드 예:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

로그인 후 복사

CSS 코드 예:

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline;
}

nav a {
  color: #fff;
  padding: 10px;
  text-decoration: none;
}

nav a:hover {
  background-color: #666;
}

로그인 후 복사

2. 반응형 탐색 모음
모바일 장치의 인기로 인해 점점 더 많은 사용자가 휴대폰이나 태블릿을 통해 웹을 탐색합니다. 따라서 다양한 기기에서 최상의 사용자 경험을 제공하기 위해 탐색 모음에 대한 반응형 스타일을 디자인해야 합니다.

일반적인 반응형 탐색 모음 디자인은 모바일 드롭다운 메뉴입니다. 화면 너비가 특정 임계값보다 작으면 탐색 모음의 메뉴 항목이 버튼 형태로 표시됩니다. 사용자가 버튼을 클릭하면 메뉴 항목이 드롭다운 목록 형태로 표시됩니다. .

HTML 코드 예:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
  <button class="menu-btn">&#9776;</button>
</nav>

로그인 후 복사

CSS 코드 예:

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

nav li {
  display: inline;
}

nav a {
  color: #fff;
  padding: 10px;
  text-decoration: none;
}

nav a:hover {
  background-color: #666;
}

.menu-btn {
  display: none;
}

@media only screen and (max-width: 768px) {
  nav ul {
    display: none;
  }
  
  .menu-btn {
    display: block;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px;
  }
  
  .menu-btn:hover {
    background-color: #666;
  }
  
  .menu-btn:focus {
    outline: none;
  }
  
  .menu-dropdown {
    display: none;
    background-color: #333;
    padding: 10px;
  }
  
  .show {
    display: block;
  }
}

로그인 후 복사

3. 드롭다운 탐색 모음
드롭다운 탐색 모음은 웹사이트의 하위 페이지를 더 잘 구성하고 표시하여 더 많은 탐색 옵션을 제공합니다. CSS 의사 클래스:hover를 사용하여 드롭다운 효과를 얻을 수 있습니다.

HTML 코드 예시:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a>
      <ul class="submenu">
        <li><a href="#">公司简介</a></li>
        <li><a href="#">团队介绍</a></li>
      </ul>
    </li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

로그인 후 복사

CSS 코드 예시:

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  color: #fff;
  padding: 10px;
  text-decoration: none;
}

nav a:hover {
  background-color: #666;
}

.submenu {
  display: none;
  background-color: #666;
  position: absolute;
  top: 100%;
  left: 0;
}

nav li:hover .submenu {
  display: block;
}

로그인 후 복사

이 글에서는 기본 네비게이션 바, 반응형 네비게이션 바, 드롭다운 네비게이션 바의 디자인 방법을 소개하고 그에 상응하는 코드 예제를 제공합니다. 독자는 자신의 웹사이트 요구 사항에 맞게 이러한 샘플 코드를 수정하고 사용자 정의할 수 있습니다. 합리적인 CSS 디자인을 통해 다양한 스타일의 탐색 모음을 만들어 사용자에게 더 나은 웹사이트 탐색 경험을 제공할 수 있습니다. 물론 이것은 내비게이션 바 디자인에 있어서 빙산의 일각에 불과합니다. 우리가 탐색하고 적용할 수 있는 더 많은 디자인 기술과 세부 사항이 있습니다. 이 글이 독자들에게 도움이 되기를 바랍니다!

위 내용은 CSS 웹 네비게이션 바 디자인: 다양한 네비게이션 바 스타일 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!