CSS 탐색 모음

네비게이션

모든 웹 사이트에 대한 숙련 된 사용 탐색은 매우 중요합니다.

CSS로 대신 지루한 HTML 메뉴의 좋은 탐색 모음으로 변환 할 수 있습니다.

탐색 목록을 링크 =

표준 HTML 기반의 네비게이션 바는 필수입니다으로

. 우리의 예에서 우리는 표준 HTML 목록 탐색 모음을 만듭니다.

탐색 바는, 기본적으로 링크 목록 그래서 사용 <UL>과 <리> 요소는 매우 의미가있다 :

이제 목록에서 마진과 패딩을 제거 할 수 :

분석의 예 :

• 목록 스타일 타입 : 없음 - 작은 플래그의 목록을 제거하기 전에. 네비게이션 바는 목록 마커를 필요로하지 않는다
• 0 브라우저의 기본 설정 마진 및 패딩 세트를 제거

위의 예제 코드는 사용되는 표준 수직 및 수평 탐색 바코드입니다.

수직 탐색 모음

위의 코드, 우리는 수직 탐색 모음을 수립, <A> 스타일 요소가 필요합니다 :

예를 보여줍니다 :

• 디스플레이 : 블록 - 전체가 우리가 폭을 지정할 수있는 클릭 가능한 링크 영역 (뿐만 아니라 텍스트)이되도록 디스플레이는 블록 요소를 연결
• 폭 : 60 픽셀 - 기본적으로 블록 요소는 최대 폭이다. 우리는 60 픽셀의 폭을 지정하려면

팁 :보기 완벽한 스타일의 수직 탐색 모음의 예를 .

참고 : 수직 탐색 바 <A>의에서 요소의 너비를 지정해야합니다.당신이 폭을 생략하면, IE6 예기치 않은 결과를 생성 할 수 있습니다.

수평 탐색 모음

가로 방향 탐색 메뉴를 생성하는 방법은 두 가지가 있습니다.인라인 또는 부동목록 항목을 사용합니다.

두 가지 방법 모두 잘하지만 같은 크기로 연결하려는 경우, 당신은 부동 방법을 사용해야합니다.

인라인 목록 항목

가로 방향 탐색 메뉴를 구축하는 하나 지정하는 것입니다