CSSでナビゲーションバーを修正する方法-CSSチュートリアル-php.cn

CSSでナビゲーションバーを修正する方法

WBOY

リリース： 2021-11-12 10:33:38

オリジナル

7913 人が閲覧しました

CSS では、position 属性を使用してナビゲーションバーを固定できます。固定位置にするには、ナビゲーションバー要素に「position: fixed;」スタイルを追加するだけです。固定位置では、要素はウィンドウ内の特定の位置に固定され、ウィンドウがスクロールされても移動せず、ウィンドウの他の要素に影響を与えません。

CSSでナビゲーションバーを修正する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css でナビゲーションバーを修正する方法:

1. HTML 部分:

作成用の ul タグを作成します。 no シーケンスリストの場合、ページジャンプ効果が必要なため、liタグの中にaタグを挿入し、aタグの中にナビゲーションコンテンツを記述する必要があります。最後に div を作成し、div の高さを 1500px に設定します。スクロールバーをスライドさせるときに、ナビゲーションバーの位置を観察すると便利です。具体的なコードは次のとおりです。

<ul>
   <li><a class="active" href="#home">首页</a></li>
   <li><a href="#news">新闻动态</a></li>
   <li><a href="#contact">联系我们</a></li>
   <li><a href="#about">关于我们</a></li>
</ul>   
<div style="background-color:pink;height:1500px;"></div>

ログイン後にコピー

2. CSS 部分:

基本的なフレームワークが確立されました完成しました。CSS を使用してページを美しくします。float:left を使用して、順序なしリストの左側を浮動させて行に配置します。Padding を使用して、ナビゲーション間の間隔を調整します。ホバー疑似クラスセレクターを使用して、マウスがナビゲーションを通過するときのマウスホバー効果を設定します。ナビゲーションがアクティブな場合は赤色で表示され、黄色で表示されます。

最も重要な手順は、ページの上部にあるナビゲーションバーを修正することです。position:fixed 属性を使用して、固定位置要素を生成し、ブラウザウィンドウを基準にして配置します。。次に、上端からの距離を 0 (つまり、上: 0) に設定し、上端に固定されたナビゲーションの準備が整います。詳細なコードは次のとおりです:

<style type="text/css">
    *{margin:0;padding: 0;}
   ul{
       list-style-type: none;
       overflow: hidden;
       background-color: #333;
       position: fixed;
       top: 0;
       width: 100%;
   }  
   li {
       float: left;
   }   
   li a {
       display: block;
       color: white;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
   }   
   li a:hover:not(.active) {
       background-color: red;
   }   
   .active {
       background-color: yellow;
   }
</style>

ログイン後にコピー

実際の効果を見てみましょう:

CSSでナビゲーションバーを修正する方法