HTML의 태그에 있는 li는 가로로 배열됩니다.

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

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

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="http://www.Code52.Net">Code52.Net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>

두 번째 단계, CSS 코드 작성

1. 공개 스타일 설정

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

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

우리 모두 알고 있듯이

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

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

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

우리 모두 알고 있듯이

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

<style type="text/css">
#menu li { 
float:left; /* 往左浮动 */
}
</style>

3. 링크 스타일 설정:

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

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

<style type="text/css">
#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 type="text/css">
#menu li a:hover {
background:#146C9C; /* 变换背景色 */
color:#fff; /* 变换文字颜色 */
}
</style>

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

<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="http://www.Code52.Net">Code52.Net</a></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
<li><a href="http://www.google.com" class="last">Google.com</a></li>
</ul>

<style type="text/css">
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
}
</style>

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

<style type="text/css">
#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!