CSS 웹 페이지 레이아웃 소개 튜토리얼 12: 수직 탐색 메뉴_기본 튜토리얼

纵向导航菜单也是网站应用中的一种重要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。先看一下效果吧！

如图所示的效果，我们先看一下代码结构：

    

CSS

        

css入门

        

css进阶

        

css高级

    

webUI

        

理论知识

        

实战应用

        

高级技巧

    

DOM

        

DOM入门

        

DOM应用

        

DOM与浏览器

    

XHTML

        

参考手册

        

交流论坛

위에서 볼 수 있듯이 이번에는 XHTML 부분의 가로 코드가 약간 다릅니다. 실제로는 세로 탐색 시스템을 계속 사용합니다. ul 요소를 계속 사용하면 완전히 실현될 수 있지만, 이 경치 좋은 곳에서는 CSS 디자인의 유연성과 편리함을 보여주고 더 많은 디자인 아이디어에 영감을 줄 수 있는 더 다양한 방법을 제공하기를 바랍니다.
이번에는 div+h1+h2 형식입니다. 탐색 구조 영역을 설정하기 위해 div 태그를 사용합니다. 이 영역에서는 h1을 2차 분류의 제목으로, h2를 2차 분류 이하의 세부사항으로 사용합니다. XHTML의 의미에서 h1, h2, h3 태그 자체는 텍스트를 계층적으로 구분한다는 의미를 가지고 있는데, h1과 h2를 직접 사용하여 계층적 관계를 표현하는 것은 태그에 id나 class를 추가하여 계층적 관계를 만드는 것과는 다릅니다. 보다 직관적입니다. 여기에서는 다양한 수준의 분류 이름을 표시하기 위해 h1과 h2를 사용하는 것이 정말 적절합니다. CSS 코드의 디자인을 살펴보겠습니다.

#nav { width:100px; border-color:#c5c6c4; border-width:0px 1px 1px 1px;}
# nav h1 { 여백: 0px; 글꼴 크기: 12px; 글꼴 계열:Verdana: 1px 배경색:#CCCCCC; ># nav h2 { 여백:0px; 글꼴 크기:12px; 글꼴-가중치:normal;}
#nav h2 a { 색상:#666666; ;}
#nav h2 a:hover { color:#999999; text-꾸밈:underline;}

이 CSS 코드 부분은 어떤 의미를 이해하지 못하는 경우 단순화된 작성 방법을 사용합니다. 문장을 Dreamweaver Open에서 변경하고 편집 스타일 시트를 선택하여 어떤 항목인지 확인할 수 있습니다. 몇 번 연습하면 이러한 코드를 완전히 이해할 수 있으며, 이는 마스터가 되는 데 한 걸음 더 가까워진다는 것을 의미합니다.
이 예에서 #nav의 테두리에는 왼쪽과 오른쪽 하단에 1픽셀만 있고 상단은 없지만 h1 스타일에서는 상단 부분의 상단 픽셀이 설정되어 있다는 것을 눈치채셨을 것입니다. 왜 이런가요? h1 스타일 상단에 가로선이 있기 때문에 네비게이션 상단에 가로선이 하나 더 있으면 두 개로 늘어나서 결과적으로 높이가 2픽셀이 됩니다.
알겠습니다. 전체 효과를 미리 볼 수 있습니다.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">