構造擬似クラスセレクター - 検索可能なメニューケースのターゲット実装 (コード例)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

構造擬似クラスセレクター - 検索可能なメニューケースのターゲット実装 (コード例)

易达

Jun 10, 2020 am 11:08 AM

この記事の目標:

1. 構造擬似クラスセレクターの使用法をマスターする - CSS のターゲット

質問:

1. 次のことを達成するにはクリック時のメニュー効果公式アカウントは 4 つのサブメニューをポップアップしますミニプログラムをクリックすると、さらに 2 つのサブメニューがポップアップします以前に表示されたサブメニューは自動的に縮小され、純粋な DIV CSS が使用される必要があります構造擬似クラスセレクター - ターゲット

構造擬似クラスセレクター - 検索可能なメニューケースのターゲット実装 (コード例) 追加メモ:

1. 全体の幅は 140px

2 です。第 1 レベルのメニューのフォントは 16 ピクセル、太字表示です。

次に、具体的な操作を実行しましょう

1. 素材の準備: ルートディレクトリに画像フォルダーを作成し、関連するすべての素材画像をここに保存します。上記の素材はいくつかの小さなロゴ画像であることがわかり、背景画像として使用されます

構造擬似クラスセレクター - 検索可能なメニューケースのターゲット実装 (コード例)

構造擬似クラスセレクター - 検索可能なメニューケースのターゲット実装 (コード例) 2.index.html の作成、アーキテクチャの記述、アーキテクチャの分析方法

アイデア分析:

1. ターゲットは 2 つの部分に分かれており、各部分には第 1 レベルのメニューがあり、メニューをクリックすると、次のサブメニューが表示される必要があります。、ここで必要な知識ポイントを使用できます: 構造擬似クラスセレクター—ターゲット

2. 各メニューの背景画像が異なることを除いて、上部と下部は似ています。 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. styleを書いてcssフォルダを作成、その中にindex.cssを新規作成、スタイルの書き方内部には、分析アイデア

アイデア分析:

1. コンテナ全体のサブ要素

アイデア分析

1. 順序コンテナ内のすべての要素の共通スタイルを設定するには、パディングやマージンなどの共通コードを .container * スタイルに書き込むことができます。この方法で設定しない場合、各要素内で設定するとコードの冗長性が生じます。他のケースと同様に、最も基本的なものから始めます

したがって、次のコードをindex.cssに追加します:

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

2 、外側のコンテナ自体.container

アイデア分析:

1. 要件によると、幅は 140、明るい灰色の境界線があり、上下左右に一定量のパディングがあります

なので、次のコードをindex.cssに追加します:

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

3. Title.title

1. 要件に従って、フォントサイズは16px、色はライトグレーです、フォントは太字で、各タイトルについて、背景画像が繰り返されていないことがわかり、水平方向が右、垂直方向が中央であることがわかります。次のコードを Index.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. 2 つのタイトル別の設定

1. 2 つのタイトルの違いは、背景画像が異なることです

したがって、次のコードをindex.cssに追加します:

.title1{
   background-image: url(../images/構造擬似クラス セレクター - 検索可能なメニュー ケースのターゲット実装 (コード例));
}
.title2{
   background-image: url(../images/構造擬似クラス セレクター - 検索可能なメニュー ケースのターゲット実装 (コード例));
}

5.Menu .menu

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>

运行效果如下：

構造擬似クラスセレクター - 検索可能なメニューケースのターゲット実装 (コード例)

点击小程序的时候运行效果如下：

構造擬似クラスセレクター - 検索可能なメニューケースのターゲット実装 (コード例)

到此为止，我们就实现了全部的需求

总结：

1、学习了CSS中结构性伪类选择器—target的用法

以上が構造擬似クラスセレクター - 検索可能なメニューケースのターゲット実装 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか？Apr 18, 2025 am 11:34 AM

先日、この質問がありました。私の最初の考えは、奇妙な質問です！特異性はセレクターに関するものであり、アットレールはセレクターではないので、...無関係ですか？

@mediaと@supportのクエリをネストできますか？Apr 18, 2025 am 11:32 AM

はい、あなたはできます、そしてそれは本当にどの順序で重要ではありません。 CSSプリプロセッサは必要ありません。通常のCSSで動作します。

クイックガルプキャッシュバストApr 18, 2025 am 11:23 AM

CSSやJavaScript（および画像とフォントなど）などのアセットにファーアウトキャッシュヘッダーを確実に設定する必要があります。それはブラウザを伝えます

CSSの品質と複雑さを監視するスタックを探してApr 18, 2025 am 11:22 AM

多くの開発者は、CSSコードベースを維持する方法について書いていますが、そのコードベースの品質をどのように測定するかについて多くの人が書いていません。確かに、私たちは持っています

データリストは、値を強制せずに値を提案するためのものですApr 18, 2025 am 11:08 AM

短い任意のテキストを受け入れるために必要なフォームを持っていたことがありますか？名前などのように。それはまさにそのためのものです。たくさんあります

チューリッヒでのフロント会議Apr 18, 2025 am 11:03 AM

私は、フロント会議のためにスイスのチューリッヒに向かうことにとても興奮しています（その名前とURLが大好きです！）。私はこれまでスイスに行ったことがないので、興奮しています

CloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますApr 18, 2025 am 10:58 AM

ソフトウェア開発における私のお気に入りの開発の1つは、サーバーレスの出現です。詳細に行き詰まる傾向がある開発者として

NUXTアプリケーションで動的ルートを作成しますApr 18, 2025 am 10:53 AM

この投稿では、私が構築して展開して展開してネットライフを使用して、着信データの動的ルートを作成する方法を示すeコマースストアのデモを使用します。それはかなりです

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。