세로 네 비게 이 션 메뉴 도 사이트 응용 에서 중요 한 형식 이다.세로 네 비게 이 션 메뉴 란 웹 페이지 왼쪽 이나 오른쪽 에 놓 인 위 에서 아래로 배열 하 는 네 비게 이 션 형식 을 말한다.일단 효 과 를 볼 게 요!
그림 에서 보 여 준 효과 와 같이 코드 구 조 를 먼저 살 펴 보 겠 습 니 다.위 에서 보 듯 이 이번 XHTML 부분의 코드 가로 코드 는 약간 다 릅 니 다.우 리 는 ul 과 li 라벨 을 계속 사용 하지 않 았 습 니 다.사실은 ul 요 소 를 계속 사용 해도 수직 네 비게 이 션 시스템 을 잘 실현 할 수 있 습 니 다.그러나 이 풍경 에서 우 리 는 서로 다른 경 로 를 제공 하여 css 를 보 여 주 기 를 바 랄 뿐이다.디자인 의 유연성 과 편리 성 은 벽돌 을 던 져 옥 을 끌 어 올 리 고 더 많은 디자인 사상 을 개척 할 수 있 도록 한다.이번 에는 div+h1+h2 형식 을 사용 합 니 다.우 리 는 div 탭 을 사용 하여 내 비게 이 션 의 구조 영역 을 설정 했다.이 구역 에서 우 리 는 h1 을 사용 하여 2 급 분류의 제목 을 만 들 었 고 h2 는 2 급 분류 아래 의 세부 내용 을 만 들 었 다.XHTML 의 설법 적 의미 에서 h1,h2,h3 이런 라벨 자체 가 텍스트 에 대해 등급 을 나 누 는 의 미 를 가진다.h1,h2 를 직접 사용 하여 등급 관 계 를 나타 낸다.라벨 에 id 나 class 를 넣 어 등급 을 나 누 는 것 보다 더욱 간단 하고 직관 적 이다.여기 서 h1,h2 를 사용 하여 서로 다른 등급 의 분류 명칭 을 표시 하 는 것 도 매우 적합 하 다.css 코드 의 디자인 을 살 펴 보 겠 습 니 다.\#nav{width:100 px;border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;}#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;}#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;}#nav h2 a { color:#666666; text-decoration:none;}#nav h2 a:hover { color:#999999; text-decoration:underline;}이 css 코드 부분 은 간단 한 쓰기 방법 을 사 용 했 습 니 다.만약 에 어떤 뜻 을 알 아 볼 수 없다 면 Dreamweaver 에서 편집 스타일 시트 를 선택 하면 구체 적 으로 어떤 것 인지 볼 수 있 습 니 다.이런 몇 번 의 연습 을 통 해 이 코드 들 을 완전히 이해 할 수 있 을 것 이 라 고 믿 습 니 다.이 는 높 은 손 에서 한 걸음 더 가 까 워 졌 다 는 것 을 설명 합 니 다.\#nav 의 테두리 이 예 에 서 는 좌우 아래 와 1 픽 셀 만 설정 되 어 있 고 위 가 없 으 며 h1 스타일 에 상단 픽 셀 을 설정 하 였 습 니까?왜 그 럴 까요?h1 의 스타일 은 상부 에 모두 횡선 이 있 기 때문에 nav 상부 에 횡선 이 하나 더 있 으 면 두 개 성장 한 결과 두 픽 셀 의 높이 로 나 타 났 다.자,완전한 효 과 는 미리 볼 수 있 습 니 다.