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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

零下一度

May 02, 2017 am 10:55 AM

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

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

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

次の種類のホームページ

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

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

訪問者に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>

以上が矢印付きブレッドクラムナビゲーションバーのサンプルコードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PM

Goofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています

時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AM

Pavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました

セクション要素との取引Apr 12, 2025 am 11:39 AM

2つの記事がまったく同じ日に公開されました。

graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AM

GraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります

コンポーネントレベルのCMSApr 12, 2025 am 11:09 AM

コンポーネントがデータが近くに住んでいる環境に住んでいる場合、視覚コンポーネントと

円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AM

ここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私

CSSで「戻る」ことは何をしますか？Apr 12, 2025 am 10:59 AM

Miriam Suzanneは、このテーマに関するMozilla開発者のビデオで説明しています。

現代の恋人Apr 12, 2025 am 10:58 AM

私はこのようなものが大好きです。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、