完全採用CSS的CROSS BROWSER TABBED PAGES

來源:互聯網
上載者:User

作者:Stu Nicholls   翻譯:forestgan

資訊

這是 cssplay的站長根據其最近創作的dropdown and flyout menus而改編而成的,
當滑鼠按順序懸停在菜單上時,可在同一位置顯示不同的頁面,可在Opera,
IE5.5, IE6, IE7 beta,Safari 1.3.2 & Firefox.中正確顯示和工作,不相容Mac IE5。

滑鼠移至上方在菜單和頁面上時顯示文字與圖片以及連結,捲軸要加在每個頁上。

樣式

對於非IE瀏覽器來說是比較簡單的,只用一個樣式表。

<link rel="stylesheet" media="all" type="text/css" href="one_page.css"/>

The one_page.css file

而IE還需要專門為它加一個,用條件判斷加入。

<!--[if lte IE 6]>  <link rel="stylesheet" media="all"   type="text/css" href="one_page_ie.css" /><![endif]--> 

The one_page_ie.css file

xhtml

你會看到用條件判斷來給 IE添加表格,. 其他瀏覽器不會用到表格,而將正常使用無序列表。
文件類型聲明是必須要加的,反之不能正常工作。

示範:one_page.html

原文地址:http://www.cssplay.co.uk/menu/one_page.html 

相關文章

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.