17.5设置主题皮肤

17.5　设置主题皮肤

主题皮肤的功能是对系统页面元素进行修饰，使各页面以指定的样式效果显示。作为一个Web站点，优美的主题效果会给人带来眼前一亮的效果。好的页面设计不但会使客户赏心悦目，也会吸引更多的浏览用户驻足。

1．设置按钮元素样式

文件web.skin的功能是对页面中的各按钮元素进行修饰，使之以指定样式显示出来。文件web.skin的主要实现代码如下。

<%-- Button按钮的样式 --%>
<asp:Button runat="server" SkinID="btnSkin" BackColor="red" Font-Names="Tahoma" Font-Size="9pt" CssClass="Button" />
<%-- TextBox按钮的样式 --%>
<asp:TextBox runat="server" SkinID="mm" BackColor=" red " Font-Names="Tahoma" />
<%-- ListBox按钮的样式 --%>
<asp:ListBox SkinID="lbSkin" runat="server" BackColor="#|daeeee" Font-Names="Tahoma" Font-Size="9pt" />
<%-- DropDownList按钮的样式 --%>
<asp:DropDownList SkinID="ddlSkin" runat="server" BackColor="#|daeeee" Font-Names="Tahoma" Font-Size="9pt" />

2．设置页面元素样式

文件web.css的功能是对页面内的整体样式和Ajax控件的样式进行修饰，使之以指定样式显示出来。文件web.css的主要实现代码如下。

body {
　font-family: "Tahoma";
　font-size:9pt;
　　　margin-top:0;
}
　.Text{
　　font:Tahoma;
　　font-size:9pt;
}
　.Button{
　　font-family: "Tahoma";
　　font-size: 9pt; color: #|003399;
　　border: 1px #|003399 solid;color:#|006699;
　　BORDER-BOTTOM: #|93bee2 1px solid; 
　　BORDER-LEFT: #|93bee2 1px solid; 
　　BORDER-RIGHT: #|93bee2 1px solid; 
　　BORDER-TOP: #|93bee2 1px solid;
　　background-image:url(../Images/c_annu.gif);
　　background-color: #|e8f4ff;
　　CURSOR: hand;
　　font-style: normal;
}