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

집

웹 프론트엔드

CSS 튜토리얼

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

高洛峰

Nov 24, 2016 am 11:45 AM

css

아마도 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는 링크 텍스트 사이의 공백을 제어하는 데 사용됩니다. 값을 변경해 보세요.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

CSS 회전 목마 내부의 스크롤 구동 애니메이션May 16, 2025 am 09:50 AM

이봐, 스크롤 지역과 함께 작동하는 상당히 새로운 CSS 기능이 없습니까? 네, 스크롤 구동 애니메이션입니다. CSS 회전 목마의 항목을 스크롤하는 동안 애니메이션을 트리거 할 수 없다는 의미입니까?

CSS 포함 : 프로젝트에 적합한 방법을 선택합니다May 16, 2025 am 12:02 AM

TheBestMethodforincludingcssdependsonProjectSizeanDocplexity : 1) ForlargerProjects, useexternalcssforbettermainabilitableandableabilitable.2) ForsMallerProjects, 내부 CSSSSISSUITSIUT ABOIDEXTRAHTTPREQUESTS.ALWAYSIDERMANGERMANDIFIDANIDITION

불가능한 문제 해결May 15, 2025 am 10:32 AM

당신이 결코 생각하지 못한 다른 것으로 판명되는 불가능한 문제 중 하나를 문제 해결하는 것이 어떻게 보이는지.

@keyframes vs CSS 전환 : 차이점은 무엇입니까?May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity :@keyframesallowsfordeTailEdanimationsections, whilecsStransitsimplestateChanges.UsecsStransitionSforHovereffects likeToncolorChanges 및@keyframesforintricateanimationspinners.

정적 사이트 컨텐츠 관리에 페이지 CMS 사용May 13, 2025 am 09:24 AM

알고 있습니다. 컨텐츠 관리 시스템 옵션이 수많은 톤을 사용할 수 있으며, 여러 번 테스트했지만 실제로는 아무도 없었습니다. y ' 이상한 가격 책정 모델, 어려운 커스터마이즈, 일부는 전체가되었습니다.

HTML의 CSS 파일 연결에 대한 궁극적 인 안내서May 13, 2025 am 12:02 AM

HTML의 일부에서 요소를 사용하여 CSS 파일을 HTML에 연결하면 달성 할 수 있습니다. 1) 태그를 사용하여 로컬 CSS 파일을 연결하십시오. 2) 여러 개의 태그를 추가하여 여러 CSS 파일을 구현할 수 있습니다. 3) 외부 CSS 파일은 다음과 같은 절대 URL 링크를 사용합니다. 4) 파일 경로 및 CSS 파일로드 순서의 올바른 사용을 확인하고 성능을 최적화하면 CSS Preprocessor를 사용하여 파일을 병합 할 수 있습니다.

CSS Flexbox vs Grid : 포괄적 인 검토May 12, 2025 am 12:01 AM

Flexbox 또는 그리드 선택은 레이아웃 요구 사항에 따라 다릅니다. 1) Flexbox는 탐색 표시 줄과 같은 1 차원 레이아웃에 적합합니다. 2) 그리드는 매거진 레이아웃과 같은 2 차원 레이아웃에 적합합니다. 두 사람은 프로젝트에 사용하여 레이아웃 효과를 향상시킬 수 있습니다.

CSS 파일 포함 방법 : 방법 및 모범 사례May 11, 2025 am 12:02 AM

CSS 파일을 포함시키는 가장 좋은 방법은 태그를 사용하여 HTML 부분에 외부 CSS 파일을 소개하는 것입니다. 1. 태그를 사용하여 외부 CSS 파일을 소개합니다. 2. 작은 조정의 경우 인라인 CSS를 사용할 수 있지만주의해서 사용해야합니다. 3. 대규모 프로젝트는 SASS와 같은 CSS 전 처리기를 사용하여 @Import를 통해 다른 CSS 파일을 가져올 수 있습니다. 4. 성능의 경우 CSS 파일을 병합하고 CDN을 사용해야하고 CSSNANO와 같은 도구를 사용하여 압축해야합니다.

See all articles