CSS에서 그림자를 사용하여 1단계 탐색을 구현하는 방법

아름다운 탐색 기능으로 웹사이트를 마무리할 수 있습니다. 탐색은 사용자가 콘텐츠를 검색하도록 안내할 때 웹 사이트를 탐색할 때 사용자의 기분을 바꿀 수도 있습니다. 창의적인 탐색 표시줄은 사용자가 웹 사이트를 더 즐겁게 즐길 수 있게 하고 웹 사이트에 대한 관심을 높여줍니다.

나는 예술 작품 제작에 능숙하지 않지만 일부 아름다운 웹 사이트에서 좋은 부분을 추출하여 나만 사용하고 다른 사람들과 공유할 수 있습니다. 오늘은 모두가 함께 배울 수 있는 하늘색 내비게이션을 준비했습니다.

먼저 최종 효과를 살펴보겠습니다.



1단계: p를 탐색의 주요 부분으로 배치합니다.

<p class="userPlaceMain"></p>

스타일 작성:

.userPlaceMain 
{
    clear: both;
    width:1200px
    height: 50px;
    line-height: 50px;
    background: #0090CE;
    padding: 0 20px;
    color: White;
    -moz-box-shadow: 5px 5px 10px #B7B7B7;
    box-shadow: 5px 5px 10px #B7B7B7;
}

참고: 여기-moz-box-shadow: 5px 5px 10px #B7B7B7; 이때 탐색 효과는 다음과 같습니다.

2단계 : 탐색 링크 콘텐츠 배치

여기에서 ul li 순서가 지정되지 않은 목록을 사용하세요

<ul>
     <li><a id="userPlaceId_1" href="http://xunwn.com/1010100" class="userPlaceMainUlLiHover">主页</a>|</li>
     <li><a id="userPlaceId_2" href="http://xunwn.com">形象展示</a>|</li>
     <li><a id="userPlaceId_3" href="http://xunwn.com/photo/1010100">产品展示</a></li></ul>

이제 필요합니다. Float ul li를 왼쪽으로, 사용: float:left

.userPlaceMain ul li {
    float: left;
    margin-right: 10px;
}

내비게이션 효과는 다음과 같습니다.

최종 효과에서 멀지 않은 곳에, 링크 텍스트 너비, 배경, 및 간격

2단계: 링크 텍스트 너비, 배경 및 간격 설정



a 태그는 인라인 태그이므로 설정해야 하는 경우 너비를 에서 처리해야 합니다. 다른 방법으로는 display:inline-block을 사용하여 너비를 설정할 수 있습니다

.userPlaceMain ul li a 
{
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    color: White;
    display: inline-block;
    width: 100px;
    height: 100%;
    font-size: 15px;
    text-align: center;
    margin-right: 10px;
}

참고:

text-shadow: 0 1px 0 rgba(0, 0, 0,0.3); 텍스트에 그림자를 추가하는 것입니다. 이때 탐색 효과는 다음과 같습니다.

이제 효과가 훨씬 좋습니다. 마지막으로 남은 단계는 Navigationmousesliding Style

입니다. 3단계: 탐색 마우스 슬라이딩 스타일 설정


두 가지 방법이 있습니다. 하나는 CSS 의사 클래스 선택기를 직접 사용하는 것입니다. ; 둘: 링크 텍스트 CSS 스타일을 제어하기 위한 javascript 또는 juqery, 여기서 사용됨 첫 번째는 더 쉽습니다

.userPlaceMain ul li a:hover{background: #0074A6;color:White; }

최종 효과는 다음과 같습니다.

위 내용은 CSS에서 그림자를 사용하여 1단계 탐색을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!