ASP.NET2.0 Skin+CSS 测试

最新推荐文章于 2025-08-12 21:14:49 发布

啊拉贝

最新推荐文章于 2025-08-12 21:14:49 发布

阅读量528

点赞数

文章标签： asp.net css button server div asp

本文展示了一个使用ASPX编写的网页布局实例，包括不同区域的划分如头部、主体及底部等，并应用了多种样式设置，同时集成了服务器控件如按钮和日历等。

摘要生成于 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;

}