수평 내비게이션 막대 제작

2159 단어
원문은 나의 서버 www.jxiaoliu에 발표되었다.cn;하지만 이 서버는 제가 추가 요금을 내지 않을 것 같아서cnblogs로 이사 왔습니다.
네비게이션 막대(네비게이션 메뉴)는 기본적으로 링크가 있는 목록이기 때문에 목록 라벨은 의심할 여지없이 자연스러운 선택이다.그러나 이것은 필수적인 것이 아니다. 사실상 전체 제작 과정에서 목록 라벨을 거의 사용하지 않았다.그래서 우리의 예는 목록 라벨을 전혀 사용하지 않는다.
우선, 수평 내비게이션은 항상 한 줄을 차지하기 때문에 우리는 그것을 포위한다.그 다음에 우리는 모든 메뉴 항목을 포위한다.마지막으로, 모든 메뉴 항목은 하나입니다。이곳의 것은 사실 사용하지 않아도 된다는 것을 주의해라.우리가 사용하는 것은 단지 문법적으로 좀 더 자연스러워 보이기 위해서이다 용기
  • 하다 를 참조하십시오. 우선 메뉴 내용: <div class="menu"> <span class="item"><a href="#">Filea>span><span class="item"><a href="#">Edita>span><span class="item"><a href="#">Viewa>span><span class="item"><a href="#">Helpa>span> div> 이것은 브라우저가 모든 메뉴 항목의 문자(탭) 사이에 공백과 줄 바꿈이 없다고 생각하도록 하기 위해 인접 메뉴 항목 사이에 HTML 주석을 사용했기 때문에 브라우저가 인접 메뉴 항목 사이에 추가 공백을 삽입하여 메뉴 항목의 줄 바꿈을 일으키지 않도록 주의하십시오. 이어서 우리는 관련 CSS를 설계했다.먼저 전체 메뉴 모음: .menu { /* 최소 너비를 지정합니다. 브라우저 창을 축소할 때 메뉴 항목이 겹치지 않도록 합니다. */ min-width: 400px; /* 탐색 모음의 전체 브라우저 창 너비 */ width: 100%; /* 가운데 표시 */ margin: 0 auto; } 만약 html 목록 라벨로 제작된다면, 우리는 여기에 또 지정해야 한다
  • 모든 목록 항목을 같은 줄에 표시하기 위한 디스플레이 속성은 inline이지만, span에 대해서는 필요 없습니다.다음 설정 라벨의 스타일.여기는 span 라벨을 설정하는 스타일이 아닙니다.여기 span 라벨은 용기이기 때문에 사용자의 마우스나 키보드 이벤트에 진정으로 응답하는 것은 a 라벨입니다. .menu .item a { font-size:24px; /* 우리는 링크의padding 등 속성을 설정하기를 희망합니다. 메뉴 항목을 블록으로 표시하려면 따라서 표시 방식을 inline-block*/ display: inline-block; padding:4px 4px 4px 4px; /* 뒤에 각 메뉴 항목의 표시 폭 비율을 설정해야 합니다. 따라서 box-sizing을 border-box로 설정합니다. */ box-sizing: border-box; /*는 4개의 메뉴 항목이 있기 때문에 각 항목의 폭은 25% (padding 포함) 입니다. */ /* 만약 우리 위에 box-sizing을 설정하지 않았다면, 여기에 패딩을 더하면 총 너비가 100%를 초과합니다*/ width: 25%; text-align: center; text-decoration: none; background-color: #FF0000; color: #000000; } 핵심이 이렇게 많아요.나머지는 링크 스타일을 수정하는 일반적인 작업이다.
  • 좋은 웹페이지 즐겨찾기