CSS 및 이미지가없는 탭이있는 탐색을 만드는 방법

01 / 06

CSS 및 이미지가없는 탭이있는 탐색을 만드는 방법

CSS 3 탭 메뉴. J Kyrnin의 스크린 샷

웹 페이지의 탐색은 목록의 한 형태이며 탭이있는 탐색은 가로 목록과 같습니다. CSS로 가로 방향의 탭 네비게이션을 만드는 것은 상당히 쉽지만, CSS 3 은 더 멋지게 보이게하는 몇 가지 도구를 제공합니다.

이 자습서는 CSS 탭 메뉴를 만드는 데 필요한 HTML과 CSS를 안내합니다. 링크가 어떻게 표시되는지 보려면 해당 링크를 클릭하십시오.

이 탭 메뉴는 이미지를 사용 하지 않고 HTML과 CSS 2 및 CSS 3 만 사용합니다. 탭을 더 추가하거나 텍스트를 변경하기 위해 쉽게 편집 할 수 있습니다.

브라우저 지원

이 탭 메뉴는 모든 주요 브라우저 에서 작동 합니다 . 인터넷 익스플로러는 둥근 모서리를 보여주지 않을 것이지만 그렇지 않으면 파이어 폭스, 사파리, 오페라, 크롬과 같은 탭을 보여줄 것이다.

02 of 06

메뉴 목록 작성

모든 탐색 메뉴와 탭은 실제로 정렬되지 않은 목록입니다. 따라서 가장 먼저 수행 할 작업은 탭이있는 탐색을 원하는 위치에 링크의 순서가 지정되지 않은 목록을 작성하는 것입니다.

이 튜토리얼은 텍스트 편집기에서 HTML을 작성 중이며 웹 페이지에서 HTML에 대한 HTML 배치 위치를 알고 있다고 가정합니다.

다음과 같이 정렬되지 않은 목록을 작성하십시오.

03 / 06

스타일 시트 편집 시작

외부 스타일 시트 또는 내부 스타일 시트를 사용할 수 있습니다. 샘플 메뉴 페이지는 문서의 에 내부 스타일 시트를 사용합니다.

우선 우리는 UL 자체를 스타일링 할 것입니다.

여기서는 HTML에서 클래스 tablist를 사용합니다. 페이지의 모든 정렬되지 않은 목록을 스타일링하는 UL 태그의 스타일링보다는 UL 클래스의 스타일을 지정해야합니다. tablist 그러면 CSS의 첫 번째 항목은 다음과 같아야합니다.

.tablist {}

나는 끝내 중괄호 (})를 미리 넣고 싶다. 그래서 나는 나중에 잊지 않는다.

탭 메뉴 목록에 정렬되지 않은 목록 태그를 사용하고 있지만 글 머리 기호 나 숫자가 들어오는 것을 원하지 않습니다. 따라서 추가해야하는 첫 번째 스타일이 있습니다. 목록 스타일 : 없음; 이는 목록 인 동안 미리 결정된 스타일 (글 머리 기호 또는 숫자와 같은)이없는 목록임을 브라우저에 알려줍니다.

그런 다음 목록의 높이를 채우려는 공간과 일치하도록 설정할 수 있습니다. 필자는 표준 높이의 글꼴을 2 배로 선택 했으므로 표준 글꼴 크기의 두 배가되고 탭의 텍스트 위와 아래에는 약 절반 정도의 글꼴이 있습니다. 높이 : 2em; 그러나 원하는 크기로 너비를 설정할 수 있습니다. UL 태그는 너비의 100 %를 자동으로 차지하므로 현재 컨테이너보다 작게 만들지 않으려면 너비를 그대로 둘 수 있습니다.

마지막으로, 마스터 스타일 시트 에 UL 및 OL 태그에 대한 사전 설정이없는 경우이를 넣어야합니다. 즉, UL에서 테두리, 여백 및 패딩을 해제해야합니다. 패딩 : 0; 여백 : 0; 국경 : 없음; 이미 UL 태그를 재설정 한 경우 여백, 여백 또는 테두리를 디자인에 적합한 것으로 변경할 수 있습니다.

마지막 .tablist 클래스는 다음과 같아야합니다.

.tablist {list-style : none; 높이 : 2em; 패딩 : 0; 여백 : 0; 국경 : 없음; }

04 / 06

LI 목록 항목 편집하기

정렬되지 않은 목록의 스타일을 지정했으면 그 안에 LI 태그의 스타일을 지정해야합니다. 그렇지 않으면, 그들은 표준 목록처럼 행동하고 각 탭을 올바르게 배치하지 않고 다음 줄로 이동합니다.

먼저 스타일 속성을 설정합니다.

.tablist li {}

그런 다음 탭을 수평면에 일렬로 정렬되도록 놓으십시오. 왼쪽으로 뜨다;

탭 사이에 여백을 추가하는 것을 잊지 마십시오. 따라서 병합되지 않습니다. margin-right : 0.13em;

li 스타일은 다음과 같아야합니다.

.tablist li {float : left; margin-right : 0.13em; }

05/06

CSS 3으로 탭처럼 보이게하기

이 스타일 시트에서 대부분의 어려운 작업을 수행하기 위해 정렬되지 않은 목록 내의 링크를 대상으로합니다. 브라우저는 링크가 다른 태그보다 웹 페이지에서 더 많은 일을한다는 것을 인식하므로 앵커 태그 (링크)에 연결하면 마우스 오버 상태와 같은 것들을 따르기가 쉽습니다. 먼저 스타일 속성을 작성하십시오.

.tablist li a {} .tablist li a : hover {}

이러한 탭은 응용 프로그램에서 탭처럼 작동해야하기 때문에 링크 된 텍스트뿐 아니라 탭의 전체 영역을 클릭 할 수 있어야합니다. 이렇게하려면 A 태그를 정상 " 인라인 "상태에서 블록 요소 로 변환해야합니다. 디스플레이 : 블록; 차이점에 대해 더 알고 싶다면 Block-Level vs. Inline Elements를 읽으십시오.

그런 다음 탭이 서로 대칭이되도록 강제하는 쉬운 방법이지만 텍스트의 너비에 맞게 조정하는 것은 오른쪽과 왼쪽 패딩을 동일하게 만드는 것입니다. 패딩 단축형 속성을 사용하여 위쪽과 아래쪽을 0으로 설정하고 오른쪽과 1을 1em으로 설정했습니다. 패딩 : 0 1em;

또한 링크 밑줄을 제거하여 탭이 링크처럼 보이지 않게했습니다. 그러나 청중이 혼란 스러울 수 있다면이 줄을 생략하십시오. 링크 장식 : 없음;

탭 주위에 얇은 테두리를 넣으면 탭처럼 보입니다. 국경 속기 속성을 사용하여 모든 네면 테두리에 테두리를 둡니다. 0.06em solid # 000; 그런 다음 border-bottom 속성을 사용하여 바닥 에서 제거합니다. border-bottom : 0;

그런 다음 탭의 글꼴, 색상 및 배경색을 약간 조정했습니다. 귀하의 사이트와 일치하는 스타일로 설정하십시오. 글꼴 : 굵게 0.88em / 2em arial, 제네바, 헬 베티 카, 산 세리프; 색상 : # 000; 배경색 : #ccc;

위의 모든 스타일은 일반적으로 앵커 태그에 영향을 미치도록 규칙 .tablist li a에 있어야합니다. 그런 다음 탭을 클릭 할 수있게 표시하려면 .tablist li a : hover라는 몇 가지 상태 규칙을 추가해야합니다.

그 위에 마우스를 가져 가면 텍스트와 배경의 색상을 변경하여 탭이 튀어 나오게합니다. 배경 : # 3cf; color : #fff;

그리고 브라우저에 링크에 밑줄이 표시되지 않도록하려는 또 다른 알림을 포함 시켰습니다. 텍스트 장식 : 없음; 다른 일반적인 방법은 탭 위로 마우스를 가져 가면 밑줄을 다시 켜는 것입니다. 그렇게하고 싶으면 텍스트 장식 : 밑줄로 변경하십시오.

그러나 CSS 3는 어디에 있습니까?

주의를 기울 였다면 스타일 시트에 CSS 3 스타일이 사용되지 않았을 것입니다. 이것은 Internet Explorer를 포함한 모든 최신 브라우저에서 작업 할 수 있다는 장점이 있습니다. 하지만 탭을 사각형 상자 이상으로 보이게하지는 않습니다. border-radius라는 CSS 3 스타일의 호출을 추가하면 가장자리가 둥글게되어 마닐라 폴더의 탭처럼 보이게 할 수 있습니다.

.tablist li 규칙에 추가해야하는 스타일은 다음과 같습니다. -webkit-border-top-right-radius : 0.50em; -webkit-border-top-left-radius : 0.50em; -moz-border-radius-topright : 0.50em; -moz-border-radius-topleft : 0.50em; border-top-right-radius : 0.50em; border-top-left-radius : 0.50em;

다음은 내가 작성한 최종 스타일 규칙입니다.

.tablist li a {display : block; 패딩 : 0 1em; 텍스트 장식 : 없음; 국경 : 0.06em 고체 # 000; border-bottom : 0; 글꼴 : 굵게 0.88em / 2em arial, 제네바, 헬 베티 카, 산 세리프; 색상 : # 000; 배경색 : #ccc; / * CSS 3 요소 * / webkit-border-top-right-radius : 0.50em; -webkit-border-top-left-radius : 0.50em; -moz-border-radius-topright : 0.50em; -moz-border-radius-topleft : 0.50em; border-top-right-radius : 0.50em; border-top-left-radius : 0.50em; } .tablist li a : hover {background : # 3cf; color : #fff; 텍스트 장식 : 없음; }

이러한 스타일을 사용하면 모든 주요 브라우저에서 작동하고 CSS 3 호환 브라우저에서 멋진 인쇄 탭처럼 보이는 탭 메뉴를 사용할 수 있습니다. 다음 페이지는 더 많은 옷을 입기 위해 사용할 수있는 옵션이 하나 더 있습니다.

06 년 6 월

현재 탭 강조 표시

내가 만든 HTML에서 UL에는 ID가있는 하나의 목록 요소가있었습니다. 이렇게하면 하나의 LI에 나머지 스타일을 부여 할 수 있습니다. 가장 일반적인 상황은 현재 탭을 어떤 식 으로든 두드러지게 만드는 것입니다. 이것을 생각하는 또 다른 방법은 라이브가 아닌 탭을 회색으로 표시하는 것입니다. 그런 다음 ID가 다른 페이지의 위치를 ​​변경합니다.

#current A 태그뿐만 아니라 #current A : hover sta 스타일을 사용하여 두 가지가 약간 씩 다른 스타일을 만듭니다. 해당 요소의 색상, 배경색, 높이, 너비 및 채우기도 변경할 수 있습니다. 디자인에 어떤 변경 사항이든 적용하십시오.

.tablist li # 현재 a {배경색 : # 777; color : #fff; } .tablist li # 현재 a : 호버링 {배경 : # 39C; }

그리고 너 끝났어! 방금 웹 사이트 용 탭 메뉴를 만들었습니다.