0

私が取り組んでいる果樹園のサイトがあります。このサイトでは、ページのヘッダーとフッターで同じナビゲーションリンクを使用しています。秘訣は、リンクのスタイルを変える必要があるということです。これが私のコードの過度に単純化されたバージョンです：

<header>
  @Display(Model.Navigation)
</header>

...

<footer>
  @Display(Model.Navigation)
</footer>

ページを実行すると、次のHTMLが生成されます。

<header>
  <div class="zone zone-navigation">
    <article class="widget-navigation widget-menu-widget widget">
      <nav>
        <ul class="menu menu-main-menu">        
          <li class="current first"><a href="/Site/">Home</a></li>
          <li><a href="/Site/Blog">Blog</a> </li>
          <li><a href="/Site/Contact">Contact</a></li>
          <li class="last"><a href="/Site/About">About Us</a></li>
        </ul>
      </nav>
    </article>
  </div>
</header>

...

<footer>
  <div class="zone zone-navigation zone zone-navigation">
    <article class="widget-navigation widget-menu-widget widget widget-navigation widget-menu-widget widget">
      <nav>
        <ul class="menu menu-main-menu menu menu-main-menu">        
          <li class="current first"><a href="/Site/">Home</a></li>
          <li><a href="/Site/Blog">Blog</a> </li>
          <li><a href="/Site/Contact">Contact</a></li>
          <li class="last"><a href="/Site/About">About Us</a></li>
        </ul>
      </nav>
    </article>
  </div>
</footer>

Model.Navigationの2番目の使用法でクラス名が2回リストされているのは奇妙に思えます。とにかく、私は現在、参照しているcssファイルに次のcssクラス定義があります。

.menu-main-menu { list-style-type:none; display:inline; vertical-align:bottom; }
.menu-main-menu ul { float:left; margin-left:-1em; }
.menu-main-menu li { float:left; line-height:32px; border-left:1px solid green width:auto; font-size:10.5pt; font-weight:bold; font-family:Arial; }
.menu-main-menu li:first-child { border: 0;}
.menu-main-menu li a { display: block; padding: 0 1em; height:48px; }
.menu-main-menu li.current a, .menu-main-menu li.current a:hover {background:#d8e0be}
.menu-main-menu li a:hover {background:#e9e6d7; text-decoration:none}

私の最初のナビゲーションセクションは正しく見えます。フッターのナビゲーションアイテムのスタイルを変更して、見た目を変えるにはどうすればよいですか？ありがとうございました

4

1 に答える 1

1

.menu-main-menuクラスを含むヘッダータグとフッタータグを使用します。これは、ページ上の2つを区別するのに役立ちます。

.menu-main-menu { ... }
header .menu-main-menu { ... }
footer .menu-main-menu { ... }
于 2012-12-18T19:34:29.640 に答える