使用css在不同頁面上使用同樣的導航代碼

來源:互聯網
上載者:User
css|導航|頁面

查了相關的資料,在這個過程中發現,使用flash實現這樣的效果
需要通過後台,這個因為我不太瞭解,暫且不表,說說最近在學的css

如何用css實現在不同頁面上使用相同的導航代碼

原理:
通過為每個頁面的body定義一個id
根據css的繼承特性("好像有這個說法吧,不好意思記得不是很清楚")
利用#body #nav a的形式
實現在不同頁面中
與頁面相對應的連結的顏色與其它連結的顏色不同

下面看看My Code:

常規的連結可以這樣定義
#topnav a:hover,
#topnav a:focus{background:#555;}
#topnav a:active {
 background:#920D02;
 color:#fff;
}

定義一個區別於一般連結的超連結
#home #nav-home a,
#contact #nav-contact a {
  background:#91cc14;
  color:#000;
  }

xhtml
<BODY id="home">
 <div id="topnav">
  <ul>
   <li id="nav-home"><a href="index-cn.shtml">首頁</a></li>
   <li id="nav-contact"><a href="contact.shtml">聯絡我們</a></li>
  </ul>
 </div>
至此,目標實現 ^_^



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。