當前位置:才華齋>設計>網頁設計>

母版頁時內容頁是如何使用css和javascript

網頁設計 閱讀(1.32W)

好處有了,問題也接著來了。原來在頻道頁和列表頁中有其各自的css引入和一些javascript函式,當使用母版頁時,放在內容頁中這些css樣式和javascript函式怎麼處理呢?因為大家知道,使用母版頁的內容頁是不能包含標記的,而css和javascript函式的宣告是要放到中間的,這些css樣式和javascript函式如何處理呢?上網查了一下,大致有三種解決方案:方案一:把所有的css樣式和javascript函式放到母版頁的中,我覺得這樣做的弊端就是導致母版頁的區特別臃腫,同時如果原來兩個頻道頁中包含同名的css宣告或javascript函式,但卻是不同樣式或執行不同操作,怎麼辦呢?所以這第一種方案很快被我否定了。方案二是在內容頁的PageLoad事件中通過程式碼來指定本內容頁的css檔案。具體程式碼如下:

母版頁時內容頁是如何使用css和javascript

複製程式碼 程式碼如下:

static public class ControlHelper

{

static public void AddStyleSheet(Page page, string cssPath)

{

HtmlLink link = new HtmlLink();

= cssPath;

ibutes["rel"] = "stylesheet";

ibutes["type"] = "text/css";

(link);

}

}

這樣,在具體頁面,我們就可以通過如下程式碼新增 CSS 引用:

複製程式碼 程式碼如下:

protected void Page_Load(object sender, EventArgs e)

{

tyleSheet(, "css/");

}

這種解決方案的好處時可以在程式執行時動態更改所需的css檔案,但是對javascript函式處理起來該怎麼做呢?再說有必要把本該加在html程式碼中的css和javascript通過cs程式碼來加入嗎?因此,這種解決方案也很快被我否定了。剩下的第三種解決方案就是在母版頁的中新增一個內容控制元件,然後在內容頁中在對應的內容控制元件中寫css和javascript程式碼。聽起來這個這個解決方案應該是最方便,最適宜的解決方法。可是當我把ContentPlaceHolder控制元件拖放到

白天的時候,看到這我就以為這種方法行不通了,差點就放棄了。晚上回家想找找更好的解決方案,可所有的文章基本上都是說的前兩種,對第三種解決方案有人說報錯,不行。看來碰到這個提示後放棄的人還真不少。我沒理這個錯誤,直接轉到內容頁,,在內容頁中插入以下程式碼:

看了一下,內容頁中沒有報錯,看來有戲。可轉到內容頁的設計檢視一看,出現瞭如下介面:

心涼了一下,因為沒看到我上面應用的'css樣式的效果,我的css檔案的程式碼如下:

複製程式碼 程式碼如下:

#content

{

text-align:center;

width:200px;

height:100px;

background-color:#00FF00;

color:#FF0000;

font-size:12px;

}

也就是讓id為content的div寬度200px,高度100px,文字居中,背景顏色為為綠色,字型為紅色,12px。不甘心的我按下了F5除錯鍵,令人驚喜的一個畫面出現了:

這說明css應用成功了,同時也看到了那個測試可愛的hello world對話方塊alert了出來。成功了!

總結一下,其實很多人開始的想法和我一樣,想如何用最簡單的方法實現在內容頁中使用css和javascript的功能。他們中的很多人可能也找到我找到的那篇文章,但是當碰到我的那個母版頁中的錯誤提示後就放棄了,也許有人堅持到了第二步,可是在設計檢視中沒看到css的應用效果後可能也放棄了。其實只要在堅持一下就成功了!餘世維說的好“比別人多想一點,你就能成功!”,確實很有道理啊。