CSS에서 탐색 표시줄을 수정하는 방법-CSS 튜토리얼-php.cn

CSS에서 탐색 표시줄을 수정하는 방법

WBOY

풀어 주다： 2021-11-12 10:33:38

원래의

7893명이 탐색했습니다.

CSS에서는 위치 속성을 사용하여 탐색 모음을 수정할 수 있습니다. 고정된 위치를 지정하려면 탐색 모음 요소에 "위치: 고정;" 스타일만 추가하면 됩니다. 고정 위치 지정은 요소가 창의 특정 위치에 고정되도록 하며 창을 스크롤하더라도 이동하지 않고 창의 다른 요소에 영향을 주지 않습니다.

CSS에서 탐색 표시줄을 수정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 내비게이션 바 수정 방법:

1. HTML 부분:

페이지 이동 효과가 필요하므로 ul 태그를 생성하고, 태그를 삽입해야 합니다. li 태그, 탐색 내용을 a 태그에 씁니다. 마지막으로 div를 생성하고 div 높이를 1500px로 설정합니다. 스크롤 막대를 밀 때 탐색 막대의 위치를 관찰하는 것이 편리합니다. 구체적인 코드는 다음과 같습니다.

<ul>
   <li><a class="active" href="#home">首页</a></li>
   <li><a href="#news">新闻动态</a></li>
   <li><a href="#contact">联系我们</a></li>
   <li><a href="#about">关于我们</a></li>
</ul>   
<div style="background-color:pink;height:1500px;"></div>

로그인 후 복사

2 기본 프레임워크. 이제 CSS를 사용하여 페이지를 아름답게 만들고, float: left를 사용하여 정렬되지 않은 목록을 왼쪽으로 띄우고 행으로 정렬하고, Padding을 사용하여 탐색 사이의 간격을 조정하고, hover 의사 클래스 선택기를 사용하여 설정합니다. 마우스 호버 효과는 마우스가 탐색을 통과하면 빨간색으로 나타나고 탐색이 활성화되면 노란색으로 나타납니다.

가장 중요한 단계는 페이지 상단의 탐색 모음을 수정하는 것입니다.

속성을 사용하여 고정 위치 지정 요소를 생성하고 브라우저 창을 기준으로 위치를 지정합니다. 그런 다음 상단과의 거리를 0(예: 상단: 0)으로 설정하면 상단에 고정된 탐색이 준비됩니다. 자세한 코드는 다음과 같습니다.

<style type="text/css">
    *{margin:0;padding: 0;}
   ul{
       list-style-type: none;
       overflow: hidden;
       background-color: #333;
       position: fixed;
       top: 0;
       width: 100%;
   }  
   li {
       float: left;
   }   
   li a {
       display: block;
       color: white;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
   }   
   li a:hover:not(.active) {
       background-color: red;
   }   
   .active {
       background-color: yellow;
   }
</style>

로그인 후 복사

position: fixed 실제 효과를 살펴보겠습니다.

CSS에서 탐색 표시줄을 수정하는 방법 마우스 뒤를 슬라이딩할 때: