矢印付きブレッドクラムナビゲーションバーのサンプルコードを共有する-CSSチュートリアル-php.cn

矢印付きブレッドクラムナビゲーションバーのサンプルコードを共有する

零下一度

リリース： 2017-05-02 10:55:18

オリジナル

3301 人が閲覧しました

この記事では、矢印付きの美しく美しいパンくずリストのナビゲーションバーを作成するサンプルコードを中心に紹介します。非常に良い基準値を持っています。エディターで見てみましょう

美しく美しいパンくずリストナビゲーションバーを作成しましょう

始める前に、いつものように、パンくずリストナビゲーションバーとは何かについて一般的な科学を説明したいと思います

次の種類のホームページ

>コラムページ>記事ページ

ホームページ/コラムページ/記事ページ

訪問者にWebサイトの現在位置と戻り方を伝えるDOMはパンくずナビゲーションバーと呼ばれます

ただし。。。。。。

これは悪くないと思いますか？

ある日、あなたの会社の UI から画像が表示された場合、その画像内のパンくずナビゲーションバーは次のようになります

このように

またはその他のパターンのパンくずナビゲーションバー、この時点で何をすべきか?

パターンを見つけてナビゲーションバーに背景を追加するだけなので、とても簡単だと言う友人もいるかもしれません

しかし、本当にそんなに簡単なのでしょうか?さて、さっそく練習を始めて、この美しいパンの形をしたナビゲーションバーを完成させる方法を見てみましょう

1. まず、順序なしリストを使用してナビゲーションバーを作成します

<ul>
    <li>
        <a href="#">主页</a>
    </li>
    <li>
        <a href="#">主页2</a>
    </li>
    <li>
        <a href="#">主页3</a>
    </li>
    <li>
        <a href="#">主页4</a>
    </li>
    <li>
        <a href="#">主页5</a>
    </li>
</ul>

ログイン後にコピー

。次のステップは CSS コードです

body{background:#000}
ul{ list-style: none;}
li{
width: 60px;
height: 50px;
line-height: 50px;
float: left;
background: #6cf;
text-align: center;
}
a{
color: #000;
text-decoration: none;
}

ログイン後にコピー

CSS コードは特別なものではなく、普通にナビを実行するのと同じです。次に、選択した背景画像を配置します。それが下の写真です

ナビゲーションバーのliに背景画像を追加します

body{
                background: #000;
            }
            ul{
                list-style: none;
                margin: 100px 100px;
            }
            li{
                width: 60px;
                height: 30px;
                line-height: 30px;
                float: left;
                background: #6cf;
                text-align: center;
                background: url(img/bg.png) no-repeat 100% 0;
            }
            a{
                color: #000;
                text-decoration: none;
            }

ログイン後にコピー

この時のページ効果はこんな感じです

ナニ？これには何か問題がありますか?監督、この脚本には何か問題があります!

確かに問題はありますが、どこに問題があるのでしょうか？

上の写真と下の写真を比較すると、各ナビゲーション (最後のものを除く) が次のナビゲーションに重なっていることがすぐにわかります。 li タグに margin-left:-15px; を追加するだけです。具体的なコードは次のとおりです

li{
                width: 80px;
                height: 30px;
                line-height: 30px;
                float: left;
                background: #6cf;
                text-align: center;
                background: url(img/bg.png) no-repeat 100% 0;
                margin-left: -15px;
            }

ログイン後にコピー

開くときに幅が足りなかったので、ここで li の幅を少し増やしました。パンくずリストのナビゲーションバーはこんな感じです

え？私たちの矢はどこにあるのでしょうか？

約束した矢はどこにありますか？

矢印 1 ～ 4 はどこですか?

もう一度前のステップに戻りましょう。最後のステップは、li タグに margin-left: -15px を追加することです。

フロントエンドのものには、通常、以前の属性が上書きされるという特徴があります。属性、DOM構造は上書きされませんが、2つの位置が重なっている場合、z-index属性が付加される前、または属性値が等しい場合には、後から書かれたDOM構造が上になります

これはまさにここに当てはまります。そのため、異なる z-index を li タグに個別に追加するだけで済みます (z-index 属性を有効にしたい場合は、最初に位置指定 (position:相対) を追加する必要があります)

ここでの z-index の値には多くの制限はありませんが、唯一のことは、最後の li タグが最も小さく、以下同様に徐々に増加し、最初の li タグが最大になるということです。

最終的なコードは次のようになります

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: #000;
            }
            ul{
                list-style: none;
                margin: 100px 100px;
            }
            li{
                width: 80px;
                height: 30px;
                line-height: 30px;
                float: left;
                background: #6cf;
                text-align: center;
                background: url(img/bg.png) no-repeat 100% 0;
                margin-left: -15px;
                position: relative;/*保证z-index有效*/
            }
            a{
                color: #000;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li style="z-index: 5;">
                <a href="#">主页</a>
            </li>
            <li style="z-index: 4;">
                <a href="#">主页2</a>
            </li>
            <li style="z-index: 3;">
                <a href="#">主页3</a>
            </li>
            <li style="z-index: 2;">
                <a href="#">主页4</a>
            </li>
            <li style="z-index: 1;">
                <a href="#">主页5</a>
            </li>
        </ul>
    </body>
</html>

ログイン後にコピー