关于ASP.NET 中的主题
2019獨角獸企業重金招聘Python工程師標準>>>
網站的外觀是否美觀將直接決定其受歡迎的程度,這就意味著網站在開發過程中設計和實現美觀實用的用戶界面是非常重要的。
在ASP.net 2.0之前主要是用樣式表css來實現外觀設計。但在ASP.Net 2.0之后,提供了《主題》的新功能。
概述:
組成元素:由外觀、級聯樣式表、圖像和其他資源組成,至少包含外觀,它是在網站或web服務器上的特殊目錄定義的。
1、外觀是主題的核心內容,用于定義頁面中服務器控件的外觀,包含各個控件的屬性設置。
創建外觀文件:(外觀文件的后綴名:.skin)
在創建控件的外觀時一般是默認的,想讓不默認顯示就得設置SkinID屬性,然后在網頁中進行調用。
在網站中添加主題的時:在文本的頭部標簽中添加:Theme="主題的名稱"引用主題。
注:如果在控件代碼中設置了與控件外觀相同的屬性,則頁面最終顯示以控件外觀的設置效果為主。
例如:在外觀文件中添加
1 <asp:TextBox runat="server" Text="Hello World" BackColor="#FF0C0" BorderColor="#FFC080" Font-Size="12pt" 2 ForeColor="#C04000" Width="194px" /> 3 <asp:TextBox SkinID="textboxSkin" runat="server" Text="Hello World" BackColor="Red" 4 BorderColor ="Olive" BorderStyle="Dashed" Font-Size="15pt" Width="224px"/>在網站中添加兩個textbox控件:
1 <div> 2 <table > 3 <tr> 4 <td style="width:100px"> 5 默認外觀 6 </td> 7 <td style="width:247px"> 8 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 9 </td> 10 </tr> 11 <tr> 12 <td style="width:100px">命名外觀</td> 13 <td style="width:247px"> 14 <asp:TextBox ID="TextBox" runat="server" SkinID="textboxSkin"></asp:TextBox> 15 </td> 16 </tr> 17 </table> 18 </div>顯示的結果:
?
2、為主題添加css樣式。
主題的樣式表主要用于設置頁面和普通HTML控件的外觀樣式。【主題中的css樣式表示自動作為主題的一部分加以應用的】
?
1 body { 2 text-align:center ; 3 color:yellow; 4 background-color:navy; 5 } 6 a:link{ 7 color:white; 8 text-decoration:underline ; 9 } 10 a:visited{ 11 color:white; 12 text-decoration:underline; 13 14 } 15 a:hover{ 16 color:fuchsia; 17 text-decoration:underline; 18 font-style:italic; 19 } 20 input{ 21 border-color:yellow; 22 }在頁面中調用
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="主題練習2.aspx.cs" Inherits="東騰科技官網.主題.主題練習2" 2 Theme ="主題樣式表"%> 3 <!DOCTYPE html> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 7 <title>為主題添加css樣式</title> 8 </head> 9 <body> 10 <form id="form1" runat="server"> 11 <div> 12 為主題添加css樣式表 13 <table> 14 <tr> 15 <td style="width:100px"> 16 <a href="主題練習.aspx">東騰科技</a> 17 </td> 18 <td style="width:100px"> 19 <a href ="主題練習.aspx">東騰科技</a> 20 </td> 21 </tr> 22 <tr> 23 <td style="100px"> 24 <input id="Button1" type="button" value ="button" /> 25 </td> 26 </tr> 27 </table> 28 </div> 29 </form> 30 </body> 31 </html>?
3、應用主題
一、指定和禁用主題
不僅可以對網頁或者網站應用主題,還可以對全局應用主題。
1.為單個頁面指定主題可以將@page指令的Theme或者styleSheeTTheme屬性設置為要使用的主題的名稱:
<%@page Theme ="ThemeName"%>或<%@Page StyleTheme="ThemeName"%>
禁用單個頁面的主題,只要將@Page指令的EnableTheming屬性設置成false即可。<%@Page EnableTheming="false"%>
如果想禁用單個控件的主題,只要將控件的EnableTheming屬性設置為false即可。<asp:Button id="Button1" runat="server" Enable Theming="false"/>
2.位應用程序指定和禁用主題
為了快速的為整個網站的所有頁面設置相同的主題,可以設置web.config文件中<pages>配置節的內容:
1 <congfiguration> 2 <system.web> 3 <pages theme="ThemeName"></pages> 4 </system.web>4.動態添加主題
1 public void Page_PreInit(Object sender,EventArgs e) 2 { 3 string t = "動態主題1"; 4 if(Request.QueryString["t"]!=null ) 5 { 6 Page.Theme = Request.QueryString["t"].ToString(); 7 } 8 //string theme = "動態主題1"; 9 //if (Request.QueryString["theme"]==null ) 10 //{ 11 // theme = "動態主題1"; 12 //} 13 //else 14 //{ 15 // theme = Request.QueryString["theme"]; 16 // // theme = "動態主題1"; 17 //} 18 //Page.Theme = theme; 19 //ListItem item = drop1.Items.FindByValue(theme); 20 //if (item != null) 21 //{ 22 // item.Selected = true; 23 //} 24 } protected void drop1_SelectedIndexChanged(object sender, EventArgs e){if (drop1.Text=="主題一"){Response.Redirect("動態添加主題?t=動態主題1");}if (drop1.Text=="主題二"){Response.Redirect("動態添加主題.aspx?t=動態主題2");}}} 1 <body> 2 <form id="form1" runat="server"> 3 <div > 4 <h2> 5 動態添加主題 6 </h2> 7 </div> 8 <p> 9 <asp:Label ID="label1" runat="server" Text="選擇主題:"></asp:Label> 10 <asp:DropDownList ID="drop1" runat="server" OnSelectedIndexChanged="drop1_SelectedIndexChanged" > 11 <asp:ListItem Text="主題一"></asp:ListItem> 12 <asp:ListItem Text="主題二"></asp:ListItem> 13 </asp:DropDownList> 14 15 <asp:HyperLink ID="hyper1" runat="server" Text="返回" ></asp:HyperLink> 16 </p> 17 <p> 18 <asp:Label ID="label2" runat="server" Text="默認外觀:"></asp:Label> 19 <asp:TextBox ID ="TextBox1" runat="server" ></asp:TextBox> 20 </p> 21 <p> 22 <asp:Label ID="label3" runat="server" Text="命名外觀:"></asp:Label> 23 <asp:TextBox ID ="TextBox2" runat="server" SkinID="textboxSkin" ></asp:TextBox> 24 </p> 25 26 <asp:LinkButton ID="LinkButton1" runat="server" style="z-index: 1; left: 10px; top: 178px; position: absolute">LinkButton</asp:LinkButton> 27 28 <asp:Button ID="Button1" runat="server" style="z-index: 1; left: 118px; top: 193px; position: absolute" Text="Button" /> 29 30 </form> 31 </body> 32 </html>?
轉載于:https://my.oschina.net/dongteng/blog/684362
總結
以上是生活随笔為你收集整理的关于ASP.NET 中的主题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java虚拟机规范阅读(三)异常
- 下一篇: 微信公众平台开发5:翻译功能