CSSでシャドウを使用した第1レベルのナビゲーションを実装する方法

美しいナビゲーションは、ウェブサイトに最後の仕上げを加えることができます。ユーザーをコンテンツの検索に誘導する際、ナビゲーションは Web サイトを閲覧するときのユーザーの気分を変えることもできます。クリエイティブなナビゲーション バーはユーザーをより楽しくし、Web サイトへの関心を高めます。

私はアート制作が得意ではありませんが、美しいウェブサイトから良い部分を抽出して自分で使用したり、他の人と共有したりすることはできます。今日はみんなで一緒に学べるスカイブルーのナビゲーションを用意しました。

最初に最終的な効果を見てみましょう:



ステップ 1: p をナビゲーションのメイン部分として配置します

<p class="userPlaceMain"></p>

そのスタイルを書きます:

.userPlaceMain 
{
    clear: both;
    width:1200px
    height: 50px;
    line-height: 50px;
    background: #0090CE;
    padding: 0 20px;
    color: White;
    -moz-box-shadow: 5px 5px 10px #B7B7B7;
    box-shadow: 5px 5px 10px #B7B7B7;
}

注: はこちら-moz-box-shadow: 5px 5px 10px #B7B7B7; この時点でのナビゲーション効果は次のとおりです:

ステップ 2 : ナビゲーション リンク コンテンツを配置します

ここで ul li の順序なしリストを使用します

<ul>
     <li><a id="userPlaceId_1" href="http://xunwn.com/1010100" class="userPlaceMainUlLiHover">主页</a>|</li>
     <li><a id="userPlaceId_2" href="http://xunwn.com">形象展示</a>|</li>
     <li><a id="userPlaceId_3" href="http://xunwn.com/photo/1010100">产品展示</a></li></ul>

今すぐ必要です ul li を左にフロートします。使用: float:left

.userPlaceMain ul li {
    float: left;
    margin-right: 10px;
}

ナビゲーション効果は次のとおりです:

最終的な効果には程遠いですが、リンクのテキスト幅、背景、ステップ 2: リンク テキストの幅、背景、間隔を設定します



a タグはインライン タグなので、設定する必要がある場合は幅を設定する必要がありますここでは、display:inline-block を使用して幅を設定できます

.userPlaceMain ul li a 
{
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    color: White;
    display: inline-block;
    width: 100px;
    height: 100%;
    font-size: 15px;
    text-align: center;
    margin-right: 10px;
}

注:

text-shadow: 0 1px 0 rgba(0, 0, 0,0.3); テキストに影を追加するには、この項目を設定する必要はありません。

効果はまだあります。最後のステップは、ナビゲーション
マウス

スライド スタイル

です。ステップ 3: ナビゲーション マウスのスライド スタイルを設定します 方法は 2 つあります。1 つは、CSS 疑似クラス セレクターを直接使用する: hover です。 2つ：ここで使用されるリンクテキストCSSスタイルを制御するJavaScriptまたはJuqeryは次のとおりです。

以上がCSSでシャドウを使用した第1レベルのナビゲーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。