文章教程

18.5设置主题皮肤文件

8/31/2020 9:56:04 PM 人评论 次浏览

接下来进入样式文件设计阶段。样式文件的功能是对系统页面元素进行修饰,使各页面以指定的样式效果显示。

文件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>

文件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;
}

教程类别