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  阅读(278)  评论(0编辑  收藏  举报

导航