ネチズンの皆さん、今日は純粋な CSS 画像分類表示 URL ナビゲーションの開発について説明します。タイトルを見るだけでは少し混乱するかもしれませんが、最初に実際の操作効果を示します。
上記の操作効果から、特定のメニューをクリックすると、ナビゲーション領域でこのカテゴリのアイコンが強調表示され、他のアイコンが淡色表示になることがわかります。
これはとても簡単だと思う人も多いかもしれませんが、JavaScript や jQuery などのフロントエンド フレームワークといくつかの CSS を直接使用することで、同じ効果をすぐに実現できます。あなたもそのような人であれば、立ち止まってこのチュートリアルを読んでいただければ幸いです。今日のチュートリアルでは、別の考え方を使用して問題を考え、js から完全に脱却し、スイッチング効果と画像分類を実現する方法を紹介します。そのアイデアを教えることを目的としています。
さて、早速、今日の実践的な開発チュートリアルを始めましょう。
まず、HTML ページを定義します。コードは次のとおりです (デモの便宜上、styles.css ファイルを直接インポートしました。この時点では、ファイルにはスタイル コンテンツがありません)。上記の HTML コードを見ると、ナビゲーション メニューにラベルまたはラジオ タグが使用されていることがわかります。なぜそれらを定義する必要があるのでしょうか。CSS だけでは、どのメニューをクリックしているのかを知ることができないからです。現在クリックしているため、 Label をクリックすると、特定のラジオが自動的に選択されます。
この時点で、スタイルが追加されていない場合にページがどのように機能するかを確認してみましょう:
| まず、ナビゲーション領域のサイズを調整し、ナビゲーション領域に境界線を追加します。コードは次のとおりです: |
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>CSS3实战开发:图片过滤分类特效</title> </head> <body> <div class="container"> <div class="hot_navs"> <div class="hot_title"> <input id="selector-type-all" type="radio" name="title_set" class="selector-type-all" checked="checked" /> <label for="selector-type-all" class="label-type-all">全部类别</label> <input id="selector-type-1" type="radio" name="title_set" class="selector-type-1" /> <label for="selector-type-1" class="label-type-1">电子商务</label> <input id="selector-type-2" type="radio" name="title_set" class="selector-type-2" /> <label for="selector-type-2" class="label-type-2">旅游</label> <input id="selector-type-3" type="radio" name="title_set" class="selector-type-3" /> <label for="selector-type-3" class="label-type-3">社交</label> <input id="selector-type-4" type="radio" name="title_set" class="selector-type-4" /> <label for="selector-type-4" class="label-type-4">视频</label> <input id="selector-type-5" type="radio" name="title_set" class="selector-type-5" /> <label for="selector-type-5" class="label-type-5">新闻</label> <input id="selector-type-6" type="radio" name="title_set" class="selector-type-6" /> <label for="selector-type-6" class="label-type-6">信息门户</label> <input id="selector-type-7" type="radio" name="title_set" class="selector-type-7" /> <label for="selector-type-7" class="label-type-7">票务</label> <div class="splitline"></div> <a class="item-type-1" href="http://www.itdriver.cn"> <img src="imgs/101.png" /> </a> <a class="item-type-1" href="http://www.itdriver.cn"> <img src="imgs/102.png" /> </a> <a class="item-type-7" href="http://www.itdriver.cn"> <i></i> <img src="imgs/103.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <img src="imgs/104.png" /> </a> <a class="item-type-5" href="http://www.itdriver.cn"> <img src="imgs/105.png" /> </a> <a class="item-type-4" href="http://www.itdriver.cn"> <img src="imgs/106.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/107.png" /> </a> <a class="item-type-4" href="http://www.itdriver.cn"> <i></i> <img src="imgs/108.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/109.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/110.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/111.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/112.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/113.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/114.png" /> </a> <a class="item-type-1" href="http://www.itdriver.cn"> <i></i> <img src="imgs/115.png" /> </a> <a class="item-type-5" href="http://www.itdriver.cn"> <i></i> <img src="imgs/116.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/117.png" /> </a> <a class="item-type-2" href="http://www.itdriver.cn"> <i></i> <img src="imgs/118.png" /> </a> </div> </div> </div> </body></html>
この時点でのページ効果は次のとおりです:
領域のサイズが決定されました。次に、ナビゲーション メニューのスタイルを設定し、ラジオ ボタンを非表示にする必要があります。そして、メニューとチャートの間に境界線を設定します:
*{ /*设置页面基本属性*/ 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;} この時点で、このページの特殊効果のスタイル コードはすべて書かれています。皆さんがインスピレーションを得られることを心から願っています。また、皆さんが私のチュートリアルを気に入ってくれることを願っています。
皆さん、ありがとうございました。次の実用的な開発ケースでお会いしましょう。
