CSSを使用して不規則な背景画像を含むナビゲーションメニューを実装する方法に関するサンプルコードの共有-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSを使用して不規則な背景画像を含むナビゲーションメニューを実装する方法に関するサンプルコードの共有

黄舟

Jul 19, 2017 pm 03:13 PM

css 背景画像

一般に、ナビゲーションメニューの背景画像は比較的規則的ですが、通常、不規則な背景画像を持つ多くのナビゲーションバーにも遭遇します (たとえば、マウスを上に移動すると、背景画像が不規則になります。この例では、このタイプについてのみ説明します)。、下の写真に示すように:

(写真1)

マウスを上に動かすと、背景が赤い矢印に変わります。一見すると、この効果は特別なものではありません。 , しかし、私が描いた緑の枠の部分をよく見てみると、それぞれの部分がつながっていて、通常の方法でやれば、下の図のように実装できます。効果:

(写真 2)

は、ブロックが切断されていることを意味します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/jquery.js"></script><!-- wbg解决ie6下的背景 勿动！！！-->
    <!--[if IE 6]>
      <script src="js/ie_png.js" mce_src="js/ie_png.js">
      </script>
      <script type="text/javascript">   
          DD_belatedPNG.fix(&#39;.previous,img&#39;); 
     </script>
<![endif]--> <style type="text/css">body{
        font-size:12px;
        font-family:Arial, Helvetica, sans-serif;}body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {    
    margin:0;   
     padding:0;  
    list-style:none;} body img{
  border:none;}a{
 color:#000;
 border:0;
 text-decoration:none;}a:hover{
  color:#f00;
  text-decoration:none;}#warp{
    margin:20px auto;
    width: 960px;}body{
        background:url(img/bj.jpg) no-repeat center top #090909;}.nav{
        background:url(img/nav_bj.png) right no-repeat;
        _background:url(img/nav_bj.gif) right no-repeat;
        height:47px;
        width:638px;}.nav ul li{
            float:left;
            margin:0 -7px;/*这里的marign是实现这个效果最关键的地方*/
            display:inline;
            width:104px;}.nav ul li a{
                display:block;
                color:#FFFFFF;
                padding:7px 0px;
                _padding:5px 0px 6px;
                width:104px;
                float:left;
                text-align:center;
                font-family:Microsoft YaHei !important;}.nav ul li a span{
                    display:block;}.nav ul li a:hover{
                        background:url(img/a_hover.png) no-repeat;
                        _background:url(img/a_hover.gif) no-repeat;
                        color:#fff;}.nav ul .home a:hover{
                        background:url(img/home_hover.png) 7px center no-repeat;
                        _background:url(img/home_hover.gif) 7px center no-repeat;}</style> <title></title></head><body>
    <p id="warp">
        <p class="nav">
            <ul>
                <li class="home"><a href=""><span>Home</span>首页</a></li>
                <li><a href=""><span>About</span>关于九弘</a></li>
                <li><a href=""><span>Serve</span>服务项目</a></li>
                <li><a href=""><span>Case</span>活动案例</a></li>
                <li><a href=""><span>Information</span>公司动态</a></li>
                <li><a href=""><span>Partners</span>合作伙伴</a></li>
                <li><a href=""><span>Contact</span>联系方式</a></li>
            </ul>
        </p>
    </p></body></html>

ログイン後にコピー

この効果を実現するプロセスで最も重要な部分は、「li」の左右のマージン値を負の数に設定し、次に「li」の幅を設定し、「a」は同じように、このようにします。「a」の幅は固定されていますが、「li」の左右は余白のせいで縮みます。

以上がCSSを使用して不規則な背景画像を含むナビゲーションメニューを実装する方法に関するサンプルコードの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7434

CakePHP チュートリアル

1359

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

ブートストラップリストでデフォルトスタイルを削除する方法は？ Apr 07, 2025 am 10:18 AM

ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な！の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップにファイルをアップロードする方法 Apr 07, 2025 pm 01:09 PM

ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。

ブートストラップのレイアウト方法 Apr 07, 2025 pm 02:24 PM

Bootstrapを使用してWebサイトをレイアウトするには、グリッドシステムを使用してページをコンテナ、行、列に分割する必要があります。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント（XS、SM、MD、LG、XL）に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。

ブートストラップフレームワークを構築する方法 Apr 07, 2025 pm 12:57 PM

ブートストラップフレームワークを作成するには、次の手順に従ってください。CDN経由でブートストラップをインストールするか、ローカルコピーをインストールします。 HTMLドキュメントを作成し、ブートストラップCSSを＆lt; head＆gt;にリンクしますセクション。 bootstrap javascriptファイルを＆lt; body＆gt;に追加するセクション。ブートストラップコンポーネントを使用して、ニーズに合わせてスタイルシートをカスタマイズします。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。