樣式與資料分離所帶來的不只是符合標準這樣的簡單,樣式既然與資料分離那麼樣式的切換則變得理所當然的了!但是網上這樣的中文教程實在是太少了!所以我收集了一部分中外**已經實現的技術資料整理出來供網友參考。
首先要具備不同內容的css檔案(最好每個檔案代表一種樣式,或是代表需要作出變動的部分)。這裡以三個為例:
第乙個是背景為紅色的css檔案(red.css)css中的內容為:
copy code
body
第二個是背景為綠色的css檔案(green.css)css中的內容為:
copy code
body
第三個是背景為黃色的css檔案(yellow.css)css中的內容為:
copy code
body
然後在xthml檔案中加入這三個css的鏈結
copy code
這三個中除了title不一樣外還有乙個地方有所不同,那就是rel。第乙個與第三個都是alternate stylesheet只有第二個是stylesheet。這第二個就是當然樣式。
在鏈結下面再匯入乙個js檔案,用來控制這個樣式切換
copy code
function setactivestylesheet(title)
} }
} function getactivestylesheet()
return null;
}在合適的地方加入三個切換按鈕
copy code
好了發布試試點那三個切換鏈結!是不是已經切換了樣式?
補遺:帶有記憶功能的js文件
copy code
function setactivestylesheet(title)
} }
function getactivestylesheet()
return null;
} function getpreferredstylesheet()
return null;
} function createcookie(name,value,days)
else expires = "";
document.cookie = name+"="+value+expires+";
path=/";
} function readcookie(name)
return null;
} window.onload = function(e)
window.onunload = function(e)
var cookie = readcookie("style");
var title = cookie ? cookie :
getpreferredstylesheet();
setactivestylesheet(title);
具體:
CSS樣式切換技巧
樣式與資料分離所帶來的不只是符合標準這樣的簡單,樣式既然與資料分離那麼樣式的切換則變得理所當然的了!但是網上這樣的中文教程實在是太少了!所以我收集了一部分中外 已經實現的技術資料整理出來供參考。首先要具備不同內容的 css檔案 最好每個檔案代表一種樣式,或是代表需要作出變動的部分 這裡以三個為例 第...
網頁製作CSS樣式九條技巧
第一.css字型的簡寫 平時當你使用css定義字型時你可能會這樣做 font size 1em line height 1.5em font weight bold font style italic font variant small caps font family verdana,serif...
CSS樣式設定技巧
一 水平居中設定 在實際工作中常會遇到需要設定水平居中的場景,比如為了美觀,文章的標題一般都是水平居中顯示的。我們將其分為兩種情況 行內元素和塊狀元素,塊狀元素裡面又分為定寬塊狀元素,以及不定寬塊狀元素。1.行內元素 如果被設定元素為文字 等行內元素時,水平居中是通過給父元素設定text align...