찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >HTML에서 탭바를 구현하는 여러 방법

HTML에서 탭바를 구현하는 여러 방법

小云云
小云云원래의
2017-12-11 11:33:354038검색

HTML에는 태그가 많이 사용됩니다. 이 글에서는 태그 막대의 여러 구현 방법을 권장합니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.

탭 페이지: 카테고리 + 설명

탭 바: 카테고리=> 사용자가 현재 어디에 있고 어디로 가는지 알 수 있도록 합니다.

1. CSS 명명 방법:


XML/HTML 코드클립보드에 콘텐츠 복사


  1. <p class="service-tabs service-tabs1">


  3. 　<ul class="service-tabs-inner">

  4. 　　　="on"> <a href="#nogo">Followa>li& gt; 　& gt;

    5. < /

  5. li>　　 <li><a href="#nogo" >내비게이션 a>

    6. li>　　　<li>< a href="#nogo " >쇼핑a>

    li>　 ul > p>


  7. 탭

    8. 장점: 1. 검색 용이 2. SEO 표준 준수

  8. 2. 레이아웃 방법: 1.

    • 1) float: 클리어 플로트 오버플로:hidden;/pseudo-class:after/
      • 2) 표시: inline -block IE7은 호환되지 않습니다: *display:inline;*zoom:1; 공백 간격: 글꼴 크기:0;/같은 줄/여백 음수 값/letter-spacing

    • 2.


      3. 템플릿 코드:


      1. 마우스 오버 시 배경색 추가

      CSS Code클립보드에 콘텐츠 복사



      .service-tabs li a{

      너비

      : 160px;height:

      80px

      ;
      display

      :

      block
      ;

      color

      :#666;font-size:

      32px

      ;}

    • .service-tabs1 li a:hover{color:#2CC185;}

      :
      • #fff
    • ;}

      /*배경*/

      • 2. 작은 삼각형, 당연함


      CSS 코드

      클립보드에 콘텐츠 복사


      .service-tabs4 li{position:

      relative

      ;}

      1. .service -tabs4 li a:hover{

        color:#2CC185;}

      2. .service -tabs4 li.on a{

        background-color:#2CC185;color

        :
        3. #fff
      3. ; }

        .service-tabs4 li i{width:11px; height

        :
        4. 7px
      4. ;

        position:absolute;bottombottom:-6px ;왼쪽 :76px; background:url(images/arrow.png) ;display 3. 밑줄 CSS Code콘텐츠를 클립보드에 복사

      5. .service -tabs2 li a:hover{color:#2CC185;}

      .service-tabs2 li.on a{
      height

      :

      78px;

      border-bottom

      :

      2px


      solid

      #2CC185;color:#2CC185

      ;}


      2. 4. 스크립트 구현

        JavaScript 코드콘텐츠를 클립보드에 복사 $(

        function
        3. (){ $(
      ".service-tabs ul li"

      ).click(
      function

      () { $(

      this).addClass(

      "on"

      ) .siblings().removeClass(

      "on"

      ); }); })

      은 간단하고 실용적이어서 누구나 배울 수 있습니다. 서둘러 손을 더럽히십시오.

      관련 권장 사항:

      html img 태그 사용 방법


      HTML5 새 태그

      1. html 일반적으로 사용되는 형식 표시 태그

      위 내용은 HTML에서 탭바를 구현하는 여러 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

      성명：
      본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
      이전 기사：HTML 텍스트 형식에 대한 지식을 소개하는 예다음 기사：HTML 텍스트 형식에 대한 지식을 소개하는 예

      관련 기사

      더보기