CSS 第 1 レベルのナビゲーション - スカイブルー (影あり)_html/css_WEB-ITnose

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

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

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



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

<div class="userPlaceMain"></div>

そのための書き方:

れーれー

注: ここで -moz-box-shadow: 5px 5px 10px #B7B7B7; box-shadow: 5px 5px 10px #B7B7B7; はナビゲーションシャドウ部分です

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



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

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

.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;}

次に、ul li を左にフロートする必要があります。使用します: float:left

<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>

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



最終的な効果から 遠くないところで、リンク テキストの幅、背景、間隔を設定する必要があります

ステップ 2: リンク テキストの幅、背景、間隔を設定する

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

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

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

これにより、ナビゲーション効果は次のようになります:



効果は大幅に向上しました。対処する最後のステップは、ナビゲーション マウスのスライド スタイルです

ステップ 3: ナビゲーション マウスのスライド スタイルを設定します

ここには 2 つの方法があります。1 つは直接CSS 疑似クラス セレクターを使用する方法です。 2: JavaScript または juqery は、リンク テキストの CSS スタイルを制御します。ここでは、より単純な最初のスタイルを使用します。

.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;}

最終的な効果は次のとおりです:



私は常にシンプルでファッショナブルなアプローチを追求してきました。今後も時間があるときに共有できるようにします。はい、今日はこれで終わりです。ありがとうございました。

元のアドレス: http://xunwn.com/tgzp/1010100_6751