HTML을 사용하여 간단하고 아름다운 네비게이션 바를 만드는 방법(자세한 코드 설명)

이전 글 "CSS 팁: 이미지에 마스크를 추가하는 방법(공유)"에서는 CSS를 사용하여 이미지에 마스크를 추가하는 방법을 소개했습니다. 다음 글에서는 HTML로 간단하고 아름다운 네비게이션 바를 만드는 방법을 소개하겠습니다. 도움이 필요한 친구들이 참고하면 좋겠습니다.

얼마 전에 기본을 배운 후(그리고 빨리 잊어버리고) 몇 달 전부터 읽기 시작했습니다. 내 기술을 테스트하고 향상시키기 위해 나만의 웹 페이지를 만들기 시작했지만 탐색 모음을 올바르게 표시하는 데 문제가 있습니다.

내 네비게이션 바의 HTML

코드는 다음과 같습니다:

<div class="nav">
    <ul class="nav">
        <li class="nav"><a class="nav" href="#">Home</a></li>
        <li class="nav"><a class="nav" href="#">Coffee</a></li>
        <li class="nav"><a class="nav" href="#">Food</a></li>
        <li class="nav"><a class="nav" href="#">Catering</a></li>
        <li class="nav"><a class="nav" href="#">About</a></li>
        <li class="nav"><a class="nav" href="#">Contact</a></li>
    </ul>
</div>
<!--Navigation bar.-->

코드 실행 시 첨부된 원본 그림:

내비게이션 스켈레톤이 첨부된 코드 예제가 있는 HTML의 효과

<nav>
    <ul class="navbar">
        <li class="nav-item selected"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">Coffee</a></li>
        <li class="nav-item"><a href="#">Food</a></li>
        <li class="nav-item"><a href="#">Catering</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

<style>
nav{
   position:fixed;
}

.nav-item{
   color: #000;
   border: 1px solid blue;
   background-color: rgba(255, 255, 255, .6 ) 
}

.nav-item:hover
{
        background-color: rgba(0, 255, 255, .6 ) 
}

.selected{
   color: #058;
   border: 1px solid red;
   background-color: rgba(255, 0, 255, .6 ) 
}

렌더링 코드 실행 시 첨부된 사진:

저는 HTML 코드 작성에 있어 완전 초보이기 때문에 잘 못 작성했다면 사과드립니다.

추천 학습: Html 비디오 튜토리얼

위 내용은 HTML을 사용하여 간단하고 아름다운 네비게이션 바를 만드는 방법(자세한 코드 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!