使用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>
至此,目標實現 ^_^



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.