本站原創內容,轉載請註明出處網頁教學網。
大家都見過好多網頁可以實現多種風格的顯示，比如動網論壇等等，而且好多網站都 設定多種風格，方便使用者按照自己的設定風格來瀏覽你的網站。
實現的方法我在這裡不做討論。今天我給大家介紹一種特簡單的方法，用CSS+JS簡單 方法就可以實現網頁的多種風格顯示。
本教程提供的方法希望對大家做首頁的時候有用。
我認為這是一種最好的實現方法了，如果大家還有其他簡單的方法可以和我討論。QQ ：76312395 網站：http://www.webjx.com，不說廢話了，下面開始給大家介紹如何?的方 法：
我們設定網頁的風格時通常是使用CSS來設定，下面代碼：
<link rel="stylesheet" type="text/css" href="style1.css" />
使用上面的代碼通常我們事先設定好style1.css的內容，然後把上面的代碼放到head 地區內，如果你不清楚的話，你可以去看看相關CSS的教程來設定。當網頁被載入之後將按 style1.css設定的風格來顯示我們網頁的內容。如果我們想實現多種風格的顯示，，那麼我們 就要對上述標籤的內容進行稍微改變了，我們可以添加一個title屬性，如下代碼：
<link rel="stylesheet" type="text/css" href="style1.css" title="style1" />
如果把上面的代碼添加到網頁中，瀏覽頁面時效果和上面的顯示效果是一樣的，但是 這時我們已經給載入的style1.css命名了一個標題。這個風格就是我們網頁的預設風格，這時 如果我們還想添加其他的風格，那麼這時我們只有來改變rel屬性的值了。具體代碼如下：
<link rel="alternate" type="text/css" href="style2.css" title="style2" />
當瀏覽器瀏覽時style2.css也將被載入，但是這時由於rel的屬性為alternate，就實 現了雖然載入了但是不會被顯示出效果的。我們如果也想使style2.css來實現顯示效果，那麼 這時的辦法是我們注意到了上面的代碼都有title屬性，我們可以設法使用一個函數來調用 title屬性的之來實現讓網頁顯示style2.css的效果。這是我們可以使用js來編寫一個函數來 實現網頁多種風格的顯示了。
我們實現的方法是在網頁上做多個串連(當然串連的做法非常多的，比如動網論壇是用 的下拉式功能表)，當單擊串連時去調用不同的CSS檔案，從而實現了網頁多種風格的顯示。在這裡 因為函數的內容比較多，我們可以做成一個js檔案，然後再網頁上添加如下代碼：
<script type="text/javascript" src="stylealter.js"></script>
然後我們在網頁的body中添加如下代碼：
<a href="#" >sytle1風格顯示</a>
<a href="#" >sytle2風格顯示</a>
提供給大家源檔案：
<HEAD>
<TITLE>設定網頁的多種風格樣本</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK title="style1" href="style1.css" type=text/css rel="stylesheet">
<LINK title="style2" href="style2.css" type=text/css rel="alternate stylesheet">
<SCRIPT src="stylealter.js" type=text/javascript></SCRIPT>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>
</HEAD>
<BODY>
<P>網頁教學網http://www.webjx.com預設的風格</P>
<br/><br/>
<A href="#">默 認風格</A>
<BR>
<A href="#">第 二中風格</A>
</BODY>
</HTML>
把上面的代碼儲存為一個副檔名為.htm(或.html)的檔案
提供style1.css 、style2.css、 stylealter.js下載
點擊這裡看看示範效果吧！
當然我給大家提供的上面的.htm(或.html)檔案和style1.css 、style2.css與 stylealter.js要方法同一目錄下，如果不在同目錄那麼你就要改變href="style1.css"和 src="stylealter.js"的目錄了！
本例子目的就是給大家介紹網頁顯示多種風格的方法，CSS設定非常簡單，希望大家學 會方法設定出更加複雜的CSS，你的頁面就漂亮了。去試試吧！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
