モール左側(cè)の大カテゴリナビゲーションメニューのページ分類(lèi)に関するチュートリアル
この効果は CSS を使用したホバー非表示効果です。今すぐ HTML ページを書(shū)き出してみましょう
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商城左側(cè)大分類(lèi)導(dǎo)航菜單</title> </head> <body> <div class="hc_lnav"> <div class="allbtn"> <h2><a href="#"><strong> </strong>全部商品分類(lèi)<i> </i></a></h2> <ul style="width:190px"> <li class=a1> <div class=tx><a href="#"><i> </i>各地名優(yōu)茶</a> </div> <dl> <dt>熱門(mén)</dt> <dd> <a href="#">西湖龍井</a> <a href="#">金駿眉</a> <a href="#">大紅袍</a> <a href="#">鐵觀(guān)音</a> </dd> </dl> <dl> <dt>名茶</dt> <dd> <a href="#">紅茶</a> <a href="#">綠茶</a> <a href="#">烏龍茶</a> <a href="#">黑茶</a> <a href="#">白茶 </a> </dd> </dl> <div class=pop> <h3><a href="#">各地名優(yōu)茶</a></h3> <dl> <dl> <dt>綠茶</dt> <dd> <a class="" href="#">西湖龍井</a> <a class="" href="#">龍井</a> <!--<a class="" href="#">黃山毛峰</a>--> <!--<a class="" href="#">安吉白茶</a>--> <!--<a class="" href="#">其他綠茶</a>--> </dd> </dl> <dl> <dt>烏龍茶</dt> <dd> <a class="" href="">鐵觀(guān)音</a> <a class="" href="">大紅袍</a> <!--<a class="" href="">水仙</a>--> <!--<a class="" href="">肉桂</a>--> <!--<a class="" href="">臺(tái)灣烏龍</a>--> <!--<a class="" href="">其他烏龍茶</a>--> </dd> </dl> <dl> <dt>紅茶</dt> <dd> <a class="" href="" >金駿眉</a> <a class="" href="">正山小種</a> <!--<a class="" href="">祁門(mén)紅茶</a>--> <!--<a class="" href="">坦洋工夫</a>--> <!--<a class="" href="">其他紅茶</a>--> <!--<a class="" href="">政和工夫</a>--> <!--<a class="" href="">滇紅工夫</a>--> </dd> </dl> <dl> <dt>黑茶</dt> <dd> <a class="" href="">白沙溪黑茶</a> <a class="" href="">普洱茶餅</a> <!--<a class="" href="">普洱沱茶</a>--> <!--<a class="" href="">普洱茶磚</a>--> <!--<a class="" href="">普洱散茶</a>--> <!--<a class="" href="">其他黑茶</a>--> </dd> </dl> <dl> <dt>白茶</dt> <dd> <a class="" href="#">白牡丹</a> <a class="" href="">白毫銀針</a> <!--<a class="" href="">壽眉</a>--> <!--<a class="" href="">其他白茶</a>--> </dd> </dl> </dl> <dl> <dt>品牌</dt> <dd> <a href="">滋恩</a> <a href="">遠(yuǎn)榮</a> <!--<a href="">頂峰</a>--> <!--<a href="">公泰</a>--> <!--<a href="">一品堂</a>--> <!--<a href="">好吉</a>--> <!--<a href="">綠雪芽</a>--> <!--<a href="">臺(tái)灣梅山制茶</a>--> <!--<a href="" >白沙溪</a>--> <!--<a href="">聯(lián)興茶葉</a>--> </dd> </dl> <dl> <dt>價(jià)格</dt> <dd> <a href="">100元及以下</a> <a href="">100-300元</a> <!--<a href="">300元及以上</a>--> </dd> </dl> <dl> <dt>凈含量</dt> <dd> <a href="" >50g及以下</a> <a href="">51-100g</a> <!--<a href="">101-250g</a>--> <!--<a href="">250g以上</a>--> </dd> </dl> <dl> <dt>包裝</dt> <dd> <a href="">經(jīng)濟(jì)自飲裝</a> <a href="" >精美禮品裝</a> </dd> </dl> <div class=clr></div> <div class=act><a href=""><img src="images/20150518092317.jpg" /></a> </div> </div> </li> </ul> </div> </div> </body> </html>
上記のコードを第 1 レベルの隠しドメインと第 2 レベルの隠しドメインに分割します。
第 1 レベルの隠しドメインclass=tx
第 2 レベルの隠しドメイン class=pop
次の章では、ページの第 1 レベルの非表示に CSS スタイルを追加します
![MySQL クエリ最適化ソリューション [大手メーカーのアーキテクトが教える] [MySQL 入門(mén) | チューニング | インデックス作成] 上級(jí)チュートリアル](https://img.php.cn/upload/course/000/000/068/6242a7d5be236814.png)
