CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예).
- 易达원래의
- 2020-06-18 12:47:282503검색
이 글의 목표:
1. CSS의 구조적 의사 클래스 선택기인 nth-of-type의 사용법을 익히십시오.
질문:
1. 다음 사용자 정의 탐색 메뉴를 구현하려면. CSS, 구조를 사용해야 합니다. 성적인 의사 유형 선택기 - n번째 유형
추가 지침:
1 탐색 너비 800px, 높이 90px, 중앙 디스플레이
2. 이미지는 50px이고, 와인병 이미지의 크기도 동일합니다.
이제 구체적인 작업을 해보겠습니다
1. 재료 준비: 타겟 효과와 결합하여 투명한 와인병 그림을 만들 수 있습니다. 이렇게 배경색이 바뀌면 그 안에 있는 투명한 부분도 좌우로 2개가 있는데 이것도 필수 재료입니다
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>최종 실행 효과는 다음과 같습니다.
요약:
1. n번째 유형의 구조적 의사 클래스 선택기를 사용하는 방법을 배웠습니다. 여기서 어려운 점은 표현식에도 있으므로 코드를 작성할 때 규칙을 요약하려면 더 많은 인내심이 필요합니다
위 내용은 CSS 구조적 의사 클래스 선택기 - n번째 유형은 사용자 정의 탐색 메뉴 사례 분석을 구현합니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!