ul 및 li 태그를 사용하여 CSS 가로 탐색 메뉴 만들기-CSS 튜토리얼-php.cn

ul 및 li 태그를 사용하여 CSS 가로 탐색 메뉴 만들기

高洛峰

풀어 주다： 2016-11-24 11:45:49

원래의

2263명이 탐색했습니다.

아마도 CSS 스타일 텍스트 탐색 모음을 만드는 가장 간단한 솔루션은 모든 링크를 텍스트 줄에 넣는 것입니다. 이 방법은 합리적이고 직관적인 것 같습니다. 그러나 문제는 모든 링크를 한 줄의 텍스트에 넣으면 링크 사이와 링크 전후의 공백을 제어하기 어렵다는 것입니다. 따라서 모든 링크가 함께 붐비는 것을 피하기 위해 일반적으로 텍스트를 분리되고 혼합되지 않도록 유지하기 위해 구분 기호로 무언가 또는 개행이 아닌 공백 문자를 삽입해야 합니다.

이제 우리의 일반적인 접근 방식은 ul 및 li 태그를 사용하여 링크를 정렬되지 않은 목록으로 식별하는 것입니다. 그런 다음 CSS 스타일을 적용하여 이를 제어하고 예상대로 컨테이너에 표시합니다. 탐색 모음에 정렬되지 않은 목록을 사용하는 것은 직관에 어긋나는 것 같습니다. 왜냐하면 우리는 정렬되지 않은 목록을 수직으로 밀어 올려진 목록 항목으로 생각하고 각 항목 앞에 미리 설정된 목록 표시가 있는 것으로 생각하는 데 익숙하기 때문입니다. 이는 탐색 모음의 가로 방향과 일치하지 않는 것 같습니다. 그러나 독립적인 목록 항목 모음인 목록의 논리적 구조는 탐색 모음의 링크에 적용될 수 있으며 CSS 규칙을 사용하면 목록 항목의 기본 표시를 강제로 제거하고 목록 항목을 수평으로 정렬할 수 있습니다. 하향식 규칙이 아닌 컨테이너. 이제 순서가 지정되지 않은 목록을 기반으로 하는 CSS 스타일과 XHTML 태그가 포함된 가로 탐색 메뉴를 만드는 예를 살펴보겠습니다.

CSS 코드

 <div id="nav">   
  <ul>   
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>   
</div>

로그인 후 복사

이 CSS 코드를 살펴보겠습니다.

CSS 코드

#nav {   
    height: 30px;   
    width: 100%;   
    background-color: #c00;   
}   
#nav ul {   
    margin: 0 0 0 30px;   
    padding: 0px;   
    font-size: 12px;   
    color: #FFF;   
    line-height: 30px;   
    whitewhite-space: nowrap;   
}   
#nav li {   
    list-style-type: none;   
    display: inline;   
}   
#nav li a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}

로그인 후 복사

위 코드의 전체 HTML을 살펴보겠습니다. 이를 복사하여 HTML 페이지에 넣으면 효과를 볼 수 있습니다:

XML/HTML 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>www.52css.com</title>  
<style type="text/css">  
<!--    
#nav {   
    height: 30px;   
    width: 100%;   
    background-color: #c00;   
}   
#nav ul {   
    margin: 0 0 0 30px;   
    padding: 0px;   
    font-size: 12px;   
    color: #FFF;   
    line-height: 30px;   
    white-space: nowrap;   
}   
#nav li {   
    list-style-type: none;   
    display: inline;   
}   
#nav li a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}   
-->  
</style>  
</head>  
<body>  
<div id="nav">  
  <ul>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">CSS教程</a></li>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>  
</div>  
</body>  
</html>

로그인 후 복사

위 코드를 분석해 보겠습니다.

xhtml 코드는 먼저 컨테이너 div id="nav"를 정의합니다. 이 컨테이너는 정렬되지 않은 목록 수평 탐색 메뉴의 콘텐츠를 배치하는 데 사용되지만 일부 사람들은 이 컨테이너가 중복된다고 생각하여 ul id="nav"로 정의합니다. 우리 사이트는 확장 가능하며 향후 확장을 위해 충분한 공간을 확보해야 합니다. 우리 탐색 스타일이 더 복잡하게 설계되면 UL만이 우리 요구 사항을 충족할 수 없습니다. 이러한 컨테이너에 대한 우리의 정의는 우리의 코딩 습관과 더 일치합니다.

　#nav는 창의 너비, 높이 및 배경색을 정의합니다. #nav ul에는 여백 및 패딩 선언, 글꼴 및 색상 선언이 포함되어 있습니다. line-height: 30px;은 매우 중요한 정의입니다. 줄 높이 정의가 취소되면 링크 텍스트의 수직 중심이 영향을 받을 수 있습니다. 공백: nowrap; 이것이 무엇을 하는지 이해하지 못할 수도 있습니다. 이는 텍스트가 끝나거나 br 개체가 나타날 때까지 모든 텍스트가 동일한 줄에 표시되도록 정의합니다.

　List-style-type: none in #nav li는 목록 항목에 사용되는 기본 태그를 제거합니다. 목록 마크업 없이 일반 텍스트에 더 가깝도록 만드세요. display: inline; 문을 사용하면 각 항목을 별도의 줄에 표시하고 위에서 아래로 정렬하는 대신 목록 항목을 페이지의 왼쪽에서 오른쪽으로 이동할 수 있습니다. 이 두 명령문은 정렬되지 않은 목록 가로 탐색 메뉴 구현의 핵심입니다.
　#nav li a 및 #nav li a:hover는 링크 스타일을 정의합니다. 내용에 대해서는 자세히 설명하지 않겠습니다. padding: 7px 10px는 링크 텍스트 사이의 공백을 제어하는 데 사용됩니다. 값을 변경해 보세요.