效果图片:(注意这里有三个选项卡切换时有浅变效果)
Css代码:
body {
}
.accordionHeader
{
border:1px solid #2F4F4F;
background-color:#A6D0E6;
font-family:华文新魏;
font-size:16px;
font-weight:bold;
padding:5px;
margin-top:5px;
cursor:pointer;
}
.accordionContent
{
border:1px dashed #2F4F4F;
background-color:#FFFEDF;
font-family:Arial;
border-top:none;
padding:5px;
padding-top:10px;
}
主页显示代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX.NET-Accordion示例</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body style="text-align: center">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="text-align: center">
<cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" ContentCssClass="accordionContent"
FadeTransitions="true" FramesPerSecond="10" HeaderCssClass="accordionHeader" SelectedIndex="0"
TransitionDuration="500" Height="300" Width="400">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="" HeaderCssClass="">
<Header>
欢迎光临欧欧博客<a href="Http://chenou.cnblogs.com">首页</a>
</Header>
<Content>
程序员是我理想 喜欢网络 我是从游戏开始认识网络的<br />
以前的传奇 让陈天桥成为当时中国首富<br />
但是传奇流行的时候 我正在上高中 同学们不吃饭页要买点卡<br />
当时网吧点卡断货供求关系十分紧张 盛大就拿Exel表来发给网吧点卡号<br />
连印刷费都省了 陈天桥在它的点卡部门 叮嘱你们不是在印点卡纸 你们是在印钞票啊<br />
快快快啊!! 到现在陈天桥还为当时没有白天黑夜一起印还后悔啊!!
联系QQ:422280516(小号)
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" HeaderCssClass="">
<Header>
AJAX.NET之Accordion控件二<a href="Http://chenou.cnblogs.com">首页</a>
</Header>
<Content>
程序员是我理想 喜欢网络 我是从游戏开始认识网络的<br />
以前的传奇 让陈天桥成为当时中国首富<br />
但是传奇流行的时候 我正在上高中 同学们不吃饭页要买点卡<br />
当时网吧点卡断货供求关系十分紧张 盛大就拿Exel表来发给网吧点卡号<br />
连印刷费都省了 陈天桥在它的点卡部门 叮嘱你们不是在印点卡纸 你们是在印钞票啊<br />
快快快啊!! 到现在陈天桥还为当时没有白天黑夜一起印还后悔啊!!
联系QQ:422280516(小号)
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="" HeaderCssClass="">
<Header>
AJAX.NET之Accordion控件三<a href="Http://chenou.cnblogs.com">首页</a>
</Header>
<Content>
程序员是我理想 喜欢网络 我是从游戏开始认识网络的<br />
以前的传奇 让陈天桥成为当时中国首富<br />
但是传奇流行的时候 我正在上高中 同学们不吃饭页要买点卡<br />
当时网吧点卡断货供求关系十分紧张 盛大就拿Exel表来发给网吧点卡号<br />
连印刷费都省了 陈天桥在它的点卡部门 叮嘱你们不是在印点卡纸 你们是在印钞票啊<br />
快快快啊!! 到现在陈天桥还为当时没有白天黑夜一起印还后悔啊!!
联系QQ:422280516(小号)
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</div>
</form>
</body>
</html>
Css代码:
body {
}.accordionHeader{ border:1px solid #2F4F4F; background-color:#A6D0E6; font-family:华文新魏; font-size:16px; font-weight:bold; padding:5px; margin-top:5px; cursor:pointer;}.accordionContent{ border:1px dashed #2F4F4F; background-color:#FFFEDF; font-family:Arial; border-top:none; padding:5px; padding-top:10px;}主页显示代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>AJAX.NET-Accordion示例</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /></head><body style="text-align: center"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div style="text-align: center"> <cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="10" HeaderCssClass="accordionHeader" SelectedIndex="0" TransitionDuration="500" Height="300" Width="400"> <Panes> <cc1:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="" HeaderCssClass=""> <Header> 欢迎光临欧欧博客<a href="Http://chenou.cnblogs.com">首页</a> </Header> <Content> 程序员是我理想 喜欢网络 我是从游戏开始认识网络的<br /> 以前的传奇 让陈天桥成为当时中国首富<br /> 但是传奇流行的时候 我正在上高中 同学们不吃饭页要买点卡<br /> 当时网吧点卡断货供求关系十分紧张 盛大就拿Exel表来发给网吧点卡号<br /> 连印刷费都省了 陈天桥在它的点卡部门 叮嘱你们不是在印点卡纸 你们是在印钞票啊<br /> 快快快啊!! 到现在陈天桥还为当时没有白天黑夜一起印还后悔啊!! 联系QQ:422280516(小号) </Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" HeaderCssClass=""> <Header> AJAX.NET之Accordion控件二<a href="Http://chenou.cnblogs.com">首页</a> </Header> <Content> 程序员是我理想 喜欢网络 我是从游戏开始认识网络的<br /> 以前的传奇 让陈天桥成为当时中国首富<br /> 但是传奇流行的时候 我正在上高中 同学们不吃饭页要买点卡<br /> 当时网吧点卡断货供求关系十分紧张 盛大就拿Exel表来发给网吧点卡号<br /> 连印刷费都省了 陈天桥在它的点卡部门 叮嘱你们不是在印点卡纸 你们是在印钞票啊<br /> 快快快啊!! 到现在陈天桥还为当时没有白天黑夜一起印还后悔啊!! 联系QQ:422280516(小号) </Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="" HeaderCssClass=""> <Header> AJAX.NET之Accordion控件三<a href="Http://chenou.cnblogs.com">首页</a> </Header> <Content> 程序员是我理想 喜欢网络 我是从游戏开始认识网络的<br /> 以前的传奇 让陈天桥成为当时中国首富<br /> 但是传奇流行的时候 我正在上高中 同学们不吃饭页要买点卡<br /> 当时网吧点卡断货供求关系十分紧张 盛大就拿Exel表来发给网吧点卡号<br /> 连印刷费都省了 陈天桥在它的点卡部门 叮嘱你们不是在印点卡纸 你们是在印钞票啊<br /> 快快快啊!! 到现在陈天桥还为当时没有白天黑夜一起印还后悔啊!! 联系QQ:422280516(小号) </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> </div> </form></body></html>
浙公网安备 33010602011771号