18.5 设置主题皮肤文件
接下来进入样式文件设计阶段。样式文件的功能是对系统页面元素进行修饰,使各页面以指定的样式效果显示。
18.5.1 设置按钮元素样式
文件mm.skin的功能是对页面中的各按钮元素进行修饰,使之以指定样式显示出来。文件mm.skin的主要实现代码如下。
<asp:Button runat="server" SkinID="anniu" BackColor="red" Font-Names="Tahoma" Font-Size="28pt" CssClass="Button" />
<asp:TextBox runat="server" SkinID="nn" BackColor="green" Font-Names="Tahoma" />
<asp:ListBox SkinID="lbSkin" runat="server" BackColor="#|daeeee" Font-Names="Tahoma" Font-Size="28pt" />
<asp:DropDownList SkinID="ddlSkin" runat="server" BackColor="#|daeeee" Font-Names="Tahoma" Font-Size="28pt" />
<asp:GridView SkinID="mm" runat="server" GridLines="Both" CssClass="Text" BackColor="White" BorderColor="Black"
BorderStyle="Solid" BorderWidth="1px" CellPadding="4" AutoGenerateColumns="False" Font-Names="Tahoma" Width="100%">
<FooterStyle BackColor="#|E28F4FF" ForeColor="#|33002828" />
<AlternatingRowStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<RowStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<SelectedRowStyle BackColor="#|E28F4FF" Font-Bold="True" ForeColor="#|66332828" />
<PagerStyle BackColor="#|E28F4FF" ForeColor="#|33002828" HorizontalAlign="Center" />
<HeaderStyle BackColor="#|333333" Font-Bold="True" ForeColor="yellow" Font-Names="Tahoma" BorderStyle="Solid" BorderWidth="1px" />
</asp:GridView>
18.5.2 设置页面元素样式
文件web.css的功能是对页面中的整体样式和Ajax控件的样式进行修饰,使之以指定样式显示出来。文件web.css的主要实现代码如下。
body {
font-family: "Tahoma";
font-size:28pt;
margin-top:0;
}
.Text {
font:Tahoma;
font-size:28pt;
}
.Table {
width:100%;
font-size: 28pt;
border:0;
font-family: Tahoma;
}
.Button {
font-family: "Tahoma";
font-size: 28pt; color: yellow;
border: 1px #|00332828 solid;color:#|00662828;
BORDER-BOTTOM: red 1px solid;
BORDER-LEFT: red 1px solid;
BORDER-RIGHT: red 1px solid;
BORDER-TOP: red 1px solid;
background-image:url(../Images/c_annu.gif);
background-color: #|cc332828;
CURSOR: hand;
font-style: normal;
}