사이트 내 비게 이 션 은 사이트 에서 가장 중요 한 요소 로 사이트 가 사용자 에 게 제공 하 는 가장 직접적 이 고 편리 한 사이트 내용 을 방문 하 는 도구 이다.사이트 내 비게 이 션 은 형식적 으로 가로 내 비게 이 션,세로 내 비게 이 션,하단 및 다단 계 메뉴 내 비게 이 션 의 세 번 째 형식 이다.가로 네 비게 이 션 은 포 털 사이트 의 디자인 으로 볼 때 메 인 네 비게 이 션 은 보통 가로 네 비게 이 션 을 사용한다.포 털 사이트 아래 에 문자 가 많 고 채널 마다 똑 같은 스타일 로 구분 되 기 때문에 상단 에 한 지역 의 디자인 이 통 일 된 스타일 을 고정 시 키 고 공간 을 많이 차지 하지 않 는 네 비게 이 션 이 가장 이상 적 인 선택 이 고 국내 대부분의 포 털 은 이런 형식 을 사용한다.세로 네 비게 이 션 은 현재 포 털 사이트 의 디자인 에서 더 이상 유행 하지 않 고 세로 네 비게 이 션 은 제품 분 류 를 표현 하 는 경향 이 있다.드 롭 다운 네 비게 이 션 은 주로 기능 이 복잡 한 사이트 에 쓰 인 다.어떤 사이트 에서 도 흔히 볼 수 있다.전체적으로 보면 네 비게 이 션 의 핵심 목 표 는 간편 하고 빠 른 조작 입 구 를 설계 하여 사용자 가 사이트 의 해당 내용 에 신속하게 도착 하도록 도와 주 는 것 이다.디자인 에 있어 사이트 유형 과 내용 의 수요 에 따라 합 리 적 인 네 비게 이 션 형식 을 디자인 해 야 한다.여기 서 우 리 는 css 를 사용 하여 자주 사용 하 는 세 가지 네 비게 이 션 형식 을 디자인 하여 css 가 어떻게 이런 스타일 을 실현 하 는 지 볼 것 이다.가로 네 비게 이 션 은 css 구조의 형식 으로 네 비게 이 션 을 만 드 는 것 과 table 구 조 는 큰 차이 가 있다.사 이 트 는 페이지 구 조 를 제외 하고 가장 중요 한 것 은 네 비게 이 션 부분 이다.이 단계 에서 간단 하고 명쾌 한 네 비게 이 션 시스템 을 만 든 다음 에 한 걸음 한 걸음 계획 효 과 를 가 진 최종 네 비게 이 션 을 완성 해 야 한다.여기 서 우 리 는 먼저 상단 의 초급 디자인 스타일 을 구상 하고 네 비게 이 션 은 가로 네 비게 이 션 형식 이다.css 의 네 비게 이 션 제작 을 시작 하기 전에 전통 적 인 표 형식 일 뿐 인 네 비게 이 션 제작 을 회상 해 보 자.표 형식 이 그림 과 같은 네 비게 이 션 형식 을 실현 하려 면 표 table 을 설계 해 야 합 니 다.네 비게 이 션 은 현재 모두 7 개의 항목 으로 구성 되 어 있 습 니 다.1 줄 7 열의 표를 설계 하고 각 단원탭 에 네 비게 이 션 문 자 를 삽입 한 다음 각 칸 의 텍스트 를 가운데 로 놓 아야 합 니 다.실현 코드 를 볼 수 있 습 니 다. 프로그램 코드---[WWW.AA25.CN]
홈 페이지 DIV+CSS 튜 토리 얼 상용 코드 수정 아이콘 슬라이드 사진 소프트웨어 다운로드 CSS 2.0 실 용 매 뉴 얼 는 코드 를 통 해 볼 수 있 습 니 다.표 의 너비 와 높이 를 설정 하고 경계선 의 거 리 를 0 으로 설정 하여 표 선 을 숨 기 고 첫 번 째 칸 의 텍스트 정렬 방식 을 가운데 로 하면 간단 한 내 비게 이 션 을 실현 합 니 다.여기 서 요점 은 안내 형식 과 유사 한 데이터 표를 설계 하여 내 비게 이 션 을 모든 칸 의 데이터 에서 교류 하 는 것 입 니 다.css 로 같은 네 비게 이 션 시스템 을 어떻게 설계 하 는 지 다시 한 번 살 펴 보 자.DIV+CSS 레이아웃 의 핵심 은 표현 과 내용 의 분 리 를 실현 하 는 것 입 니 다.먼저 내용 부분의 코드 작성 방식 을 알 아 보 겠 습 니 다. 프로그램 코드---[WWW.AA25.CN] 홈 페이지 DIV+CSS 튜 토리 얼 상용 코드 수정 아이콘 슬라이드 사진 소프트웨어 다운로드 CSS 2.0 실 용 매 뉴 얼 이 코드 는 새로운 요소 인 l 을 사 용 했 습 니 다.탐색 하기 전에 l 요 소 를 간략하게 알 아 보 세 요.l 은 css 일 뿐 광범 위 하 게 사용 되 는 요 소 는 주로 목록 형 내용 을 묘사 하 는 데 사 용 됩 니 다.모든은 그 내용 이 하나의 목록 블록 임 을 나타 내 고 블록 중의 모든 목록 데 이 터 는로 설명 합 니 다.어떠한 스타일 도 추가 하지 않 은 l 의 구현 효 과 를 볼 수 있 습 니 다.그림 에서 보 듯 이 목록 형 내용 으로서 ul 기본 스타일 은 원점 모양 의 번 호 를 올 렸 고 기본 값 은 위 에서 아래로 배열 되 었 습 니 다.왜 우리 의 네 비게 이 션 시스템 은 얼 요 소 를 사용 해 야 합 니까?실제 네 비게 이 션 도 리스트 입 니 다.네 비게 이 션 리스트 로 이해 할 수 있 습 니 다.모든 리스트 데 이 터 는 네 비게 이 션 의 네 비게 이 션 채널 입 니 다.마찬가지 로 2 층 에 포 함 된 div 를 사용 하여 네 비게 이 션 의 코드 구 조 를 실현 할 수 있 습 니 다.그러나 ul 리스트 에 비해 div 는 너무 복잡 해 보 입 니 다.ul 의 사용 은 블록 형 구역 에 중심 을 두 어야 합 니 다.그리고 간단 한 것 은 문자 의 네 비게 이 션 만 있 으 면 얼 은 더욱 가 볍 고 유연 하 다.코드 에서 도 우 리 는 얼 에 게 nav 라 는 id 를 정 의 했 습 니 다.그 다음 에 이 얼 과 그 아래 의 대상 을 위해 코드 를 작성 하여 필요 한 네 비게 이 션 효 과 를 실현 하도록 합 니 다.첫 번 째 스타일 을 ul 아래 li 대상 에 게 작 성 했 습 니 다.목록 의 모든 목록 항목 이 기본 적 인 위 에서 아래로 배열 되 지 않 기 를 바 랍 니 다.따라서\#nav 에 게 li 는 foat:left 를 지정 합 니 다.div 의 foat:left 와 같은 속성;마찬가지 로 유동 포 지 셔 닝 의 원 리 를 통 해 자신 을 왼쪽으로 움 직 이게 하고 다음 대상 을 이 대상 의 오른쪽 에 붙 이게 한다.마지막 으로 모든 li 는 왼쪽으로 움 직 이 는 나 를 가지 고 가로의 배열 형식 을 가진다.네 비게 이 션 의 관건 은 a 링크 대상 의 스타일 제어 입 니 다.여기 서\#nav 를 사용 합 니 다. li a{}li 아래 의 모든 a 링크 대상 에 게 스타일 을 작 성 했 습 니 다.display:block 은 여기 의 중점 입 니 다.a 링크 대상 의 디 스 플레이 방식 을 텍스트 에서 블록 대상 으로 바 꾸 었 습 니 다.idv 의 특성 과 같 습 니 다.div 기본 상태 에서 블록 대상 입 니 다.a 링크 대상 의 기본 상태 에서 일반 텍스트 입 니 다.이렇게 하면 a 링크 대상 이 사각형 단추 처럼 동작 할 수 없 게 됩 니 다.display:block 을 사용 한 후에 a 링크 대상 은 div 와 다른 요소 처럼 블록 대상(block)이 될 수 있 습 니 다.css 외부 거리,내부 거리 등 속성 을 사용 하여 a 링크 태그 에 일련의 스타일 을 추가 할 수 있 습 니 다.display:block 의 응용 을 통 해 우 리 는 a 태그 요 소 를 너비:97px,높이:22px 를 가지 게 하고 모든 a 사이 에 margin-left:2px 를 사용 합 니 다.왼쪽 의 바깥쪽 거 리 는 2px 입 니 다.display 속성 은 css 에서 대상 디 스 플레이 모드 작업 에 대한 속성 입 니 다.주로 전문 원고 로 대상 을 표시 하 는 방식 입 니 다.css 에서 모든 대상 은 자신의 기본 적 인 디 스 플레이 방식 을 가지 고 있 습 니 다.예 를 들 어 a 와 span 등 대상 은 기본적으로 점심 내 연결 대상 입 니 다.표시 할 때 다른 대상 의 디 스 플레이 에 영향 을 주지 않 습 니 다.예 를 들 어 span 을 사용 한 후에span 이후 의 내용 은 자동 으로 span 의 오른쪽 에 있 습 니 다.텍스트 처럼 div 와 같은 대상 의 기본 값 은 블록 돌격 총 으로 표 시 됩 니 다.기본 상태 에서 한 줄 의 공간 을 차지 하고 광장 처럼 페이지 에 표 시 됩 니 다.display:block 을 통 해 a 도 블록 대상 으로 만 들 었 습 니 다.또한,display 는 앞으로 도 많은 사용 방식 을 알 게 될 것 입 니 다. [Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]미리 보기 효 과 는 내 비게 이 션 모양 이지 만 마 우 스 를 올 려 도 응답 이 없어 사용자 체험 에 매우 우호 적 이지 않 습 니 다.따라서 상호작용 피드백 이 있 는 조작 을 통 해 사용자 대상 이 클릭 할 수 있 음 을 알려 야 합 니 다.\#nav li a:hover { background-color:#bbbbbb; color:#ffffff;} 이번 미리보기 효 과 는 마우스 로 채널 을 옮 겨 서 응답 이 나 왔 습 니 다.그러면 우리 의 내 비게 이 션 은 이미 훨씬 우호 적 으로 변 했 습 니 다. [Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]초급 네 비게 이 션 모듈 이 완성 되 었 습 니 다.표 형식 레이아웃 과 css 를 사용 하 는 것 만 비교 해 보 세 요.이 방면 의 우열 을 보면 css 의 장점 이 분명 합 니 다."주:이 절 부터 구체 적 이 고 상세 한 제작 절 차 를 쓰 지 않 습 니 다.그 중의 부분 에 대해 잘 모 르 면 이 절 에 메 시 지 를 남 길 수 있 습 니 다.css 에 익숙 하지 않 은 친구 에 대해 서 는 앞의 몇 절 을 복습 하 는 것 을 권장 합 니 다.평소에 dream weaver 로 인 스 턴 스 를 많이 하면 점점 파악 할 수 있 습 니 다.
