以下是 jQuery立体缩略图切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery立体缩略图切换特效</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" id="et_responsive-css" href="css/responsive.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body class="home blog gecko et_includes_sidebar">
<div class="wrapper">
<div id="featured" class="flexslider et_slider_auto et_slider_speed_4200">
<ul class="slides">
<li class="slide">
<div class="slider_image">
<a href="#/">
<img src="images/slide-1.png" alt="Web Design Is Our Art and Passion" width="954" height="375" />
<span class="slider_overlay"></span></a></div>
<div class="banner">
<h2>Web Design Is Our Art and Passion</h2>
Nulla ornare, nulla et egestas hendrerit, ipsum dui vulputate dolor,
et ornare orci erat eleifend pede. Fusce eros libero, vestibulum
non, elementum eu, suscipit eget, leo. Donec consectetuer tincidunt
diam. Sed et mauris in ligula feugiat hendrerit. Cras neque purus,
mollis non, adipiscing ac, pretium eget, turpis. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus...
<br class="clear" />
<span>
<a href="#/">
read more</a></span> </div>
</li>
<!-- end .slide --></li>
<li class="slide">
<div class="slider_image">
<a href="#/">
<img src="images/slide-2.png" alt="Advanced Features Give You Control" width="954" height="375" />
<span class="slider_overlay"></span></a></div>
<div class="banner">
<h2>Advanced Features Give You Control</h2>
Sed nec eros orci, in facilisis mi. Cras lorem massa, viverra at
dapibus id, posuere euismod elit. Mauris libero nisl, iaculis et
tincidunt non, dapibus vitae ligula. In pharetra faucibus eros,
at rhoncus leo sollicitudin quis. Vestibulum quis arcu non urna
ultrices vestibulum. Fusce facilisis quam ut ipsum imperdiet eu
ullamcorper orci volutpat. Vivamus vitae neque odio. Aenean convallis,
augue... <br class="clear" />
<span>
<a href="#/">
read more</a></span> </div>
</li>
<!-- end .slide --></li>
<li class="slide">
<div class="slider_image">
<a href="#/">
<img src="images/slide-3.png" alt="A Price That Wont Hurt Your Pocket" width="954" height="375" />
<span class="slider_overlay"></span></a></div>
<div class="banner">
<h2>A Price That Wont Hurt Your Pocket</h2>
Nulla ornare, nulla et egestas hendrerit, ipsum dui vulputate dolor,
et ornare orci erat eleifend pede. Fusce eros libero, vestibulum
non, elementum eu, suscipit eget, leo. Donec consectetuer tincidunt
diam. Sed et mauris in ligula feugiat hendrerit. Cras neque purus,
mollis non, adipiscing ac, pretium eget, turpis. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus...
<br class="clear" />
<span>
<a href="#/">
read more</a></span> </div>
</li>
<!-- end .slide --></li>
<li class="slide">
<div class="slider_image">
<a href="#/">
<img src="images/slide-4.png" alt="We Focus on Customer Support" width="954" height="375" />
<span class="slider_overlay"></span></a></div>
<div class="banner">
<h2>We Focus on Customer Support</h2>
Curabitur a congue turpis. Nunc eleifend magna quis libero dignissim
at vestibulum ante ultricies. Fusce magna risus, condimentum eu
tincidunt id, sodales iaculis tortor. Sed gravida rhoncus sagittis.
Aenean vehicula augue non arcu pharetra ullamcorper. Vestibulum
facilisis ligula a neque accumsan sagittis. Suspendisse dolor erat,
fringilla nec tempor quis, sodales vel turpis. Quisque...
<br class="clear" />
<span>
<a href="#/">
read more</a></span> </div>
</li>
<!-- end .slide --></li>
</ul>
<!-- end .slides --><span class="slider_shadow"></span>
<div id="switcher">
<div class="item">
<div class="wrap active">
<span class="image">
<img src="images/slide-1-560959_83x83.png" alt="Web Design Is Our Art and Passion" width="83" height="83" />
<span class="slider_small_overlay"></span></span>
<div class="hover">
<span>Web Design Is Our Art and Passion</span>
<br class="clear" />
Nulla ornare, nulla et egestas hendrerit, ipsum dui vulputate
dolor, et ornare... </div>
</div>
</div>
<div class="item">
<div class="wrap ">
<span class="image">
<img src="images/slide-2-344429_83x83.png" alt="Advanced Features Give You Control" width="83" height="83" />
<span class="slider_small_overlay"></span></span>
<div class="hover">
<span>Advanced Features Give You Control</span>
<br class="clear" />
Sed nec eros orci, in facilisis mi. Cras lorem massa, viverra
at dapibus id,... </div>
</div>
</div>
<div class="item">
<div class="wrap ">
<span class="image">
<img src="images/slide-3-506616_83x83.png" alt="A Price That Wont Hurt Your Pocket" width="83" height="83" />
<span class="slider_small_overlay"></span></span>
<div class="hover">
<span>A Price That Wont Hurt Your Pocket</span>
<br class="clear" />
Nulla ornare, nulla et egestas hendrerit, ipsum dui vulputate
dolor, et ornare... </div>
</div>
</div>
<div class="item">
<div class="wrap ">
<span class="image">
<img src="images/slide-4-404264_83x83.png" alt="We Focus on Customer Support" width="83" height="83" />
<span class="slider_small_overlay"></span></span>
<div class="hover">
<span>We Focus on Customer Support</span>
<br class="clear" />
Curabitur a congue turpis. Nunc eleifend magna quis libero
dignissim at... </div>
</div>
</div>
</div>
<!-- #switcher --></div>
<script type="text/javascript" src="js/jquery.fitvids.js?ver=1.0"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js?ver=1.0"></script>
<script type="text/javascript" src="js/et_flexslider.js?ver=1.0"></script>
<script type="text/javascript" src="js/jquery.easing-1.3.pack.js?ver=1.3.4"></script>
</div>
<br><br><br><br>
</body>
</html>
JS代码(et_flexslider.js):
(function($){
var $featured = $('#featured'),$controllers = $('#featured #switcher'),$et_mobile_nav_button = $('#mobile_nav'),$et_nav = $('ul.nav'),et_container_width = $('.wrapper').width(),et_featured_slider_auto,et_featured_auto_speed,$cloned_nav,et_slider;
$(document).ready(function(){
var et_slider_settings;
$("#posts .post").fitVids();
if ( $featured.length ){
$('div.slide .description').css({
'visibility':'hidden','opacity':'0','display':'block'}
);
et_slider_settings ={
slideshow:false,before:function(slider){
$controllers.find('div.item').eq( slider.currentSlide ).find('.wrap').animate({
'marginTop':0}
,500 );
$controllers.find('div.item').eq( slider.animatingTo ).find('.wrap').animate({
'marginTop':'-15px'}
,500 );
$featured.find('li.slide').eq( slider.currentSlide ).find('.banner').animate({
opacity:0}
,500 );
$featured.find('li.slide').eq( slider.animatingTo ).find('.banner').css({
'top':0}
).animate({
opacity:1,'top':'90px'}
,500 );
}
,start:function(slider){
et_slider = slider;
}
}
if ( $featured.hasClass('et_slider_auto') ){
var et_slider_autospeed_class_value = /et_slider_speed_(\d+)/g;
et_slider_settings.slideshow = true;
et_slider_autospeed = et_slider_autospeed_class_value.exec( $featured.attr('class') );
et_slider_settings.slideshowSpeed = et_slider_autospeed[1];
}
et_slider_settings.pauseOnHover = true;
$featured.flexslider( et_slider_settings );
}
$et_nav.clone().attr('id','mobile_menu').removeClass().appendTo( $et_mobile_nav_button );
$cloned_nav = $et_mobile_nav_button.find('> ul');
$et_mobile_nav_button.click( function(){
if ( $(this).hasClass('closed') ){
$(this).removeClass( 'closed' ).addClass( 'opened' );
$cloned_nav.slideDown( 500 );
}
else{
$(this).removeClass( 'opened' ).addClass( 'closed' );
$cloned_nav.slideUp( 500 );
}
return false;
}
);
$et_mobile_nav_button.find('a').click( function(event){
event.stopPropagation();
}
);
$(window).resize( function(){
if ( et_container_width != $('.wrapper').width() ){
et_container_width = $('.wrapper').width();
}
}
);
}
);
$(window).load(function(){
var $flexcontrol = $('#featured .flex-control-nav');
$controllers.find('div.item').click( function(){
var $this_control = $(this),order = $this_control.prevAll('div').length;
if ( $this_control.hasClass('active-slide') ) return;
$featured.flexslider( order );
return false;
}
);
}
);
}
)(jQuery)JS代码(jquery.fitvids.js):
/*global jQuery */
/*!* FitVids 1.0** Copyright 2011,Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/* Released under the WTFPL license - http://sam.zoy.org/wtfpl/** Modified by ElegantThemes to exclude fancybox videos ( line:68 )** Date:Thu Sept 01 18:00:00 2011 -0500*/
(function( $ ){
$.fn.fitVids = function( options ){
var settings ={
customSelector:null}
var div = document.createElement('div'),ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
div.className = 'fit-vids-style';
div.innerHTML = '­
<style> \ .fluid-width-video-wrapper{
\ width:100%;
\ position:relative;
\ padding:0;
\}
\ \ .fluid-width-video-wrapper iframe,\ .fluid-width-video-wrapper object,\ .fluid-width-video-wrapper embed{
\ position:absolute;
\ top:0;
\ left:0;
\ width:100%;
\ height:100%;
\}
\ </style>';
ref.parentNode.insertBefore(div,ref);
if ( options ){
$.extend( settings,options );
}
return this.each(function(){
var selectors = [ "iframe[src^='http://player.vimeo.com']","iframe[src^='http://www.youtube.com']","iframe[src^='http://www.kickstarter.com']","object","embed" ];
if (settings.customSelector){
selectors.push(settings.customSelector);
}
var $allVideos = $(this).find(selectors.join(','));
$allVideos.each(function(){
var $this = $(this);
// don't apply fluid width to fancybox videos if ( $this.closest('.et_embedded_videos').length ) return;
if (this.tagName.toLowerCase() == 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length){
return;
}
var height = this.tagName.toLowerCase() == 'object' ? $this.attr('height'):$this.height(),aspectRatio = height / $this.width();
$this.wrap('<div class="fluid-width-video-wrapper" />').parent('.fluid-width-video-wrapper').css('padding-top',(aspectRatio * 100)+"%");
$this.removeAttr('height').removeAttr('width');
}
);
}
);
}
}
)( jQuery );
CSS代码(responsive.css):
/* Browser Resets */
.flex-container a:active,.flexslider a:active{outline:none;}
.slides,.flex-control-nav,.flex-direction-nav{margin:0;padding:0;list-style:none;}
/* FlexSlider Necessary Styles*********************************/
.flexslider{width:100%;margin:0;padding:0;}
.flexslider .slides > li{display:none;}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img,.post img,#logo{max-width:100%;height:auto;width:auto;}
.flexslider .slides img{display:block;width:auto;}
.flex-pauseplay span{text-transform:capitalize;}
/* Clearfix for the .slides element */
.slides:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .slides{display:block;}
* html .slides{height:1%;}
/* No JavaScript Fallback */
/* If you are not using another script,such as Modernizr,make sure you * include js that eliminates this class on page load */
.no-js .slides > li:first-child{display:block;}
/* FlexSlider Default Theme*********************************/
.flexslider{position:relative;zoom:1;}
.flexslider .slides{zoom:1;}
.flexslider .slides > li{position:relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own,if you wish */
.flex-container{zoom:1;position:relative;}
/* Caption style */
/* IE rgba() hack */
.flex-caption{background:none;-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);zoom:1;}
.flex-caption{width:96%;padding:2%;position:absolute;left:0;bottom:0;background:rgba(0,0,0,.3);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.3);font-size:14px;line-height:18px;}
.flex-control-nav,.flex-direction-nav,#controllers-wrapper{display:none;}
#mobile_nav{display:none;position:relative;padding:12px 26px 12px 32px;font-family:Georgia,serif;font-size:12px;text-shadow:1px 1px 0 #fff;color:#333;text-transform:uppercase;}
#mobile_nav:hover{color:#111;text-decoration:none;}
#mobile_nav > span{display:block;width:5px;height:3px;background:url(../images/responsive_arrow.png) no-repeat;position:absolute;top:19px;left:19px;-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
#mobile_nav.opened > span{-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg);}
#mobile_menu{position:absolute;top:43px !important;left:-13px;z-index:1000;display:none;text-align:left;padding-left:15px !important;width:179px;padding-top:10px;}
#mobile_menu li{padding-bottom:15px;padding-left:0;}
#mobile_menu ul{display:block !important;visibility:visible !important;padding-top:15px;margin-bottom:-15px;}
#mobile_menu a{font-style:normal;color:#333;}
#mobile_menu li.current-menu-item > a,#mobile_menu a:hover{color:#989898;text-decoration:none;}
#mobile_menu a{padding-left:9px !important;background-position:0 17px;}
nav#top-menu ul.mobile_nav{width:320px;border:1px solid #d6d6d6;background:#fafafa;display:none;}
.mobile_nav li ul{position:relative;top:0;width:auto;display:block !important;visibility:visible !important;}
.post h2{line-height:1;}
.wp-caption{max-width:96%;padding:8px;}
@media only screen and ( max-width:960px ){#et-search,p#et-search-title,p#et-search-title span{background:none !important;color:#111 !important;}
#et-search{width:auto !important;height:auto !important;}
#et-search-inner{padding:0 !important;}
#et-search-right{float:none !important;clear:both;text-align:left !important;}
#et_search_submit{background:#BBB8B8 !important;color:#111 !important;margin-top:12px;}
p#et-search-title{margin-bottom:2px !important;}
p#et-search-title span{padding:0 !important;text-shadow:none !important;}
#et-searchinput{width:auto !important;}
p#et_choose_posts,p#et_choose_pages,p#et_choose_date,p#et_choose_cat{float:none !important;}
#et-search-left{float:none !important;width:100% !important;}
}
@media only screen and ( min-width:768px ) and ( max-width:960px ){.wrapper,#navwrap,.nav_top,.nav_bottom,#blurbs,.blurbs_shadow,#footer,#strip div{width:748px;}
#logo{margin:63px auto 34px 268px;}
.slide .banner{display:none;}
#quote{font-size:22px;padding:14px 0 0 35px;width:713px;text-align:center;}
#quote div{padding:0 35px 10px 0;}
#quote div span{font-size:20px;}
#strip div{font-size:16px;}
#strip div .arrow{left:370px;}
#blurbs div{width:154px;}
.slider_overlay{background:url(../images/slider-overlay_768.png) no-repeat;width:742px;height:292px;}
#featured .slider_shadow{background-image:url(../images/slider_bottom_shadow_768.png);width:747px;}
#switcher{width:auto;}
ul.nav{padding-left:0 !important;}
#posts{width:450px;}
#content{background-image:url(../images/content-bg_768.png);}
#content .content_wrap{background:url(../images/content-bg-top_768.png) no-repeat 0 0;}
#content .content_wrap .content_wrap{background:url(../images/content-bg-bottom_768.png) no-repeat bottom left;}
.post .text{width:236px;}
.post h2{line-height:1;}
#sidebar{width:228px;}
#sidebar .widget{width:auto;float:none;}
li.depth-1 .comment-wrap{width:367px;}
li.depth-2 .comment-wrap{width:284px;}
li.depth-3 .comment-wrap{width:202px;}
li.depth-4 .comment-wrap{width:120px;}
li.depth-5 .comment-wrap{width:39px;}
.et_gallery_category{width:auto !important;}
#posts .gallery_item{margin-left:21px;margin-right:21px;}
#et_pt_portfolio_gallery{margin-left:-35px !important;}
.et_pt_portfolio_item{margin-left:35px !important;width:219px !important;}
.et_portfolio_more_icon,.et_portfolio_zoom_icon{top:50px !important;}
.et_portfolio_more_icon{left:65px !important;}
.et_portfolio_zoom_icon{left:106px !important;}
#et_pt_portfolio_gallery.et_portfolio_small{margin-left:-18px !important;}
#et_pt_portfolio_gallery.et_portfolio_small .et_pt_portfolio_item{margin-left:21px !important;width:132px !important;}
#et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_more_icon,#et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_zoom_icon{top:20px !important;}
#et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_more_icon{left:26px !important;}
#et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_zoom_icon{left:62px !important;}
#et_pt_portfolio_gallery.et_portfolio_large{margin-left:-20px !important;}
#et_pt_portfolio_gallery.et_portfolio_large .et_pt_portfolio_item{margin-left:30px !important;width:348px !important;}
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon,#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon{top:99px !important;}
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon{left:140px !important;}
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon{left:178px !important;}
}
@media only screen and ( max-width:767px ){.wrapper,#navwrap,.nav_top,.nav_bottom,#blurbs,.blurbs_shadow,#footer,#strip div,#posts .post{width:460px;}
#logo{margin:63px auto 34px 125px;}
.slide .banner{display:none;}
#quote{font-size:22px;padding:14px 10px 0 10px;width:440px;text-align:center;background:none;}
#quote div{padding:0 35px 10px 0;background:none;}
#quote div span{font-size:20px;}
#strip div{font-size:10px;}
#strip div .arrow{left:210px;}
#blurbs{padding:35px 0 20px;}
#blurbs div{float:none;margin-bottom:40px;width:320px;}
.readmore{margin-top:0;}
#footer{text-align:center;}
.slider_overlay{background:url(../images/slider-overlay_480.png) no-repeat;width:460px;height:181px;}
#featured .slider_shadow{background-image:url(../images/slider_bottom_shadow_480.png);width:461px;height:9px;}
#switcher{width:auto;float:left;margin-left:20px;}
ul.nav,#sidebar{display:none;}
#navwrap{text-align:center;}
#mobile_nav{display:inline-block;}
#posts{width:auto;padding-right:0;}
.post .text{width:245px;}
#content,#content .content_wrap,#content .content_wrap .content_wrap{background:none;}
li.depth-1 .comment-wrap{width:374px;}
li.depth-2 .comment-wrap{width:291px;}
li.depth-3 .comment-wrap{width:208px;}
li.depth-4 .comment-wrap{width:125px;}
.et_gallery_category,#posts .gallery_item{width:auto !important;}
#posts .gallery_item{margin-left:8px;margin-right:8px;}
.sitemap-col{float:none !important;width:auto !important;}
#et_pt_portfolio_gallery{margin-left:-34px !important;}
.et_pt_portfolio_item{margin-left:31px !important;width:133px !important;}
.et_portfolio_more_icon,.et_portfolio_zoom_icon{top:25px !important;}
.et_portfolio_more_icon{left:29px !important;}
.et_portfolio_zoom_icon{left:67px !important;}
.et_portfolio_small .et_pt_portfolio_item{width:auto !important;margin-bottom:10px;}
.et_portfolio_small .et_pt_portfolio_item p{padding:0 0 10px;}
.et_portfolio_small .et_pt_portfolio_entry{float:left;margin-right:15px;}
.et_portfolio_small .et_portfolio_more_icon,.et_portfolio_small .et_portfolio_zoom_icon{top:30px !important;}
.et_portfolio_small .et_portfolio_more_icon{left:38px !important;}
.et_portfolio_small .et_portfolio_zoom_icon{left:77px !important;}
#et_pt_portfolio_gallery.et_portfolio_large{margin-left:0 !important;}
#et_pt_portfolio_gallery.et_portfolio_large .et_pt_portfolio_item{margin-left:0 !important;width:404px !important;}
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon,#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon{top:109px !important;}
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon{left:155px !important;}
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon{left:195px !important;}
}
@media only screen and ( max-width:479px ){.wrapper,#navwrap,.nav_top,.nav_bottom,#blurbs,.blurbs_shadow,#footer,#strip div,#posts .post{width:300px;}
#logo{margin:63px auto 34px 44px;}
#featured,.post .thumb{display:none;}
#quote{font-size:18px;padding:14px 0 0 15px;width:285px;text-align:center;background:none;margin-top:15px;}
#quote div{padding:0 15px 10px 0;background:none;}
#quote div span{font-size:16px;}
#strip div{font-size:10px;}
#strip div .arrow{left:130px;}
#strip-top{height:25px;}
#blurbs{padding:35px 0 15px;}
#blurbs div{float:none;margin-bottom:40px;width:200px;margin-left:19px;padding:5px 0 0 48px;}
.readmore{margin-top:0;}
#footer{text-align:center;}
.post .text{width:auto;}
#breadcrumbs{float:none;}
li.depth-1 .comment-wrap{width:217px;}
.commentlist li.comment ul{margin-left:0;}
.gallery_item .thumb{display:block !important;}
#posts .gallery_item{margin-left:54px;margin-right:0;}
#et_contact_right{float:none !important;margin-left:0 !important;width:50% !important;}
.et_pt_gallery_entry{margin-left:72px !important;}
#et_pt_portfolio_gallery,#et_pt_portfolio_gallery.et_portfolio_large{margin-left:0 !important;}
.et_pt_portfolio_item,#et_pt_portfolio_gallery.et_portfolio_large .et_pt_portfolio_item{margin-left:0 !important;width:272px !important;}
.et_portfolio_more_icon,.et_portfolio_zoom_icon,#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon,#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon{top:68px !important;}
.et_portfolio_more_icon,#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon{left:94px !important;}
.et_portfolio_zoom_icon,#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon{left:134px !important;}
.entry .et_portfolio_small .et_pt_portfolio_item{width:280px !important;margin-left:6px !important;}
}
CSS代码(style.css):
/*Theme Name:SimplePressTheme URI:http://www.elegantthemes.com/gallery/simplepressVersion:4.8Description:2 Column theme from Elegant ThemesAuthor:Elegant ThemesAuthor URI:http://www.elegantthemes.com*/
/*------------------------------------------------*/
/*-----------------[RESET]------------------------*/
/*------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/
@font-face{font-family:'ColaborateThinRegular';src:url('fonts/ColabThi-webfont.eot');src:url('fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/ColabThi-webfont.woff') format('woff'),url('fonts/ColabThi-webfont.ttf') format('truetype'),url('fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');font-weight:normal;font-style:normal;}
body{background:#f6f6f6 url(images/bg.png) repeat-x;color:#525252;font-family:Georgia;font-size:12px;line-height:19px;}
a,a:hover{text-decoration:none;color:#000;}
.clear{padding:0;margin:0;clear:both;}
.wrapper{width:960px;margin:auto;}
#logo{border:none;margin:63px auto 34px 367px;clear:both;}
h1,h2{font-size:34px;color:#000;}
h3{font-size:24px;color:#000;}
#posts p,.post_full p{padding-top:15px;}
/*------------------------------------------------*/
/*---------------[NAVIGATION MENU]----------------*/
/*------------------------------------------------*/
#navwrap{width:960px;background-image:url(images/nav-bg.png);text-align:left;position:relative;z-index:14;}
.nav-shadow{position:absolute;top:40px;left:50px;width:866px;height:4px;background-image:url(images/nav-shadow.png);}
.nav_top{background-image:url(images/nav-top.png);width:960px;height:1px;display:block;float:left;}
.nav_bottom{background-image:url(images/nav-bottom.png);width:960px;height:1px;display:block;float:left;}
.nav{padding:10px 0;float:left;}
.nav li{float:left;padding:0 10px;list-style-type:none;position:relative;}
.nav li.current_page_item a,.nav li.current-menu-item a,.nav li.current-category-ancestor a,.nav li.current_page_ancestor a,.nav li.current-post-parent a{font-style:italic;color:#989898;}
.nav li a{font-size:13px;color:#333333;text-transform:uppercase;float:left;}
.nav li ul,#mobile_menu{background:#fff url(images/dropdown-bg.png) no-repeat bottom;padding:0 0 10px 0;border-left:1px solid #d5d5d5;border-right:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;-moz-box-shadow:3px 6px 7px 1px rgba(0,0,0,0.3);-webkit-box-shadow:1px 2px 2px 1px rgba(0,0,0,0.1);}
.nav li ul li ul{border-top:1px solid #d5d5d5;padding-top:10px;}
.nav li ul li a,#mobile_menu a{width:196px;padding:10px 10px 10px 30px;background:url(images/dropdown-arrow.png) no-repeat 20px 17px;}
/*------------------------------------------------*/
/*---------------[DEFAULT DROPDOWN SETTINGS]------*/
/*------------------------------------------------*/
.nav ul{position:absolute;top:-999em;background-position:bottom;background-repeat:no-repeat;z-index:15;}
.nav li{float:left;position:relative;z-index:15;}
.nav a{display:block;float:left;}
.nav li:hover ul,ul.nav li.sfHover ul{left:0px;top:29px;}
.nav li:hover li ul,.nav li.sfHover li ul{top:-999em;}
.nav li li:hover ul,ul.nav li li.sfHover ul{left:216px;top:0px;}
.nav li:hover ul,.nav li li:hover ul{top:-999em;}
.nav li li{display:block;padding:0px;float:left;height:auto !important;}
.nav li ul{width:216px;}
.nav li li a:link,.nav li li a:visited{display:block;height:auto;float:left;}
.nav li:hover{visibility:inherit;/* fixes IE7 'sticky bug' */
}
/*------------------------------------------------*/
/*----------------[FEATURED SLIDER]---------------*/
/*------------------------------------------------*/
#featured{margin-top:23px;}
#featured #slides,#featured ul.slides{background-color:#e5e5e5;border-bottom:1px solid #fff;padding:3px;}
#featured #slides{width:954px;height:375px;}
#slides .slide{position:relative;}
#featured .slider_shadow{background-image:url(images/slider-shadow.png);width:960px;height:14px;display:block;}
.slide .banner{position:absolute;width:303px;height:319px;background:url(images/slider-banner.png) no-repeat;top:0px;padding:30px 20px 0 96px;font-style:italic;color:#525252;text-shadow:1px 1px 0px #fff;}
.slide .active{top:90px;}
.banner h2{color:#a4a4a4;font-size:38px;padding-bottom:20px;line-height:40px;display:block;height:100px;}
.banner span{top:318px;left:200px;height:40px;display:block;background-image:url(images/slider-readmore-left.png);position:absolute;}
.banner span a{background:url(images/slider-readmore-right.png) no-repeat right;height:24px;font-family:Georgia;font-size:12px;color:#fff;text-transform:uppercase;float:left;margin-right:-17px;padding:8px 15px;text-shadow:1px 1px 0px #6c6c6c;}
#switcher{width:444px;float:right;margin-top:-65px;}
#switcher .item{margin-right:17px;float:left;height:98px;width:93px;background:url(images/slider-thumb-shadow.png) no-repeat bottom;position:relative;}
.item div.wrap{cursor:pointer;background:#e4e4e4;border-bottom:1px solid #7f7f7f;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;padding:4px;width:83px;height:83px;position:absolute;}
.item div.active{margin-top:-15px;}
.item div span.image{width:83px;height:83px;display:block;}
.item .hover{z-index:10;background-image:url(images/slider-hover.png);display:none;position:absolute;top:-160px;left:-55px;width:182px;height:123px;padding:15px;font-style:italic;color:#525252;text-shadow:1px 1px 0px #fff;}
.item .hover span{color:#a4a4a4;font-size:21px;margin:0 0 10px 0;padding:0;float:left;}
/*------------------------------------------------*/
/*------------------[BASIC STYLES]----------------*/
/*------------------------------------------------*/
#quote{font-size:30px;color:#333333;text-shadow:1px 1px 0px #fff;width:925px;margin-top:90px;background:url(images/quote-left.gif) no-repeat top left;padding:25px 0 0 35px;}
#quote div{background:url(images/quote-right.gif) no-repeat bottom right;padding:0 35px 20px 0;}
#quote div span{color:#bfbfbf;font-size:29px;padding-top:10px;display:block;}
#strip-top{height:39px;background-image:url(images/strip-top.png);}
#strip{height:59px;background-image:url(images/strip-bg.png);}
#strip div{position:relative;width:960px;display:block;margin:0 auto 0 auto;padding:20px 0;text-shadow:1px 1px 0px #fff;color:#9c9b9b;font-size:18px;font-style:italic;text-align:center;}
#strip div .arrow{position:absolute;top:58px;left:460px;}
#blurbs{width:958px;border-left:1px solid #d4d4d4;border-right:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4;margin:0 auto;background:#fff url(images/blurbs-bg.png) repeat-x 0px 1px;padding:35px 0 40px 0;}
#blurbs div{width:220px;float:left;background-repeat:no-repeat;background-position:top left;padding:5px 0 0 55px;margin-left:30px;}
#blurbs div span.titles{font-size:24px;color:#000;display:block;padding-bottom:10px;}
.blurbs_shadow{width:960px;background-image:url(images/blurbs-shadow.png);height:8px;display:block;}
#footer{width:960px;margin:10px auto 40px auto;text-align:right;text-shadow:1px 1px 0px #fff;color:#919191;font-size:11px;font-style:italic;}
#footer a{color:#5e5b5b;}
#content{background-image:url(images/content-bg.png);float:left;text-shadow:1px 1px 0px #fff;margin-bottom:30px;}
#content .content_wrap{background:url(images/content-bg-top.jpg) no-repeat top;float:left;}
#content .full,.full,#content .full .full{background-image:none;}
#content .content_wrap .content_wrap{background:url(images/content-bg-bottom.jpg) no-repeat bottom;float:left;padding-top:20px;}
#breadcrumbs{padding:10px 0 25px 0;color:#686868;font-style:italic;float:left;}
#breadcrumbs a{font-style:italic;color:#b6b6b6;}
#breadcrumbs a:hover{color:#686868;}
#breadcrumbs span{color:#686868;}
#breadcrumbs span.separate{color:#b6b6b6;margin:0 5px;}
#sidebar{float:left;width:250px;padding-left:30px;padding-top:10px;}
#sidebar .widget{margin-bottom:30px;float:left;}
.widget ul{padding-left:13px;}
.widget ul li{padding:3px 0 3px 5px;list-style-image:url(images/bullet.png);}
.widget ul li a{color:#525252;}
.widget ul li a:hover{color:#000;}
.widget h3{font-size:24px;color:#000;display:block;background:url(images/widget-line.png) no-repeat bottom left;padding-bottom:10px;margin-bottom:10px;}
#search-bar{float:left;}
#search-bar #searchinput{background:url(images/search-bg.png) no-repeat;width:175px;height:35px;border:none;float:left;padding-left:10px;padding-right:10px;}
#search-bar #searchsubmit{}
#posts{float:left;width:640px;padding-right:40px;}
#posts_full{width:960px;}
#posts_full .post_full{width:960px;}
#posts .post{float:left;margin-bottom:40px;}
.post .text{float:left;width:426px;}
#posts .post .no_thumb{width:640px;}
.post h2{font-size:30px;color:#000;}
.post h2 a{color:#000;}
.post .line{background:url(images/line.png) repeat-x bottom;height:2px;display:block;margin:5px 0;}
.readmore{background-image:url(images/readmore-left3.png);height:24px;display:block;float:right;margin-top:10px;}
.readmore a{background:url(images/readmore-right3.png) no-repeat right;margin-right:-15px;height:21px;display:block;color:#414040;text-shadow:1px 1px 0px #fff;padding:3px 10px 0 10px;font-family:Arial;font-size:11px;float:right;}
.post .thumb{float:left;width:194px;margin-right:20px;}
.thumb div{float:left;background-color:#fff;border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;border-top:1px solid #e7e7e7;border-bottom:1px solid #a5a5a5;padding:5px;}
.thumb .shadow{float:left;width:194px;height:7px;display:block;background-image:url(images/thumb-shadow.png);}
.thumb div .image{float:left;}
.thumb div .image img a{border:none;}
.post .postinfo{color:#b6b6b6;font-style:italic;}
.postinfo a{color:#686868;}
.postinfo a:hover{color:#000;}
.wp-pagenavi{float:right;}
/*------------------------------------------------*/
/*-------------------[COMMENTS]-------------------*/
/*------------------------------------------------*/
#comment-wrap{padding:30px 0 0 0;float:left;}
li.depth-1{padding:30px 0px 5px 0px;}
h3#comments{font-size:24px;color:#000000;}
.comment-icon{background:url(images/comment-bottom-bg.png) no-repeat bottom left;padding-bottom:14px;}
.comment-icon .post{padding:3px 0px 0px;}
div.authordata{width:100px;}
div.avatar{float:left;position:relative;padding:6px 6px 10px 6px;background-image:url(images/comments-avatar-bg.png);}
div.avatar span.overlay{background:url(images/comment-overlay.png) no-repeat;display:block;width:57px;height:57px;position:absolute;top:6px;left:6px;}
.comment-wrap{float:left;margin-left:14px;}
.reply-container{display:block;float:right;margin-bottom:15px;background:url(images/readmore-left2.png) no-repeat left;height:27px;text-shadow:1px 1px 1px #ffffff;font-size:11px;line-height:27px;}
.reply-container a{float:left;display:block;background:url(images/readmore-right2.png) no-repeat right;padding:0 10px 0 12px;height:27px;color:#282828;}
.reply-container a:hover{text-decoration:none;color:#383838;}
li.depth-1 .comment-wrap{width:557px;}
li.depth-2 .comment-wrap{width:475px;}
li.depth-3 .comment-wrap{width:393px;}
li.depth-4 .comment-wrap{width:311px;}
ol.commentlist{list-style:none outside none;padding-top:8px;}
ol.commentlist ul{list-style:none outside none;}
.commentlist li.comment li{background:none;padding:0px;}
.commentlist li.comment ul{margin:8px 0px 8px 82px;}
#respond{padding-top:25px;}
.comment #respond{padding-left:0px;padding-top:5px;}
#commentform textarea#comment{width:88%;}
#commentform input[type=text]{width:40%;}
li.comment #respond textarea{width:88% !important;}
li.comment #respond input[type=text]{width:50% !important;}
#respond h3#comments{background:none;margin:0px;padding:0px;}
.comment-author{padding-top:2px;}
.comment-author .comment-meta,.comment-author .comment-meta a{color:#9e9e9e;font-size:14px;font-style:italic;font-family:Georgia,serif;}
.comment-author .comment-meta a:hover{text-decoration:none;}
span.fn,span.fn a{color:#000000;font-size:20px;}
span.fn a:hover{text-decoration:none;}
.comment-content{padding-top:5px;}
/*------------------------------------------------*/
/*-------------------[GALLERY]--------------------*/
/*------------------------------------------------*/
#posts .gallery_item{width:194px;margin:0 22px 44px 22px;}
#posts .gallery_item .thumb{position:relative;}
#posts .gallery_item .thumb .readmore{position:absolute;left:67px;top:148px;display:none;}
#posts .gallery_item .thumb .readmore a{}
.gallery_full{width:610px;border:10px solid #e7e7e7;margin:20px 0;}
#sidebar .widget{width:250px;}
.post ul{list-style-type:disc;margin:10px 0px 10px 20px;}
.post ol{list-style-type:decimal;list-style-position:inside;margin:10px 0px 10px 2px;}
.post ul li ul,.post ul li ol{margin:2px 0px 2px 20px;}
.post ol li ul,.post ol li ol{margin:2px 0px 2px 35px;}
#about-image{float:left;}
/*------------------------------------------------*/
/*------------[CAPTIONS AND ALIGNMENTS]-----------*/
/*------------------------------------------------*/
div.post .new-post .aligncenter,.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.wp-caption{border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;margin-bottom:10px;}
.wp-caption.alignleft{margin:0px 10px 10px 0px;}
.wp-caption.alignright{margin:0px 0px 10px 10px;}
.wp-caption img{margin:0;padding:0;border:0 none;}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;padding:0 4px 5px;margin:0;}
.alignright{float:right;}
.alignleft{float:left}
img.alignleft{display:inline;float:left;margin-right:15px;}
img.alignright{display:inline;float:right;margin-left:15px;}
/*------------------------------------------------*/
/*-----------------[WP CALENDAR]-----------------*/
/*------------------------------------------------*/
#wp-calendar{empty-cells:show;margin:10px auto 0;width:240px;}
#wp-calendar a{display:block;text-decoration:none;font-weight:bold;}
#wp-calendar a:hover{text-decoration:underline;}
#wp-calendar caption{text-decoration:none;font:bold 13px Arial,Sans-Serif;}
#wp-calendar td{padding:3px 5px;color:#9f9f9f;}
#wp-calendar td#today{color:#ffffff;}
#wp-calendar th{font-style:normal;text-transform:capitalize;padding:3px 5px;}
#wp-calendar #prev a,#wp-calendar #next a{font-size:9pt;}
#wp-calendar #next a{padding-right:10px;text-align:right;}
#wp-calendar #prev a{padding-left:10px;text-align:left;}
strong{font-weight:bold;color:#1c1c1c;}
cite,em,i{font-style:italic;}
pre,code{font-family:Courier New,monospace;margin-bottom:10px;}
ins{text-decoration:none;}
sup,sub{height:0;line-height:1;position:relative;vertical-align:baseline;}
sup{bottom:0.8em;}
sub{top:0.3em;}
dl{margin:0 0 1.5em 0;}
dl dt{font-weight:bold;}
dd{margin-left:1.5em;}
blockquote{margin:1.5em;padding:1em;color:#666666;background:#e6e6e6;font-style:italic;border:1px solid #dcdcdc;}
blockquote p{padding-bottom:0px;}
.alignright{float:right;}
.alignleft{float:left;}
#posts .post{width:100%;}
#posts .gallery_item{width:194px;margin:0 22px 44px 22px;}
#et_contact_left{margin-bottom:20px;}
#et_contact_submit,#et_contact_reset{margin-top:15px;}
.et-protected-form p{margin-top:-15px !important;}
p#et-search-word{margin-bottom:-12px !important;margin-top:-15px !important;}
.post .postinfo{display:block;}
.post .text{min-height:80px;}
.et_embedded_videos{display:none !important;}
.js #featured #slides{background:#E5E5E5 url(images/ajax-loader.gif) no-repeat center;}
.js .et_default_slider .slide{display:none;}
h1,h2,h3,#quote div span,#blurbs div span.titles,h5,.hover span,.fn{font-family:'ColaborateThinRegular',Arial,sans-serif;}
h2,h3,#quote div span,.hover span,.fn{text-shadow:1px 1px 0px #fff;}
.banner h2,.item .hover span{font-style:normal;font-weight:lighter;}
.slider_small_overlay,.slider_overlay{position:absolute;display:block;}
.slider_overlay{background:url(images/slider-overlay.png) no-repeat;width:954px;height:375px;top:0;left:0;display:block;}
.slider_small_overlay{background:url(images/slider-thumb-overlay.png) no-repeat;width:83px;height:83px;top:4px;left:4px;}
.flexslider .slide .banner{top:90px;}
.et-box-content p{padding-bottom:15px;padding-top:0;}
分享到QQ
分享到微博
微信扫一扫
