純粋な CSS はドロップダウンメニューとドロップダウンコンテナーを実装します (純粋な CSS はナビゲーションバーとナビゲーションドロップダウンコンテナーを実装します)_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

純粋な CSS はドロップダウンメニューとドロップダウンコンテナーを実装します (純粋な CSS はナビゲーションバーとナビゲーションドロップダウンコンテナーを実装します)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

インターネット上には同様の、あるいは同一のケースがたくさんありますが、それでもメモを取るためとみんなの参考のために書き留めました

みんなが指導し批判できることを願っています~~

まず第一に、メニューを始めましょう。 list ul li ナビゲーションバーの作成:

ページでは、まず次の XHTML 構造を構築します:

Page content here.

コードを表示

効果:

その後、スタイルと機能を段階的に説明します (最初に各要素を指定します。その後のスタイルデザインを区別するために境界線を追加します):

スタイルコード:

<style>    ul{        border:1px solid red;    }    li{        border:1px solid lightgreen;    }    div{        border:1px solid black;    }</style>

コードを表示

効果:

このようにして、簡単に区別することができます。デザイン~~

下の行のリンクのスライドとリストの「.」「.」を削除し、親リストを横に、子リストを縦に配置して、ドロップダウンメニューのようにします~~(これは 2 レベルのネストされたリスト、1 つの親と 1 つの子です)

スタイルコード:

<style>    ul{        border:1px solid red;    }    li{        border:1px solid lightgreen;    }    div{        border:1px solid black;    }        a{        text-decoration:none;    }    ul#navWrapper li{        float:left;        list-style:none;    }    ul#navWrapper li ul li{        float:none;    }    div#banner{        clear:both;    }</style>

コードの表示

効果:

子リストと子コンテナを非表示にしましょう (ここで、子コンテナはid test を持つ div コンテナ）、マウスが親に移動すると、対応する子リストがリストの作成時に表示されます。これは、「:hover」によって実現されます。非表示の表示は、表示の「none」および「block」によって実現されます。ここでは可視性の「非表示」と「可視」が使用されていないことに注意してください。違いとしては、対応する属性を可視性に変更することができますが、ここでは実装されていません

スタイルコード:

<style>    ul{        border:1px solid red;    }    li{        border:1px solid lightgreen;    }    div{        border:1px solid black;    }        a{        text-decoration:none;    }    ul#navWrapper li{        float:left;        list-style:none;    }    ul#navWrapper li ul li{        float:none;    }    div#banner{        clear:both;    }        ul#navWrapper ul,ul#navWrapper div#test{        display:none;        position:absolute;    }    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{        display:block;    }</style>

コードを表示

効果:

ここで注意すべき点が 1 つあります。子レベルが設定されていない場合です。位置が「絶対」の場合、マウスが親に移動すると、表示される子は特定の位置を占めます。ページ上の位置が変更されると、「ページのコンテンツはここにあります」が移動しますが、これは非常に悪いことです。そこで、後続のコンテンツの位置に影響を与えることなく、子を通常のプロセスから分離できるように、子を「position:absolute;」に設定します。

次に、親の位置をわずかに移動し、最初の親の下にある独自のリストを左に移動して親の境界線に合わせ、2 番目の親の下の div コンテナに特定の「ボリューム」を与えます

スタイルコード:

<style>    ul{        border:1px solid red;    }    li{        border:1px solid lightgreen;    }    div{        border:1px solid black;    }        a{        text-decoration:none;    }    ul#navWrapper li{        float:left;        list-style:none;    }    ul#navWrapper li ul li{        float:none;                margin-left:-41px;    }    div#banner{        clear:both;                height:50px;        margin-top:30px;    }        ul#navWrapper ul,ul#navWrapper div#test{        display:none;        position:absolute;    }    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{        display:block;    }        ul#navWrapper{        margin-left:-41px;    }    ul#navWrapper div#test{        height:200px;        width:600px;        background:lightgray;    }</style>

コードを表示

効果:

すべての境界線を削除した後、ここで最も基本的な構造が設計されています~~

例:

すべての境界線を削除した後、全体をデザインする

スタイルコード:

<style>    body,div,ul,li{        padding:0;        margin:0;    }     a{        text-decoration:none;    }    ul#navWrapper li{        float:left;        list-style:none;                height:45px;        line-height:45px;    }    ul#navWrapper li ul li{        float:none;    }    div#banner{        clear:both;                height:50px;        margin-top:50px;        margin-left:50px;    }    div#content{        margin-left:50px;    }    ul#navWrapper ul{        display:none;        position:absolute;        background:#CCC;    }    ul#navWrapper div#test{        display:none;        position:absolute;        height:200px;        width:600px;        background:#cde6c7;    }    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{        display:block;    }        ul#navWrapper{        background:#CCC;        height:45px;        width:960px;        margin:0 auto;        margin-top:30px;    }        li a{        font-size:24px;        color:#333;        display:block;        height:45px;        padding:0 20px;    }    li a:hover{        color:#fff;        background:#000;    }</style>

ビューコード

効果:

写真 1:

写真 2:

OK!上記の基本構造をもとに設計した例です。まだデザインする必要がある場合は、上記の最も基本的な構造に基づいてデザインするだけです~~

参考: Microsoft 公式ドキュメント「CSS ドロップダウンメニューの作成方法」

声明

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

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、