CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose
ネチズンの皆さん、今日は純粋な CSS 画像分類表示 URL ナビゲーションの開発について説明します。タイトルを見るだけでは少し混乱するかもしれませんが、最初に実際の操作効果を示します。
上記の操作効果から、特定のメニューをクリックすると、ナビゲーション領域でこのカテゴリのアイコンが強調表示され、他のアイコンが淡色表示になることがわかります。
これはとても簡単だと思う人も多いかもしれませんが、JavaScript や jQuery などのフロントエンド フレームワークといくつかの CSS を直接使用することで、同じ効果をすぐに実現できます。あなたもそのような人であれば、立ち止まってこのチュートリアルを読んでいただければ幸いです。今日のチュートリアルでは、別の考え方を使用して問題を考え、js から完全に脱却し、スイッチング効果と画像分類を実現する方法を紹介します。そのアイデアを教えることを目的としています。
さて、早速、今日の実践的な開発チュートリアルを始めましょう。
まず、HTML ページを定義します。コードは次のとおりです (デモの便宜上、styles.css ファイルを直接インポートしました。この時点では、ファイルにはスタイル コンテンツがありません)。上記の HTML コードを見ると、ナビゲーション メニューにラベルまたはラジオ タグが使用されていることがわかります。なぜそれらを定義する必要があるのでしょうか。CSS だけでは、どのメニューをクリックしているのかを知ることができないからです。現在クリックしているため、 Label をクリックすると、特定のラジオが自動的に選択されます。
この時点で、スタイルが追加されていない場合にページがどのように機能するかを確認してみましょう:
| まず、ナビゲーション領域のサイズを調整し、ナビゲーション領域に境界線を追加します。コードは次のとおりです: |
この時点でのページ効果は次のとおりです:
領域のサイズが決定されました。次に、ナビゲーション メニューのスタイルを設定し、ラジオ ボタンを非表示にする必要があります。そして、メニューとチャートの間に境界線を設定します:
*{ /*设置页面基本属性*/ margin:0; padding:0; font-size:14px;}.container{ /*调整外围容器布局*/ margin:200px auto; width:1024px;}.hot_navs{ /*设置分类导航样式*/ border:1px solid #CCCCCC; padding:.5em; width:725px;}このときの効果は次のとおりです:
注意してくださいネチズンは、私が上記の CSS スタイルにtransition属性を追加したことに気づくでしょう。この属性は主に次のことを意味します。メニューの属性が変更されると、遷移アニメーションが実行されます。
次に、選択したスタイルをナビゲーションボタンに追加し、同時に特定のメニューが選択されたときに、このカテゴリのアイコンの不透明度を1に設定し、他のカテゴリの不透明度を0.2に設定します。
/*分割线*/.hot_navs .splitline { margin-bottom:4px;height:1px;border-top:1px dotted #999999; }.hot_navs a{ /*设置导航item的基本样式*/ text-decoration:none; display:inline-block; height:70px; line-height:70px; position:relative; background:#FFE500; -webkit-transition:all 0.6s; /*当item属性发生变化时，执行过度动画*/ -moz-transition:all 0.6s; -o-transition:all 0.6s; transition:all 0.6s;}.hot_navs input{display:none;}.hot_navs .label-type-all,.hot_navs .label-type-1,.hot_navs .label-type-2,.hot_navs .label-type-3,.hot_navs .label-type-4,.hot_navs .label-type-5,.hot_navs .label-type-6,.hot_navs .label-type-7 { /*设置区域头部导航菜单的基本样式*/ display:inline-block; margin-top:10px; padding:10px 10px; cursor:pointer;}この時点で、このページの特殊効果のスタイル コードはすべて書かれています。皆さんがインスピレーションを得られることを心から願っています。また、皆さんが私のチュートリアルを気に入ってくれることを願っています。
皆さん、ありがとうございました。次の実用的な開発ケースでお会いしましょう。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7518
15
1378
52
81
11
21
68
おすすめのAI支援プログラミングツール4選
Apr 22, 2024 pm 05:34 PM
この AI 支援プログラミング ツールは、急速な AI 開発のこの段階において、多数の有用な AI 支援プログラミング ツールを発掘しました。 AI 支援プログラミング ツールは、開発効率を向上させ、コードの品質を向上させ、バグ率を減らすことができます。これらは、現代のソフトウェア開発プロセスにおける重要なアシスタントです。今日は Dayao が 4 つの AI 支援プログラミング ツールを紹介します (すべて C# 言語をサポートしています)。皆さんのお役に立てれば幸いです。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot は、より少ない労力でより迅速にコードを作成できるようにする AI コーディング アシスタントであり、問題解決とコラボレーションにより集中できるようになります。ギット
フィルタリングされた重複ファイルをQuarkで開く方法
Mar 01, 2024 am 11:25 AM
Quark Browserを使用していると、重複ファイルをフィルタリングする機能がありますが、これをよく知らない友人もいますので、この機能をオンにする方法を紹介しますので、興味のある方はぜひ一緒に見てください。 1. まず、携帯電話で「Quark Browser」をクリックしてインターフェースに入り、ページ中央のオプションで「Quark Network Disk」をクリックして選択し、開いて入ります。 2. 以下の図に示すように、Quark ネットワーク ディスク インターフェイスの下部で [バックアップ設定] を見つけ、クリックして開きます。 3. 次に、入力したページに [重複ファイルのフィルター] があります。スイッチボタンがあり、その上の円形スライダーをクリックして色に設定すると、機能がオンになります ファイルのバックアップを続行する場合、ネットワークディスク容量を節約するために重複したファイルがスキップされます。
どのAIプログラマーが一番優れているでしょうか? Devin、Tongyi Lingma、SWE エージェントの可能性を探る
Apr 07, 2024 am 09:10 AM
世界初の AI プログラマー Devin の誕生から 1 か月も経たない 2022 年 3 月 3 日、プリンストン大学の NLP チームはオープンソース AI プログラマー SWE-agent を開発しました。 GPT-4 モデルを利用して、GitHub リポジトリの問題を自動的に解決します。 SWE ベンチ テスト セットにおける SWE エージェントのパフォーマンスは Devin と同様で、平均 93 秒かかり、問題の 12.29% を解決しました。専用端末と対話することで、SWE エージェントはファイルの内容を開いて検索したり、自動構文チェックを使用したり、特定の行を編集したり、テストを作成して実行したりできます。 (注: 上記の内容は元の内容を若干調整したものですが、原文の重要な情報は保持されており、指定された文字数制限を超えていません。) SWE-A
Go 言語を使用してモバイル アプリケーションを開発する方法を学ぶ
Mar 28, 2024 pm 10:00 PM
Go 言語開発モバイル アプリケーション チュートリアル モバイル アプリケーション市場が活況を続ける中、ますます多くの開発者が Go 言語を使用してモバイル アプリケーションを開発する方法を検討し始めています。シンプルで効率的なプログラミング言語として、Go 言語はモバイル アプリケーション開発でも大きな可能性を示しています。この記事では、Go 言語を使用してモバイル アプリケーションを開発する方法を詳しく紹介し、読者がすぐに始めて独自のモバイル アプリケーションの開発を開始できるように、具体的なコード例を添付します。 1. 準備 始める前に、開発環境とツールを準備する必要があります。頭
PHP 実践: フィボナッチ数列をすばやく実装するコード例
Mar 20, 2024 pm 02:24 PM
PHP の実践: フィボナッチ数列をすばやく実装するためのコード例 フィボナッチ数列は、数学では非常に興味深い一般的な数列です。次のように定義されています: 最初と 2 番目の数値は 0 と 1、3 番目からは数値で始まり、それぞれの数値前の 2 つの数値の合計です。フィボナッチ数列の最初のいくつかの数値は、0、1、1.2、3、5、8、13、21 などです。 PHP では、再帰と反復を通じてフィボナッチ数列を生成できます。以下ではこの２つを紹介していきます
Android 開発に最適な Linux ディストリビューションはどれですか?
Mar 14, 2024 pm 12:30 PM
Android 開発は多忙で刺激的な仕事であり、開発に適した Linux ディストリビューションを選択することが特に重要です。数多くある Linux ディストリビューションの中で、Android 開発に最適なのはどれでしょうか?この記事では、この問題をいくつかの側面から検討し、具体的なコード例を示します。まず、現在人気のある Linux ディストリビューション (Ubuntu、Fedora、Debian、CentOS など) をいくつか見てみましょう。これらにはそれぞれ独自の利点と特徴があります。
VSCode について: このツールは何に使用されますか?
Mar 25, 2024 pm 03:06 PM
「VSCode について: このツールは何に使用されますか?」 》初心者でも経験豊富な開発者でも、プログラマーとしてはコード編集ツールを使わずにはいられません。数ある編集ツールの中でも、Visual Studio Code (略して VSCode) は、オープンソースで軽量かつ強力なコード エディターとして開発者の間で非常に人気があります。では、VSCode は正確に何に使用されるのでしょうか?この記事では、VSCode の機能と使用法を詳しく説明し、読者に役立つ具体的なコード例を提供します。
Go 言語のフロントエンド テクノロジーの探求: フロントエンド開発の新しいビジョン
Mar 28, 2024 pm 01:06 PM
Go 言語は、高速で効率的なプログラミング言語として、バックエンド開発の分野で広く普及しています。ただし、Go 言語をフロントエンド開発と結びつける人はほとんどいません。実際、フロントエンド開発に Go 言語を使用すると、効率が向上するだけでなく、開発者に新たな視野をもたらすことができます。この記事では、フロントエンド開発に Go 言語を使用する可能性を探り、読者がこの分野をよりよく理解できるように具体的なコード例を示します。従来のフロントエンド開発では、ユーザー インターフェイスの構築に JavaScript、HTML、CSS がよく使用されます。
