HTML의

가로 메뉴의 HTML 코드 구조를 작성하는 것이 첫 번째 단계입니다.

HTML 문서의 네비게이션 바 영역에 다음 코드를 추가해 주세요.

 
• Baidu.Com
 
• Code52.Net
 
• Yahoo.Com
 
• Google.Com

두 번째 단계, CSS 코드 작성

1. 공개 스타일 설정

HTML 문서의

... 태그 범위에 다음 CSS 코드를 추가하세요.

<style>
#menu { 
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>

우리 모두 알고 있듯이

의 항목은 기본적으로 세로로 정렬됩니다.

팁: 이제 독립적으로 설명하기 위해 탐색 모음을 꺼내기 때문에 일부 공개 스타일을 본문이나 다른 곳에서 재설정한 경우 위 코드를 제거할 수 있습니다.

2. 텍스트를 가로로 정렬합니다.

우리 모두 알고 있듯이

태그
• 아래의 항목은 기본적으로 세로로 정렬됩니다.

  <style>
  #menu li { 
  float:left; /* 往左浮动 */
  }
  </style>

  3. 링크 스타일 설정:

  <style>
  #menu li a {
  display:block; /* 将链接设为块级元素 */
  padding:8px 50px; /* 设置内边距 */
  background:#3A4953; /* 设置背景色 */
  color:#fff; /* 设置文字颜色 */
  text-decoration:none; /* 去掉下划线 */
  border-right:1px solid #000; /* 在左侧加上分隔线 */
  }
  </style>

  각 메뉴를 더 넓게 만들기 위해 내부 여백(예: 패딩)을 사용합니다. 메뉴가 중국어와 영어가 혼합되어 있는 경우 높이와 메뉴 너비를 조정하면 중국어와 영어 문자의 행 높이가 일치하지 않아 발생하는 높이 오류를 방지할 수 있습니다. 고정 높이 설정 방법:

  <style>
  #menu li a {
  display:block; /* 将链接设为块级元素 */
  width:150px; /* 设置宽度 */
  height:30px; /* 设置高度 */
  line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
  text-align:center; /* 居中对齐文字 */
  background:#3A4953; /* 设置背景色 */
  color:#fff; /* 设置文字颜色 */
  text-decoration:none; /* 去掉下划线 */
  border-right:1px solid #000; /* 在左侧加上分隔线 */
  }
  </style>

  4. 링크 호버 효과:

  위 단계의 조합 효과를 통해 가로 탐색 모음의 예비 프레임워크가 나타납니다. 이 단계는 주로 링크의 호버 효과를 정의하여 탐색 모음을 더욱 아름답게 만드는 것입니다. 물론 네비게이션 바를 더욱 눈에 띄게 만들고 싶다면 CSS hover 속성에 배경 이미지를 정의하면 됩니다.

  <style>
  #menu li a:hover {
  background:#146C9C; /* 变换背景色 */
  color:#fff; /* 变换文字颜色 */
  }
  </style>

  여기 코드에는 결함이 있습니다. 맨 오른쪽에 추가 테두리가 있습니다. IE 시리즈 브라우저에서는 :first-child 의사 클래스를 지원하지 않으므로 제거하려면 별도의 스타일만 작성하면 됩니다. 마지막 테두리를 지정하고 HTML 코드에 추가 선택기를 추가합니다.

  • Baidu.Com
  • Code52.Net
  • Yahoo.com
  • Google.com

  자, 이제 간단한 가로 탐색 메뉴가 만들어졌습니다. 아주 간단하지 않나요? 전체 코드는 다음과 같습니다.

  <style>
  #menu { 
   font:12px verdana, arial, sans-serif; 
  }
  #menu, #menu li {
   list-style:none;
   padding:0;
   margin:0;
  }
  #menu li { 
   float:left; 
  }
  #menu li a {
   display:block;
   /* 如果是中英文混排的文字，建议用固定宽度
   width:150px;
   height:30px;
   line-height:30px;
   text-align:center;
   */
   padding:8px 50px;
   background:#3A4953;
   color:#fff;
   text-decoration:none;
   border-right:1px solid #000;
  }
  #menu li a:hover {
   background:#146C9C;
   color:#fff;
   text-decoration:none;
   border-right:1px solid #000;
  }
  #menu li a.last {
   border-right:0; /* 去掉左侧边框 */
  }
  </style>

  우리가 만든 온라인 데모를 보고 이 기사에 제공된 예제 패키지를 다운로드할 수 있습니다.

  위 CSS 스타일을 수정했습니다. 다음과 같습니다:

위 내용은 HTML의

태그에 있는 li는 가로로 배열됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!