구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예)-CSS 튜토리얼-php.cn

이 글의 목표:

1. CSS에서 구조적 의사 클래스 선택기 사용법 익히기

질문:

1. 공식 계정을 클릭하면 4개의 하위 메뉴가 나타납니다. 미니 프로그램을 클릭하면 또 다른 팝업이 나타납니다. 2개의 하위 메뉴는 이전에 표시된 하위 메뉴를 자동으로 축소해야 하며 순수 DIV+CSS를 사용하려면 구조적 의사 클래스 선택기를 사용해야 합니다.

구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예)

추가 사항:

1. 전체 너비는 140px입니다.

2 1단계 메뉴 글꼴은 16px, 굵은 글씨로 표시됩니다

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

1. 루트 디렉터리에 이미지 폴더를 추가하고 여기에 관련된 모든 자료 사진을 저장합니다. 작은 로고 이미지를 배경 이미지로 사용할 것입니다

구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예)

2. index.html 생성, 아키텍처 작성 및 아키텍처 분석 방법

아이디어 분석:

1 목표는 2개 부분으로 나뉘며, 각 부분에는 첫 번째 수준이 있습니다. 메뉴를 클릭하면 다음 하위 메뉴가 표시되어야 하며 여기서 필요한 지식 포인트를 사용할 수 있습니다. 구조적 의사- 클래스 선택기 - target

2 배경을 제외하면 상단과 하단이 유사합니다. 각 메뉴의 이미지가 다르기 때문에 두 번째 부분의 많은 코드는 첫 번째 부분을 재사용할 수 있지만 별도의 설정이 필요하므로 별도의 클래스 이름을 설정해야 합니다

자, 먼저 분석을 따라 아이디어를 작성하세요. , 그리고 당분간 CSS 구현은 무시하세요

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—target实现可搜索菜单案例</title>

</head> 
<body>
    <div class="container">
        <div class="title title1"><a href="#wechataccount">公众号</a></div>
        <div class="menu" id="wechataccount">
           <ul>
               <li class="li1"><a href="">微信公众号</a></li>
               <li class="li2"><a href="">公众号应用</a></li>
               <li class="li3"><a href="">公众号模板</a></li>
               <li class="li4"><a href="">微信开放平台</a></li>
           </ul>
        </div>
        <div class="title title2"><a href="#applet">小程序</a></div>
        <div class="menu" id="applet">
           <ul>
               <li class="li5"><a href="">微信小程序</a></li>
               <li class="li6"><a href="">小程序应用</a></li>
           </ul>
        </div>
    </div>
    
</body>
</html>

로그인 후 복사

3. 스타일을 작성하고, CSS 폴더를 생성하고, 내부에 새로운 index.css를 생성하고, 스타일 작성 방법은 다음과 같습니다. 다음은 분석 아이디어입니다.

Think 분석:

1. 전체 컨테이너의 하위 요소

Think 분석

1. 컨테이너에 있는 모든 요소의 공통 스타일을 설정하려면 다음과 같은 공통 코드를 입력하세요. .container * 스타일(패딩, 마진 등) 이렇게 설정하지 않으면 각 요소 내부에 설정하면 코드 중복이 발생하므로 다른 경우와 마찬가지로 가장 기본적인 것부터 작성하세요

index.css에 대한 다음 코드:

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

로그인 후 복사

2. 외부 컨테이너 자체.container

사고 분석:

1 요구 사항에 따라 너비는 140이고 밝은 회색 테두리가 있으며 일정량이 있습니다. padding on the top, lower, left and right

따라서 index.css에 다음 코드를 추가하세요:

.container{
   width: 140px;
    border: 1px solid lightgray;
    padding: 10px;
}

로그인 후 복사

3. Title.title

1 요구 사항에 따라 글꼴 크기는 16px, 색상은 연합니다. 회색이고 글꼴이 굵게 표시되어 있습니다. 그러면 각 제목의 배경 이미지가 반복되지 않으며 가로 방향이 오른쪽이고 세로 방향이 중앙에 있음을 발견했습니다.

그래서 다음 코드를 색인에 추가하세요. .css:

.title{
   font-size: 16px;
   color:lightgray;
   padding:10px;
   font-weight: bold;
   background-repeat: no-repeat;
   background-position-y:center;
   background-position-x:right;
}

로그인 후 복사

4. 두 제목에 대한 별도 설정

1. 두 제목의 차이점은 배경입니다. 사진이 다릅니다

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

.title1{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.title2{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}

로그인 후 복사

5. .메뉴

1、一级菜单下面的子菜单首先是要隐藏起来的，只是当点击标题菜单的时候就需要展开，此刻我们可以把子菜单当做是标题菜单的目标即target，而CSS中:target其实表示所有的target,在此文档中target为id=wechataccount和id=applet的2个div，但是每次只对某一个target生效，当另外一个target被触发了，其他的target的样式就会失效，恢复成默认状态，就好像此页面中默认状态是隐藏，但是当公众号点击了，它下面的target就会应用当前的:target样式，但另外一个target触发了，此刻它的样式就又恢复成display:none了

所以index.css中添加代码如下：

.menu{
   display: none;
 }
 :target{
   display:block;
 }

로그인 후 복사

6、列表公共样式 ul li

1、因为根据实现效果可以看出没有黑色圆点，然后因为每个li都有背景图片，所以一定会有间距padding,且背景图片垂直方向居中，背景图片不重复

所以index.css中添加代码如下：

ul li{
   list-style: none;
   padding:10px 10px 10px 29px!important;
   background-position-y:center;
   background-repeat: no-repeat;
}

로그인 후 복사

7、每个li的单独样式

1、每个li的唯一不同就是背景图片不同

所以index.css中添加代码如下：

.li1{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.li2{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.li3{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.li4{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.li5{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.li6{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}

로그인 후 복사

8、链接设置a

1、每个链接默认是有颜色的，一般为蓝色，但是这里的连接颜色为灰色，不带默认的下划线

所以index.css中添加代码如下：

a{
   color:rgb(5, 5, 5);
   text-decoration: none;
}

로그인 후 복사

到此为止，index.css的全部内容如下：

.container *{
   padding:0;
   margin:0;
}
.container{
   width: 140px;
    border: 1px solid lightgray;
    padding: 10px;
}
.title{
   font-size: 16px;
   color:lightgray;
   padding:10px;
   font-weight: bold;
   background-repeat: no-repeat;
   background-position-y:center;
   background-position-x:right;
}
.title1{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.title2{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.menu{
   display: none;
 }
 :target{
   display:block;
 }
ul li{
   list-style: none;
   padding:10px 10px 10px 29px!important;
   background-position-y:center;
   background-repeat: no-repeat;
}

.li1{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.li2{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.li3{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.li4{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.li5{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
.li6{
   background-image: url(../images/구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예));
}
a{
   color:rgb(5, 5, 5);
   text-decoration: none;
}

로그인 후 복사

然后将index.css引入index.html中

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—target实现可搜索菜单案例</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head> 
<body>
    <div class="container">
        <div class="title title1"><a href="#wechataccount">公众号</a></div>
        <div class="menu" id="wechataccount">
           <ul>
               <li class="li1"><a href="">微信公众号</a></li>
               <li class="li2"><a href="">公众号应用</a></li>
               <li class="li3"><a href="">公众号模板</a></li>
               <li class="li4"><a href="">微信开放平台</a></li>
           </ul>
        </div>
        <div class="title title2"><a href="#applet">小程序</a></div>
        <div class="menu" id="applet">
           <ul>
               <li class="li5"><a href="">微信小程序</a></li>
               <li class="li6"><a href="">小程序应用</a></li>
           </ul>
        </div>
    </div>
    
</body>
</html>

로그인 후 복사

运行效果如下：

구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예)