CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예).-CSS 튜토리얼-php.cn

이 글의 목표:

1. CSS의 구조적 의사 클래스 선택기인 nth-of-type의 사용법을 익히십시오.

질문:

1. 다음 사용자 정의 탐색 메뉴를 구현하려면. CSS, 구조를 사용해야 합니다. 성적인 의사 유형 선택기 - n번째 유형

CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예).

추가 지침:

1 탐색 너비 800px, 높이 90px, 중앙 디스플레이

2. 이미지는 50px이고, 와인병 이미지의 크기도 동일합니다.

이제 구체적인 작업을 해보겠습니다

1. 재료 준비: 타겟 효과와 결합하여 투명한 와인병 그림을 만들 수 있습니다. 이렇게 배경색이 바뀌면 그 안에 있는 투명한 부분도 좌우로 2개가 있는데 이것도 필수 재료입니다

CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예).

2. .html 구조를 분석하는 방법은?

아이디어 분석:

1. 대상 탐색은 6개의 하위 섹션 항목으로 나누어져 있으므로 일반적으로 사용되는 li를 사용하여 구현할 수 있습니다. 수평으로, 그래서 확실히 플로팅되어야 하므로 마지막 li의 플로트를 지울 수 있습니다. ul에 도달하면 여전히 모든 플로팅 리를 내부에 효과적으로 감쌀 수 있습니다.

2 , 1,3,5 탐색 배경은 파란색입니다. , 2,4,6 탐색 배경은 노란색이므로 li의 색상이 정기적으로 바뀌므로 이때 n번째 유형을 사용할 수 있습니다

3, 각 탐색은 두 부분으로 구성되어 있으며 위쪽 부분은 그림이고 하단은 텍스트

좋아요, 먼저 분석을 따라 아이디어를 적고, 당분간 CSS 구현은 무시하세요

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析</title>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航一
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航二
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航三
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航四
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航五
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航六
                </div>
            </li>
            <li class="clear"> </li>
        </ul>
    </div>
</body>

</html>

로그인 후 복사

3. 내부에 새로운 index.css 폴더를 만들고. 내부에 스타일을 작성하는 방법은 다음과 같습니다.

생각해보기:

.container * 공개 스타일

1. 너무 많은 사례를 작성한 후에는 코드 중복을 줄이는 것도 기본입니다. 여기에서 공개 스타일을 정의할 수 있습니다

index.css에 다음 코드를 추가하세요.

.container *{
    padding:0;
    margin:0;
}

로그인 후 복사

.container 외부 컨테이너

1 지침에 따라 너비는 600, 높이는 90, 왼쪽 및 오른쪽 패딩입니다. 간격은 100이고, 배경색은 카키색이고 모서리가 둥글며 중앙에 배치되어야 합니다. 배경 이미지가 여러 개 있습니다. 첫 번째 배경 이미지는 왼쪽에 가로, 오른쪽에 두 번째 배경 이미지가 있습니다. 배경 이미지 크기는 50px

이므로 index.css에 다음 코드를 추가합니다.

.container{
    width: 600px;
    height: 90px;
    background-color: burlywood;
    color: white;
    margin: 0 auto;
    border-radius: 15px;
    padding:0 100px;
    background-image: url(../images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예).),url(../images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예).);
    background-size: 50px 50px;
    background-position-x: left,right;
    background-repeat: no-repeat;
    background-position-y: center;
}

로그인 후 복사

li Column

1 기본 검은 점이 없으므로 목록 스타일: 없음, 가로 배열이므로 부동: 왼쪽, 너비는 동일하므로 너비= 600/6=100px, 글꼴은 가운데 정렬됩니다. text-align: center;

그러므로 index.css에 다음 코드를 추가하세요:

li{
    list-style: none;
    float: left;
    width:100px;
    text-align: center;
}

로그인 후 복사

img picture

1. 요구 사항에 따라 너비와 높이가 모두 50이고 중앙에 위치해야 하므로 내부 이미지의 너비와 높이는 이미지 컨테이너의 크기와 정확히 동일하므로 너비는 100%, 높이는 100입니다. %

그러므로 index.css에 다음 코드를 추가하세요:

.img{
    width: 50px;
    height: 50px;
    margin:0 auto;
    
}
.img img{
    width:100%;
    height: 100%;
}

로그인 후 복사

clear 부동 열 지우기

1. 이 열의 목적은 부동 열을 지우는 것이기 때문입니다

그러므로 index.css에 다음 코드를 추가하세요:

li.clear{
    width:0;
    height: 0;
    clear: both;
    float: none;
}

로그인 후 복사

title text

1 상하 패딩 거리가 있으므로 index.css에 다음 코드를 추가합니다.

.title{
    padding:10px;
}

로그인 후 복사

li의 개별 설정:

1, 1, 3,5의 탐색 배경은 파란색이며 탐색은 다음과 같습니다. 2,4,6의 배경은 노란색이므로 홀수 열의 배경은 파란색, 짝수 열의 배경은 노란색입니다. n번째 유형에는 표현식이 있을 수 있으므로 index.css를 추가합니다.

li:nth-of-type(2n){
    background-color:lightgoldenrodyellow;
    color:peru;
}
li:nth-of-type(2n+1){
    background-color:lightblue;
}

로그인 후 복사

지금까지의 index.css 코드는 다음과 같습니다.

.container *{
    padding:0;
    margin:0;
}
.container{
    width: 600px;
    height: 90px;
    background-color: burlywood;
    color: white;
    margin: 0 auto;
    border-radius: 15px;
    padding:0 100px;
    background-image: url(../images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예).),url(../images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예).);
    background-size: 50px 50px;
    background-position-x: left,right;
    background-repeat: no-repeat;
    background-position-y: center;
}

li{
    list-style: none;
    float: left;
    width:100px;
    text-align: center;
}
.img{
    width: 50px;
    height: 50px;
    margin:0 auto;
    
}
.img img{
    width:100%;
    height: 100%;
}
li.clear{
    width:0;
    height: 0;
    clear: both;
    float: none;
}
.title{
    padding:10px;
}

li:nth-of-type(2n){
    background-color:lightgoldenrodyellow;
    color:peru;
}
li:nth-of-type(2n+1){
    background-color:lightblue;
}

로그인 후 복사

그런 다음 index.html에 index.css를 추가합니다

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航一
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航二
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航三
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航四
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航五
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." / alt="CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예)." >
                </div>
                <div class="title">
                    导航六
                </div>
            </li>
            <li class="clear"> </li>
        </ul>
    </div>
</body>

</html>

로그인 후 복사

최종 실행 효과는 다음과 같습니다.

CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예).