2012-12-18 58 views
0

我有一個正在使用的果園網站。該站點在頁面的頁眉和頁腳中使用相同的導航鏈接。訣竅是,鏈接需要以不同的風格。下面是我的代碼過於簡單求版本:該類名稱中的第二個用途列出兩次造型導航果園中的兩種不同方式頁面

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

這似乎很奇怪:

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

... 

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

當我運行的頁面,會生成以下HTML Model.Navigation。無論如何,我現在有一個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} 

我的第一導航部分看起來正確。如何在頁腳中設置導航項目的樣式,使其看起來不同?謝謝

回答

1

使用包含.menu-main-menu類的頁眉和頁腳標籤。這將幫助您區分頁面上的兩個:

.menu-main-menu { ... } 
header .menu-main-menu { ... } 
footer .menu-main-menu { ... } 
+0

這似乎並不奏效。 –

+0

你能解釋什麼不起作用嗎?它沒有針對這些項目,或者沒有按照正確的順序排列在堆棧中? – MikeTedeschi