[原創]利用CSS實現頁面換膚

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

     常常看到有的網站通過DropDownList、菜單或按鈕實現對整個網站改變頁面風格（換膚）。專門Google了一些這方面的資料，總結了一下實現以上功能大致可以分成兩類：
1、整個網站統一使用一個CSS檔案，保證一類風格。通過切換不同風格的CSS檔案實現換膚。這種方法實現
      起來比較簡單。
2、不同風格、不同布局的UseControl，使用相同的後台代碼（商務邏輯、功能）。通過重新導向頁面實現
     頁面換膚。這種方法比較複雜，以後再討論。

先看第一種方法：切換CSS檔案換膚。
1、正常的頁面如果需要指定所引用的CSS檔案，必須在<head></head>裡用<link>控制項指定CSS檔案，如

     如果需要切換CSS，就不能再定死這個<link>了。可以通過後台代碼動態地改變這個控制項的屬性。
     可以用<asp:placeholder>控制項來代替。placeholder控制項可以理解成一個控制項的容器，就像一個透明的包，你往裡面裝什麼，它就是什麼。
     現在頁面變成了這個樣子，我們在裡面放了一個空的placeholder來代替link.<head>

    <asp:placeholder id="MyCss" runat="server"/>
</head>

    在後台代碼中定義一個函數，負責往placeholder裡裝東西，這裡裝css檔案public void ChangeSkin(string cssFile)
{
    //產生一個新的HtmlGenericControl控制項，它是一個link控制項
    HtmlGenericControl objLink = new HtmlGenericControl("link");
    //定義這個Link的各項屬性
    objLink.ID = ID;
    objLink.Attributes["rel"] = "stylesheet";
    objLink.Attributes["type"] = "text/css";
    objLink.Attributes["href"] = cssFile;
    //把Link控制項加到PlaceHolder控制項中去
    MyCss.Controls.Add(objLink);
}

到這裡，可以在頁面裡放2個按鈕，按按鈕切換不同的CSS檔案

2、有的網站能把使用者選擇的樣式儲存起來，下次訪問繼續保留上次選擇的風格。
對於此類，可以用用戶端的Cookie來保留選擇的樣式。

private void Page_Load(object sender, System.EventArgs e)
{
           // 在此處放置使用者代碼以初始化頁面
          if(!Page.IsPostBack)
         {
          //判斷用戶端的瀏覽器是否支援Cookie
         if(Request.Browser.Cookies == false)
                        label1.Text = "瀏覽器不支援Cookie !";
           else
                        label1.Text = "瀏覽器支援Cookie !";
     //用戶端是否有Skin資訊儲存
         if(Request.Cookies["Skin"] == null)
        {
                  ChangeSkin("default.css");
                  label2.Text = "Cookie 為空白，預設CSS";
        }
       else
      {
        //根據用戶端保留的Cookie資訊，來載入不同的CSS樣式表檔案
         switch(Request.Cookies["Skin"].Value)
       {
                 case "Red" : ChangeSkin("mycss2.css");
                                       label2.Text = "Cookie中的CSS為紅色";
                                       break;
                  case "Blue" : ChangeSkin("mycss.css");
                                      label2.Text = "Cookie中的CSS為藍色";
                                        break;
                       default:     ChangeSkin("default.css");
//            break;
        }
      }


}

當使用者按下按鈕選擇樣式的時候，還需要保留這些資訊到Cookie中。

public void SetCookie(string style)
{

                HttpCookie myCookie = new HttpCookie("Skin");
                myCookie.Value = style;
                Response.Cookies.Add(myCookie);

}

        public void btClick(object src, EventArgs e)
        {
            SetCookie("Red");

            ChangeSkin("mycss2.css");
            label2.Text = "現在設為紅色" ;

        }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More