以下是 jq+css3下拉滑动选项卡特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>jquery+css3下拉滑动选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css' />-->
<noscript>
<style>
.st-accordion ul li {
height: auto;
}
.st-accordion ul li > a span {
visibility: hidden;
}
</style>
</noscript>
</head>
<body>
<div class="container">
<h1>jquery+css3下拉滑动选项卡</h1>
<div class="more">
<a href="index.html" class="current">Default Demo</a>
<a href="index2.html">Autocollapse Demo</a>
<p>
<strong>In this demo:</strong> More than one content panel
can be open at a time
</p>
</div>
<div class="wrapper">
<div id="st-accordion" class="st-accordion">
<ul>
<li>
<a href="#">
About<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
She packed her seven versalia, put her
initial into the belt and made herself on the
way.
</p>
<p>
When she reached the first hills of the
Italic Mountains, she had a last view back on
the skyline of her hometown Bookmarksgrove, the
headline of Alphabet Village and the subline of
her own road, the Line Lane.
</p>
<p>
Even the all-powerful Pointing has no control
about the blind texts it is an almost
unorthographic life One day however a small line
of blind text by the name of Lorem Ipsum decided
to leave for the far World of Grammar.
</p>
<img src="images/1.jpg" alt="image01" />
<img src="images/2.jpg" alt="image02" />
<img src="images/3.jpg" alt="image03" />
<img src="images/4.jpg" alt="image04" />
<img src="images/5.jpg" alt="image05" />
<img src="images/6.jpg" alt="image06" />
</div>
</li>
<li>
<a href="#">
Admissions<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
Separated they live in Bookmarksgrove right
at the coast of the Semantics, a large language
ocean.
</p>
<p>
A small river named Duden flows by their
place and supplies it with the necessary
regelialia. It is a paradisematic country, in
which roasted parts of sentences fly into your
mouth.
</p>
<img src="images/7.jpg" alt="image07" />
<img src="images/8.jpg" alt="image08" />
<img src="images/9.jpg" alt="image09" />
<img src="images/10.jpg" alt="image10" />
<img src="images/11.jpg" alt="image11" />
<img src="images/12.jpg" alt="image12" />
</div>
</li>
<li>
<a href="#">
Education<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
O my friend - but it is too much for my
strength - I sink under the weight of the
splendour of these visions!
</p>
<p>
A wonderful serenity has taken possession of
my entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence
in this spot, which was created for the bliss of
souls like mine.
</p>
</div>
</li>
<li>
<a href="#">
Research<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
The bedding was hardly able to cover it and
seemed ready to slide off any moment. His many
legs, pitifully thin compared with the size of
the rest of him, waved about helplessly as he
looked. "What's happened to me?"
</p>
<p>
He thought. It wasn't a dream. His room, a
proper human room although a little too small,
lay peacefully between its four familiar walls.
</p>
</div>
</li>
<li>
<a href="#">
Community<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.
</p>
<p>
Drops of rain could be heard hitting the
pane, which made him feel quite sad.
</p>
</div>
</li>
<li>
<a href="#">News<span class="st-arrow">Open or Close</span></a>
<div class="st-content">
<p>
It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.
</p>
<p>
Drops of rain could be heard hitting the
pane, which made him feel quite sad.
</p>
</div>
</li>
<li>
<a href="#">
Campus<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
O my friend - but it is too much for my
strength - I sink under the weight of the
splendour of these visions!
</p>
<p>
A wonderful serenity has taken possession of
my entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence
in this spot, which was created for the bliss of
souls like mine.
</p>
</div>
</li>
<li>
<a href="#">
Events<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.
</p>
<p>
Drops of rain could be heard hitting the
pane, which made him feel quite sad.
</p>
</div>
</li>
<li>
<a href="#">
Alumni<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.
</p>
<p>
Drops of rain could be heard hitting the
pane, which made him feel quite sad.
</p>
</div>
</li>
<li>
<a href="#">
Contact<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
No one rejects, dislikes, or avoids pleasure
itself, because it is pleasure, but because
those who do not know how to pursue pleasure
rationally encounter consequences that are
extremely painful.
</p>
<p>
Nor again is there anyone who loves or
pursues or desires to obtain pain of itself,
because it is pain, but because occasionally
circumstances occur in which toil and pain can
procure him some great pleasure.
</p>
</div>
</li>
<li>
<a href="#">
Research<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
The bedding was hardly able to cover it and
seemed ready to slide off any moment. His many
legs, pitifully thin compared with the size of
the rest of him, waved about helplessly as he
looked. "What's happened to me?"
</p>
<p>
He thought. It wasn't a dream. His room, a
proper human room although a little too small,
lay peacefully between its four familiar walls.
</p>
</div>
</li>
<li>
<a href="#">
Community<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.
</p>
<p>
Drops of rain could be heard hitting the
pane, which made him feel quite sad.
</p>
</div>
</li>
<li>
<a href="#">News<span class="st-arrow">Open or Close</span></a>
<div class="st-content">
<p>
It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.
</p>
<p>
Drops of rain could be heard hitting the
pane, which made him feel quite sad.
</p>
</div>
</li>
<li>
<a href="#">
Research<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
The bedding was hardly able to cover it and
seemed ready to slide off any moment. His many
legs, pitifully thin compared with the size of
the rest of him, waved about helplessly as he
looked. "What's happened to me?"
</p>
<p>
He thought. It wasn't a dream. His room, a
proper human room although a little too small,
lay peacefully between its four familiar walls.
</p>
</div>
</li>
<li>
<a href="#">
Community<span class="st-arrow">
Open or
Close
</span>
</a>
<div class="st-content">
<p>
It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.
</p>
<p>
Drops of rain could be heard hitting the
pane, which made him feel quite sad.
</p>
</div>
</li>
<li>
<a href="#">News<span class="st-arrow">Open or Close</span></a>
<div class="st-content">
<p>
It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.
</p>
<p>
Drops of rain could be heard hitting the
pane, which made him feel quite sad.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function () {
$('#st-accordion').accordion();
});
</script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>jquery+css3下拉滑动选项卡 - 程序员设计师联盟淘宝店</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css' />-->
<noscript>
<style>
.st-accordion ul li{
height:auto;
}
.st-accordion ul li > a span{
visibility:hidden;
}
</style>
</noscript>
</head>
<body>
<div class="container">
<h1>jquery+css3下拉滑动选项卡</h1>
<div class="more">
<a href="index.html">Default Demo</a>
<a href="index2.html" class="current">Autocollapse Demo</a>
<p><strong>In this demo:</strong> Only one content panel can be
open at a time</p>
</div>
<div class="wrapper">
<div id="st-accordion" class="st-accordion">
<ul>
<li>
<a href="#">Photography<span class="st-arrow">Open
or Close</span></a>
<div class="st-content">
<p>She packed her seven versalia, put her
initial into the belt and made herself on the
way.</p>
<p>When she reached the first hills of the
Italic Mountains, she had a last view back on
the skyline of her hometown Bookmarksgrove, the
headline of Alphabet Village and the subline of
her own road, the Line Lane.</p>
<p>Even the all-powerful Pointing has no control
about the blind texts it is an almost
unorthographic life One day however a small line
of blind text by the name of Lorem Ipsum decided
to leave for the far World of Grammar.</p>
<img src="images/1.jpg" alt="image01"/>
<img src="images/2.jpg" alt="image02"/>
<img src="images/3.jpg" alt="image03"/>
<img src="images/4.jpg" alt="image04"/>
<img src="images/5.jpg" alt="image05"/>
<img src="images/6.jpg" alt="image06"/>
</div>
</li>
<li>
<a href="#">Web Design<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>Separated they live in Bookmarksgrove right
at the coast of the Semantics, a large language
ocean.</p>
<p>A small river named Duden flows by their
place and supplies it with the necessary
regelialia. It is a paradisematic country, in
which roasted parts of sentences fly into your
mouth.</p>
<img src="images/7.jpg" alt="image07"/>
<img src="images/8.jpg" alt="image08"/>
<img src="images/9.jpg" alt="image09"/>
<img src="images/10.jpg" alt="image10"/>
<img src="images/11.jpg" alt="image11"/>
<img src="images/12.jpg" alt="image12"/>
</div>
</li>
<li>
<a href="#">Illustrations<span class="st-arrow">Open
or Close</span></a>
<div class="st-content">
<p>O my friend - but it is too much for my
strength - I sink under the weight of the
splendour of these visions!</p>
<p>A wonderful serenity has taken possession of
my entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence
in this spot, which was created for the bliss of
souls like mine.</p>
</div>
</li>
<li>
<a href="#">Miscancellous<span class="st-arrow">Open
or Close</span></a>
<div class="st-content">
<p>The bedding was hardly able to cover it and
seemed ready to slide off any moment. His many
legs, pitifully thin compared with the size of
the rest of him, waved about helplessly as he
looked. "What's happened to me?"</p>
<p>He thought. It wasn't a dream. His room, a
proper human room although a little too small,
lay peacefully between its four familiar walls.</p>
</div>
</li>
<li>
<a href="#">References<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.</p>
<p>Drops of rain could be heard hitting the
pane, which made him feel quite sad.</p>
</div>
</li>
<li>
<a href="#">Internship<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.</p>
<p>Drops of rain could be heard hitting the
pane, which made him feel quite sad.</p>
</div>
</li>
<li>
<a href="#">Jobs<span class="st-arrow">Open or Close</span></a>
<div class="st-content">
<p>O my friend - but it is too much for my
strength - I sink under the weight of the
splendour of these visions!</p>
<p>A wonderful serenity has taken possession of
my entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence
in this spot, which was created for the bliss of
souls like mine.</p>
</div>
</li>
<li>
<a href="#">Events<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.</p>
<p>Drops of rain could be heard hitting the
pane, which made him feel quite sad.</p>
</div>
</li>
<li>
<a href="#">Newsletter<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.</p>
<p>Drops of rain could be heard hitting the
pane, which made him feel quite sad.</p>
</div>
</li>
<li>
<a href="#">Contact<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>No one rejects, dislikes, or avoids pleasure
itself, because it is pleasure, but because
those who do not know how to pursue pleasure
rationally encounter consequences that are
extremely painful.</p>
<p>Nor again is there anyone who loves or
pursues or desires to obtain pain of itself,
because it is pain, but because occasionally
circumstances occur in which toil and pain can
procure him some great pleasure.</p>
</div>
</li>
<li>
<a href="#">Events<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.</p>
<p>Drops of rain could be heard hitting the
pane, which made him feel quite sad.</p>
</div>
</li>
<li>
<a href="#">Newsletter<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.</p>
<p>Drops of rain could be heard hitting the
pane, which made him feel quite sad.</p>
</div>
</li>
<li>
<a href="#">Contact<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>No one rejects, dislikes, or avoids pleasure
itself, because it is pleasure, but because
those who do not know how to pursue pleasure
rationally encounter consequences that are
extremely painful.</p>
<p>Nor again is there anyone who loves or
pursues or desires to obtain pain of itself,
because it is pain, but because occasionally
circumstances occur in which toil and pain can
procure him some great pleasure.</p>
</div>
</li>
<li>
<a href="#">Events<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.</p>
<p>Drops of rain could be heard hitting the
pane, which made him feel quite sad.</p>
</div>
</li>
<li>
<a href="#">Newsletter<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>It showed a lady fitted out with a fur hat
and fur boa who sat upright, raising a heavy fur
muff that covered the whole of her lower arm
towards the viewer. Gregor then turned to look
out the window at the dull weather.</p>
<p>Drops of rain could be heard hitting the
pane, which made him feel quite sad.</p>
</div>
</li>
<li>
<a href="#">Contact<span class="st-arrow">Open or
Close</span></a>
<div class="st-content">
<p>No one rejects, dislikes, or avoids pleasure
itself, because it is pleasure, but because
those who do not know how to pursue pleasure
rationally encounter consequences that are
extremely painful.</p>
<p>Nor again is there anyone who loves or
pursues or desires to obtain pain of itself,
because it is pain, but because occasionally
circumstances occur in which toil and pain can
procure him some great pleasure.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#st-accordion').accordion({
oneOpenedItem : true
});
});
</script>
</body>
</html>
JS代码(jquery.accordion.js):
(function( window,$,undefined ){
/** smartresize:debounced resize event for jQuery** latest version and complete README available on Github:* https://github.com/louisremi/jquery.smartresize.js** Copyright 2011 @louis_remi* Licensed under the MIT license.*/
var $event = $.event,resizeTimeout;
$event.special.smartresize={
setup:function(){
$(this).bind( "resize",$event.special.smartresize.handler );
}
,teardown:function(){
$(this).unbind( "resize",$event.special.smartresize.handler );
}
,handler:function( event,execAsap ){
// Save the contextvar context = this,args= arguments;
// set correct event typeevent.type = "smartresize";
if ( resizeTimeout ){
clearTimeout( resizeTimeout );
}
resizeTimeout = setTimeout(function(){
jQuery.event.handle.apply( context,args );
}
,execAsap === "execAsap"? 0:100 );
}
}
;
$.fn.smartresize= function( fn ){
return fn ? this.bind( "smartresize",fn ):this.trigger( "smartresize",["execAsap"] );
}
;
$.Accordion= function( options,element ){
this.$el= $( element );
// list itemsthis.$items= this.$el.children('ul').children('li');
// total number of itemsthis.itemsCount= this.$items.length;
// initialize accordionthis._init( options );
}
;
$.Accordion.defaults={
// index of opened item. -1 means all are closed by default.open:-1,// if set to true,only one item can be opened. Once one item is opened,any other that is opened will be closed firstoneOpenedItem:false,// speed of the open / close item animationspeed:600,// easing of the open / close item animationeasing:'easeInOutExpo',// speed of the scroll to action animationscrollSpeed:900,// easing of the scroll to action animationscrollEasing:'easeInOutExpo'}
;
$.Accordion.prototype={
_init:function( options ){
this.options= $.extend( true,{
}
,$.Accordion.defaults,options );
// validate optionsthis._validate();
// current is the index of the opened itemthis.current= this.options.open;
// hide the contents so we can fade it in afterwardsthis.$items.find('div.st-content').hide();
// save original height and top of each itemthis._saveDimValues();
// if we want a default opened item...if( this.current != -1 )this._toggleItem( this.$items.eq( this.current ) );
// initialize the eventsthis._initEvents();
}
,_saveDimValues:function(){
this.$items.each( function(){
var $item= $(this);
$item.data({
originalHeight:$item.find('a:first').height(),offsetTop:$item.offset().top}
);
}
);
}
,// validate options_validate:function(){
// open must be between -1 and total number of items,otherwise we set it to -1if( this.options.open < -1 || this.options.open > this.itemsCount - 1 )this.options.open = -1;
}
,_initEvents:function(){
var instance= this;
// open / close itemthis.$items.find('a:first').bind('click.accordion',function( event ){
var $item= $(this).parent();
// close any opened item if oneOpenedItem is trueif( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ){
instance._toggleItem( instance.$items.eq( instance.current ) );
}
// open / close iteminstance._toggleItem( $item );
return false;
}
);
$(window).bind('smartresize.accordion',function( event ){
// reset orinal item valuesinstance._saveDimValues();
// reset the content's height of any item that is currently openedinstance.$el.find('li.st-open').each( function(){
var $this= $(this);
$this.css( 'height',$this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );
}
);
// scroll to currentif( instance._isOpened() )instance._scroll();
}
);
}
,// checks if there is any opened item_isOpened:function(){
return ( this.$el.find('li.st-open').length > 0 );
}
,// open / close item_toggleItem:function( $item ){
var $content = $item.find('div.st-content');
( $item.hasClass( 'st-open' ) )? ( this.current = -1,$content.stop(true,true).fadeOut( this.options.speed ),$item.removeClass( 'st-open' ).stop().animate({
height:$item.data( 'originalHeight' )}
,this.options.speed,this.options.easing ) ):( this.current = $item.index(),$content.stop(true,true).fadeIn( this.options.speed ),$item.addClass( 'st-open' ).stop().animate({
height:$item.data( 'originalHeight' ) + $content.outerHeight( true )}
,this.options.speed,this.options.easing ),this._scroll( this ) )}
,// scrolls to current item or last opened item if current is -1_scroll:function( instance ){
var instance= instance || this,current;
( instance.current !== -1 ) ? current = instance.current:current = instance.$el.find('li.st-open:last').index();
$('html,body').stop().animate({
scrollTop:( instance.options.oneOpenedItem ) ? instance.$items.eq( current ).data( 'offsetTop' ):instance.$items.eq( current ).offset().top}
,instance.options.scrollSpeed,instance.options.scrollEasing );
}
}
;
var logError= function( message ){
if ( this.console ){
console.error( message );
}
}
;
$.fn.accordion= function( options ){
if ( typeof options === 'string' ){
var args = Array.prototype.slice.call( arguments,1 );
this.each(function(){
var instance = $.data( this,'accordion' );
if ( !instance ){
logError( "cannot call methods on accordion prior to initialization;
" +"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ){
logError( "no such method '" + options + "' for accordion instance" );
return;
}
instance[ options ].apply( instance,args );
}
);
}
else{
this.each(function(){
var instance = $.data( this,'accordion' );
if ( !instance ){
$.data( this,'accordion',new $.Accordion( options,this ) );
}
}
);
}
return this;
}
;
}
)( window,jQuery );
CSS代码(demo.css):
@import url('reset.css');/* General Demo Style */
body{background:#f7f7f7 url(../images/pattern.png) repeat top left;color:#000;font-family:'Arial Narrow',Arial,sans-serif;font-size:13px;min-height:2000px;}
a{color:#000;text-decoration:none;}
.clr{clear:both;}
h1{padding:20px;font-size:28px;color:#333;font-family:'Josefin Slab',Georgia,serif;font-weight:400;text-align:center;text-shadow:1px 1px 1px #fff;}
h1 span{font-size:18px;color:#1693eb;}
.more{font-family:'Josefin Slab',Georgia,serif;margin:0 auto;text-align:center;color:#ddd;font-size:15px;color:#444;}
.more p{display:block;margin:10px;}
.more a{color:#666;white-space:nowrap;font-weight:bold;background:#fff;padding:1px 6px;-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);box-shadow:1px 1px 2px rgba(0,0,0,0.2);}
.more a.current,.more a.current:hover{color:#fff;background:#000;}
.more a:hover{background-color:#1693eb;color:#fff;}
/* Header Style */
.header{line-height:24px;font-size:11px;background:#000;opacity:0.9;text-transform:uppercase;z-index:4;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.header a{padding:0px 10px;letter-spacing:1px;color:#ddd;display:block;float:left;}
.header a:hover{color:#fff;}
.header span.right{float:right;}
.header span.right a{float:none;display:inline;}
CSS代码(reset.css):
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
CSS代码(style.css):
/* Flexible Slide-to-top Accordion Style*/
.wrapper{width:90%;max-width:800px;margin:30px auto;}
.st-accordion{width:100%;min-width:270px;margin:0 auto;}
.st-accordion ul li{height:100px;border-bottom:1px solid #c7deef;border-top:1px solid #fff;overflow:hidden;}
.st-accordion ul li:first-child{border-top:none;}
.st-accordion ul li > a{font-family:'Josefin Slab',Georgia,serif;text-shadow:1px 1px 1px #fff;font-size:46px;display:block;position:relative;line-height:100px;outline:none;-webkit-transition:color 0.2s ease-in-out;-moz-transition:color 0.2s ease-in-out;-o-transition:color 0.2s ease-in-out;-ms-transition:color 0.2s ease-in-out;transition:color 0.2s ease-in-out;}
.st-accordion ul li > a span{background:transparent url(../images/down.png) no-repeat center center;text-indent:-9000px;width:26px;height:14px;position:absolute;top:50%;right:-26px;margin-top:-7px;opacity:0;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.st-accordion ul li > a:hover{color:#1693eb;}
.st-accordion ul li > a:hover span{opacity:1;right:10px;}
.st-accordion ul li.st-open > a{color:#1693eb;}
.st-accordion ul li.st-open > a span{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);right:10px;opacity:1;}
.st-content{padding:5px 0px 30px 0px;}
.st-content p{font-size:16px;font-family:Georgia,serif;font-style:italic;line-height:28px;padding:0px 4px 15px 4px;}
.st-content img{width:125px;border-right:1px solid #fff;border-bottom:1px solid #fff;}
@media screen and (max-width:320px){.st-accordion ul li > a{font-size:36px;}
}
分享到QQ
分享到微博
微信扫一扫
