ASP.NET2.0 Skin+CSS 测试

显示出来如上图:

ASPX页面的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SammyDiv.aspx.cs" Inherits="Buying_SammyDiv" Theme = "sammyTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Sammy Test Div</title>
    <style type ="text/css">
        #rtop{       
        margin:0 auto;
        height:30%;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #CCCC00;
        }
        
        #rbottom{        
        margin:0 auto;
        height:70%;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #CCee00;
        }
        
        #left{        
        float:left;
        height:100%;
        width:50%;    
        vertical-align:middle; 
        text-align:center; 
        font-family:Arial; 
        font-size:x-large;   
        background: #CCCCed;
        }
        
        #container{        
        width:900px;  
        height:600px;   
        vertical-align:middle; 
        text-align:center; 
        font-family:Arial; 
        font-size:x-large;  
        background-color:Green
        }
        
        #leftside{
        width:40%;
        height:60%;
        float:left;
        font-family:Arial; 
        font-size:x-large;
        vertical-align:middle; 
        text-align:center;
        background: gray;
        }
        
        #rightside{
        width:60%;
        height:60%;
        float:left;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #Cdfd00;
        }
        
        #foot{
        height:20%;
        clear:both;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background-color:InactiveBorder;
        }
        #header{
        height:20%;
        clear:both;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background-color:Red
        }
       

    </style>
</head>
<body>
    <form id="formtest" runat="server">
    <div  id="container">
        <div id="header">
            header   
        </div>
        <div id="midbody">
          <div id="leftside">
                leftside                
              <br />
              <asp:Calendar ID="Calendar1" runat="server"/>
              <br />
          </div>
          <div id="rightside">         
             <div id="rtop">
                right top
                <div style = "height: 500;">
                    <asp:Button ID = "ButtonTest" runat = "Server" Text = "Test"/>
                    <asp:Button ID = "Button1" runat = "Server" Text = "Test"/>
                    <asp:Button ID = "Button2" runat = "Server" Text = "Test"/>
                    <asp:Button ID = "Button3" runat = "Server" Text = "Test"/>
                </div>
             </div>
             <div id="rbottom">
                 <div id="left">
                    left
                    <div>
                        <asp:Button ID = "Button4" runat = "Server" Text = "Test"/>
                        <asp:Button ID = "Button5" runat = "Server" Text = "Test"/>
                        <asp:Button ID = "Button6" runat = "Server" Text = "Test"/>
                        <asp:Button ID = "Button7" runat = "Server" Text = "Test"/>
                    </div>
                 </div>
                 <div id="right">
                    right
                    <div style ="float:right">
                        <h3>Disabling Themes for a Control</h3>
                        <asp:Label ID="Label4" runat="server" Text="Hello 1" /><br />
                        <asp:Label ID="Label5" runat="server" Text="Hello 2" EnableTheming="False" /><br />
                        <asp:Label ID="Label6" runat="server" Text="Hello 3" /><br />
                    </div>
                 </div>
             </div>
          </div>
        </div>
        <div id="foot">
            foot           
        </div>
        </div>
    </form>
</body>
</html>
Skin.skin中的代码：
<asp:Button  runat = "Server" CssClass = "button60"/>

<asp:Label Font-Bold="true" ForeColor="orange" runat="server" />

<asp:Calendar BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1"
  Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="250px" 
  NextPrevFormat="ShortMonth" Width="330px" runat="server">
  <SelectedDayStyle BackColor="#333399" ForeColor="White" />
  <OtherMonthDayStyle ForeColor="#999999" />
  <TodayDayStyle BackColor="#999999" ForeColor="White" />
  <DayStyle BackColor="#CCCCCC" />
  <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
  <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" />
  <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt"
    ForeColor="White" Height="12pt" />
</asp:Calendar>
Style.CSS中的代码：
 .button60
{
    font-weight: bold;
    font-size: 12pt;
    background-image: url(../Images/EPS_Button_BG_60.gif);
    width: 60px;
    cursor: hand;
    color: Blue;
    height: 50px;
    
    text-align: center;
    border-style: none;
}

posted on 2007-02-28 15:54  Sammy  阅读(279)  评论(0)  编辑  收藏  举报

导航