ASP.NET2.0 Skin+CSS 测试-优快云博客

本文介绍了一个使用ASPX实现的网页布局示例，详细展示了如何通过内联样式和外部CSS文件来设置不同区块的样式，包括头部、主体和底部等部分，并演示了按钮和日历控件的样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示出来如上图:

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">

<title>Sammy Test Div</title>

#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>

header

</div>

leftside

<br />

<asp:Calendar ID="Calendar1" runat="server"/>

<br />

</div>

right top

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

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>

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>

foot

</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">

<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;

}

转载于:https://www.cnblogs.com/songsh96/archive/2007/02/28/659746.html