HTML에는 태그가 많이 사용됩니다. 이 글에서는 태그 막대의 여러 구현 방법을 권장합니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.
탭 페이지: 카테고리 + 설명
탭 바: 카테고리=> 사용자가 현재 어디에 있고 어디로 가는지 알 수 있도록 합니다.
1. CSS 명명 방법:
XML/HTML 코드클립보드에 콘텐츠 복사
-
<p class="service-tabs service-tabs1">
-
<ul class="service-tabs-inner">
="on"> <a href="#nogo">Followa>li& gt; & gt;
li> <li><a href="#nogo" >내비게이션 a>
li> <li>< a href="#nogo " >쇼핑a>
li> ul > p>
탭
-
2. 레이아웃 방법: 1.
1) float: 클리어 플로트 오버플로:hidden;/pseudo-class:after/ 2) 표시: inline -block IE7은 호환되지 않습니다: *display:inline;*zoom:1; 공백 간격: 글꼴 크기:0;/같은 줄/여백 음수 값/letter-spacing2.
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;}
- .service -tabs4 li a:hover{
color:#2CC185;}
- .service -tabs4 li.on a{
background-color:#2CC185;color
: #fff- ; }
.service-tabs4 li i{width:11px; height
: 7px- ;
position:absolute;bottombottom:-6px ;왼쪽 :76px; background:url(images/arrow.png) ;display 3. 밑줄 CSS Code콘텐츠를 클립보드에 복사
.service -tabs2 li a:hover{color:#2CC185;}
.service-tabs2 li.on a{
height
:78px
;
border-bottom:
2px
solid
#2CC185;color:#2CC185
;}
- 4. 스크립트 구현
JavaScript 코드콘텐츠를 클립보드에 복사 $(
function (){ $(
".service-tabs ul li").click(
function
() { $(this
).addClass(
"on") .siblings().removeClass(
"on"); }); })
은 간단하고 실용적이어서 누구나 배울 수 있습니다. 서둘러 손을 더럽히십시오.
관련 권장 사항: html img 태그 사용 방법
HTML5 새 태그
html 일반적으로 사용되는 형식 표시 태그
위 내용은 HTML에서 탭바를 구현하는 여러 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
2023-03-19 18:36:02
-
2023-03-21 07:36:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
2023-03-20 14:32:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
