탐색 모음 설정 CSS

웹 개발자로서 우리는 아름답고 실용적인 페이지 탐색 모음을 디자인해야 하는 경우가 많습니다. HTML에서는 <ul></ul> 및 <li> 태그를 사용하여 기본 탐색 모음을 만들 수 있지만, 일부 스타일과 대화형 효과를 추가하려면, 우리는 CSS를 사용하여 이 작업을 수행해야 합니다. <ul></ul>和<li>标签来创建一个基本的导航条，但是如果想要增加一些样式和交互效果，我们需要使用CSS来完成。

本文将介绍如何使用CSS来设计导航条，从简单的样式到复杂的效果，逐步详解。

탐색 모음 설정 CSS

首先，我们来创建一个简单的导航条。在HTML代码中，我们使用<ul></ul>和<li>

이 글에서는 CSS를 사용하여 간단한 스타일부터 복잡한 효과까지 내비게이션 바를 디자인하는 방법을 단계별로 소개합니다.

기본 스타일

먼저 간단한 네비게이션 바를 만들어 보겠습니다. HTML 코드에서는 <ul></ul> 및 <li> 태그를 사용하여 순서가 지정되지 않은 목록을 만든 다음 CSS를 사용하여 목록 스타일, 크기, 색상을 설정합니다. , etc. 속성은 다음과 같습니다.

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

.nav li {
  margin: 0;
}

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

위 스타일 설정을 통해 아래와 같이 간단한 탐색 모음이 생겼습니다.

hover 효과

다음으로 간단하고 실용적인 호버 효과를 추가할 수 있습니다. 내비게이션 바 위에 마우스 포인터를 올렸을 때 배경색, 텍스트 색상 등의 속성을 변경하여 사용자의 시각적 효과를 향상시킬 수 있습니다. 다음과 같이 :hover 의사 클래스를 설정하여 이를 달성할 수 있습니다.

.nav a:hover {
  background-color: #555;
  color: #fff;
}

위 코드는 사용자가 탐색 링크 위에 마우스 포인터를 올리면 링크의 배경색이 #555로 변경되고 텍스트가 변경된다는 의미입니다. 흰색으로 변하게 됩니다. 완성된 효과는 다음과 같습니다.

밑줄 효과

다음으로 얻을 효과는 사용자가 탐색 모음 링크 위에 마우스를 올리면 링크 아래에 밑줄 효과가 나타나는 것입니다. 이는 비교적 일반적인 효과로, 사용자가 현재 어떤 탐색 링크를 선택하고 있는지 더 명확하게 알 수 있습니다.

링크 아래에 before: 의사 요소를 추가하면 이를 달성할 수 있습니다. 사용자가 링크 위로 마우스를 가져가면 의사 요소가 표시되고 하단 테두리의 길이가 늘어납니다. 코드는 다음과 같습니다.

.nav a:hover:before {
  content:'';
  display: block;
  border-bottom: 4px solid #fff;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.nav a:hover:before {
  transform: scaleX(1);
}

위 코드는 탐색 링크 위에 마우스 포인터를 올리면 의사 요소가 표시되고 요소의 이동, 회전, 크기 조정 및 기타 애니메이션 효과가 다음을 통해 설정된다는 의미입니다. 변환 속성. 완성된 효과는 다음과 같습니다.

슬라이딩 효과

다음 효과는 사용자가 내비게이션 링크를 선택하면 내비게이션 바 아래에 슬라이딩 표시 효과가 나타나는 것입니다. 이 효과를 통해 사용자는 자신이 선택한 탐색 링크가 어디에 있는지 더 명확하게 알 수 있습니다.

표시 컨테이너와 표시 하위 요소를 생성하면 이를 수행할 수 있습니다. 사용자가 탐색 링크를 선택하면 표시기가 한 위치에서 다른 위치로 미끄러집니다. 코드는 다음과 같습니다:

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
  <div class="indicator"></div>
</ul>

.indicator {
  height: 4px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all .3s ease-in-out;
}

.nav li:first-child .indicator {
  width: 80px;
  transform: translateX(0);
}

.nav li:nth-child(2) .indicator {
  width: 70px;
  transform: translateX(80px);
}

.nav li:nth-child(3) .indicator {
  width: 60px;
  transform: translateX(150px);
}

.nav li:last-child .indicator {
  width: 110px;
  transform: translateX(210px);
}

.nav a:hover + .indicator {
  width: 100%;
  transform: translateX(0);
}

위 코드는 사용자가 탐색 링크를 선택하면 해당 표시기가 링크 아래로 슬라이드된다는 의미입니다. 다양한 링크에 해당하는 표시기의 폭과 응답 오프셋을 설정하면 다양한 슬라이딩 효과를 얻을 수 있습니다. 완성된 효과는 다음과 같습니다.

🎜🎜요약🎜🎜이 글에서는 CSS를 사용하여 기본 스타일, 호버 효과, 밑줄 효과, 슬라이딩 효과 등 다양한 유형의 탐색 모음을 만드는 방법을 소개합니다. 이러한 효과는 사용자의 대화형 경험을 향상시키고 페이지를 더욱 아름답고 사용하기 쉽게 만들 수 있습니다. 지속적인 학습과 연습을 통해 페이지의 디자인과 효과를 지속적으로 개선하고 완벽하게 만들어 사용자에게 더 나은 경험을 제공할 수 있습니다. 🎜

위 내용은 탐색 모음 설정 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!