以下是 jQ渐变隐藏按钮焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery渐变隐藏按钮焦点图</title>
<link rel="stylesheet" media="all" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/tabs.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<script src="js/jquery.columnizer.min.js"></script>
<!-- Isotope -->
<script src="js/jquery.isotope.min.js"></script>
<!-- Lof slider -->
<script src="js/jquery.easing.js"></script>
<script src="js/lof-slider.js"></script>
<link rel="stylesheet" href="css/lof-slider.css" media="all" />
<!-- ENDS slider -->
<!-- JCarousel -->
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" media="screen" href="css/carousel.css" />
<!-- ENDS JCarousel -->
<!-- GOOGLE FONTS -->
<link href="http://fonts.googleapis.com/css?family=Voltaire" rel="stylesheet" type="text/css">
<!-- modernizr -->
<script src="js/modernizr.js"></script>
<!-- SKIN -->
<link rel="stylesheet" media="all" href="css/skin.css" />
<!-- Less framework -->
<link rel="stylesheet" media="all" href="css/lessframework.css" />
<!-- flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<script src="js/jquery.flexslider.js"></script>
</head>
<body class="home">
<header>
<div class="wrapper cf">
<!-- SLIDER -->
<div id="home-slider" class="lof-slidecontent">
<div class="preload">
<div>
</div>
</div>
<!-- slider content -->
<div class="main-slider-content">
<ul class="sliders-wrap-inner">
<li>
<img src="img/dummies/slides/01.jpg" title alt="alt" />
<div class="slider-description">
<h4>Lorem ipsum dolor</h4>
<p>Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean
ultricies mi vitae est...
<a class="link" href="#">Read more </a></p>
</div>
</li>
<li>
<img src="img/dummies/slides/02.jpg" title alt="alt" />
<div class="slider-description">
<h4>Lorem ipsum dolor</h4>
<p>Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean
ultricies mi vitae est...
<a class="link" href="#">Read more </a></p>
</div>
</li>
<li>
<img src="img/dummies/slides/03.jpg" title alt="alt" />
<div class="slider-description">
<h4>Lorem ipsum dolor</h4>
<p>Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean
ultricies mi vitae est...
<a class="link" href="#">Read more </a></p>
</div>
</li>
<li>
<img src="img/dummies/slides/04.jpg" title alt="alt" />
<div class="slider-description">
<h4>Lorem ipsum dolor</h4>
<p>Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean
ultricies mi vitae est...
<a class="link" href="#">Read more </a></p>
</div>
</li>
<li>
<img src="img/dummies/slides/05.jpg" title alt="alt" />
<div class="slider-description">
<h4>Lorem ipsum dolor</h4>
<p>Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean
ultricies mi vitae est...
<a class="link" href="#">Read more </a></p>
</div>
</li>
<li>
<img src="img/dummies/slides/06.jpg" title alt="alt" />
<div class="slider-description">
<h4>Lorem ipsum dolor</h4>
<p>Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean
ultricies mi vitae est...
<a class="link" href="#">Read more </a></p>
</div>
</li>
<li>
<img src="img/dummies/slides/07.jpg" title alt="alt" />
<div class="slider-description">
<h4>Lorem ipsum dolor</h4>
<p>Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean
ultricies mi vitae est...
<a class="link" href="#">Read more </a></p>
</div>
</li>
</ul>
</div>
<!-- ENDS slider content -->
<!-- slider nav -->
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li>
<img src="img/dummies/slides/01_thumb.jpg" alt="alt" /></li>
<li>
<img src="img/dummies/slides/02_thumb.jpg" alt="alt" /></li>
<li>
<img src="img/dummies/slides/03_thumb.jpg" alt="alt" /></li>
<li>
<img src="img/dummies/slides/04_thumb.jpg" alt="alt" /></li>
<li>
<img src="img/dummies/slides/05_thumb.jpg" alt="alt" /></li>
<li>
<img src="img/dummies/slides/06_thumb.jpg" alt="alt" /></li>
<li>
<img src="img/dummies/slides/07_thumb.jpg" alt="alt" /></li>
</ul>
</div>
<div class="button-next">
Next</div>
<div class="button-previous">
Previous</div>
</div>
<!-- slider nav --></div></div>
</header>
</body>
</html>JS代码(custom.js):
// Jquery with no conflictjQuery(document).ready(function($){
//##########################################// COLUMNIZR//##########################################$('.multicolumn').columnize({
columns:2}
);
//##########################################// CAROUSEL//##########################################$('#mycarousel').jcarousel({
// Configuration goes here (http://sorgalla.com/projects/jcarousel/) vertical:false}
);
$('#mycarousel-vertical').jcarousel({
// Configuration goes here (http://sorgalla.com/projects/jcarousel/) vertical:true}
);
//##########################################// LOF SLIDER//##########################################var buttons ={
previous:$('#home-slider .button-previous'),next:$('#home-slider .button-next')}
;
$('#home-slider').lofJSidernews({
interval:4000,direction:'opacitys',easing:'easeInOutExpo',duration:1200,auto:false,maxItemDisplay:5,navPosition:'horizontal',// horizontalnavigatorHeight:73,navigatorWidth:188,mainWidth:940,buttons:buttons}
);
//##########################################// Superfish//##########################################$("ul.sf-menu").superfish({
animation:{
height:'show'}
,// slide-down effect without fade-in delay:800,// 1.2 second delay on mouseout autoArrows:false,speed:100}
);
//##########################################// PROJECT SLIDER//########################################## $('.project-slider').flexslider({
animation:"fade",controlNav:true,directionNav:false,keyboardNav:true}
);
//##########################################// Filter - Isotope//##########################################var $container = $('#filter-container');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector:'figure',filter:'*',resizable:false,animationEngine:'jquery'}
);
}
);
// filter buttons$('#filter-buttons a').click(function(){
// select currentvar $optionSet = $(this).parents('#filter-buttons');
$optionSet.find('.selected').removeClass('selected');
$(this).addClass('selected');
var selector = $(this).attr('data-filter');
$container.isotope({
filter:selector}
);
return false;
}
);
//##########################################// Tool tips//##########################################$('.poshytip').poshytip({
className:'tip-twitter',showTimeout:1,alignTo:'target',alignX:'center',offsetY:5,allowTipHover:false}
);
$('.form-poshytip').poshytip({
className:'tip-twitter',showOn:'focus',alignTo:'target',alignX:'right',alignY:'center',offsetX:5}
);
//##########################################// Tweet feed//##########################################$("#tweets").tweet({
count:3,username:"ansimuz"}
);
//##########################################// PrettyPhoto//##########################################$('a[data-rel]').each(function(){
$(this).attr('rel',$(this).data('rel'));
}
);
$("a[rel^='prettyPhoto']").prettyPhoto();
//##########################################// Accordion box//##########################################$('.accordion-container').hide();
$('.accordion-trigger:first').addClass('active').next().show();
$('.accordion-trigger').click(function(){
if( $(this).next().is(':hidden') ){
$('.accordion-trigger').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
return false;
}
);
//##########################################// Toggle box//##########################################$('.toggle-trigger').click(function(){
$(this).next().toggle('slow');
$(this).toggleClass("active");
return false;
}
).next().hide();
//##########################################// Tabs//########################################## $(".tabs").tabs("div.panes > div",{
effect:'fade'}
);
//##########################################// Create Combo Navi//##########################################// Create the dropdown base$("<select id='comboNav' />").appendTo("#combo-holder");
// Create default option "Go to..."$("<option />",{
"selected":"selected","value":"","text":"Navigation"}
).appendTo("#combo-holder select");
// Populate dropdown with menu items$("#nav a").each(function(){
var el = $(this);
var label = $(this).parent().parent().attr('id');
var sub = (label == 'nav') ? '':'- ';
$("<option />",{
"value":el.attr("href"),"text":sub + el.text()}
).appendTo("#combo-holder select");
}
);
//##########################################// Combo Navigation action//##########################################$("#comboNav").change(function(){
location = this.options[this.selectedIndex].value;
}
);
//##########################################// Resize event//##########################################$(window).resize(function(){
var w = $(window).width();
//console.log(w);
$container.isotope('reLayout');
}
).trigger("resize");
}
);
//closeJS代码(slider.js):
// Jquery with no conflictjQuery(document).ready(function($){
//##########################################// LOF SLIDER//##########################################var buttons ={
previous:$('#home-slider .button-previous'),next:$('#home-slider .button-next')}
;
function initLofSlider(items,nh,nw,w){
$('#home-slider').lofJSidernews({
interval:4000,direction:'opacitys',easing:'easeInOutExpo',duration:1200,auto:false,maxItemDisplay:5,navPosition:'horizontal',// horizontalnavigatorHeight:73,navigatorWidth:188,mainWidth:w,buttons:buttons}
);
}
// responsive slider function// Default values for pagevar items = 5;
// Max item displayvar nh = 73;
// Navigator Heightvar nw = 188;
// Navigator Widthvar w = 940;
// Main WidthinitLofSlider(items,nh,nw,w);
$(window).resize(function(){
var ww = $(window).width();
console.log(ww);
// Default Layout:992px.items = 5;
nh = 73;
nw = 188;
w = 940;
/*/
/ Tablet Layout:768px.if( ww >= 768 && ww <= 991){
items = 5;
nh = 73;
nw = 188;
w = 768;
console.log('TABLET');
}
// Wide Mobile Layout:480pxif( ww >= 480 && ww <= 767){
items = 5;
nh = 73;
nw = 188;
w = 480;
}
initLofSlider(items,nh,nw,w);
*/
}
);
//close}
);
CSS代码(jquery.tweet.css):
/* Tweet widget CSS */
.tweet,.query{}
.tweet .tweet_list,.query .tweet_list{-webkit-border-radius:.5em;list-style-type:none;margin:0;padding:0;overflow-y:hidden;}
.tweet .tweet_list .awesome,.tweet .tweet_list .epic,.query .tweet_list .awesome,.query .tweet_list .epic{text-transform:uppercase;}
.tweet .tweet_list li,.query .tweet_list li{overflow-y:auto;overflow-x:hidden;padding:1em;background-image:url(../img/bird.png);background-repeat:no-repeat;background-position:5px 5px;padding-left:40px;}
.tweet a,.query a{}
.tweet .tweet_list .tweet_odd,.query .tweet_list .tweet_odd{background-color:rgba(0,0,0,0.2);}
.tweet .tweet_list .tweet_avatar,.query .tweet_list .tweet_avatar{padding-right:.5em;float:left;}
.tweet .tweet_list .tweet_avatar img,.query .tweet_list .tweet_avatar img{vertical-align:middle;}
CSS代码(style.css):
@import url('reset.css');@import url('widgets.css');@import url('social.css');@import url('elements.css');@import url('comments.css');/** Folder v1.0**/
/* Vars ----------------------------------------------------*/
/* Mixins ----------------------------------------------------*/
/* IMPORT ------------------------------------------------------------*/
/* GENERAL ------------------------------------------------------------*/
.cf:after,.cf:before{content:"";display:table;}
.cf:after{clear:both;}
.cf{zoom:1;}
.wrapper{margin:0 auto;width:940px;position:relative;}
body{font-family:Helvetica,Arial,sans-serif;font-size:13px;}
body a{text-decoration:none;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
body p{margin-bottom:21px;}
#main h1,#main h2,#main h3,#main h4,#main h5,#main h6{text-shadow:4px 4px 0 rgba(0,0,0,0.1);}
#main,footer{line-height:1.5em;}
h1,h2,h3,h4,h5,h6{font-family:'Voltaire',sans-serif;}
h1{font-size:42px;}
h2{font-size:36px;}
h3{font-size:24px;}
h4{font-size:21px;}
h5{font-size:18px;}
h6{font-size:14px;}
.alignleft{float:left;margin:5px 10px 5px 0;}
.alignright{float:right;margin:5px 0px 5px 10px;}
.section-div{height:54px;border-top:1px solid #ccc;}
#logo{margin-top:10px;margin-bottom:20px;float:left;}
#logo:hover{opacity:0.8;}
/* ENTRY CONTENT ----------------------------------------------------*/
.entry-content .heading{margin-bottom:1.5em;}
/* COMBO NAVIGATION ------------------------------------------------------------*/
#comboNav{width:100%;margin-top:40px;margin-bottom:30px;float:left;}
/* NAVIGATION ------------------------------------------------------------*/
#nav{float:right;text-decoration:none;}
#nav > li{margin:0 10px;}
#nav > li:first-child{margin-left:0px;}
#nav > li:last-child{border-right:none;padding-right:0px;}
#nav > li > a{font-family:Arial,sans-serif;font-size:12px;display:block;overflow:hidden;line-height:80px;border-top:3px solid transparent;}
/* sub navigation -----------------------------------------------------*/
.sfHover ul{display:block;margin-top:30px;margin-left:0px;text-shadow:none;-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-o-box-shadow:0px 0px 2px rgba(0,0,0,0.2);box-shadow:0px 0px 2px rgba(0,0,0,0.2);}
.sfHover ul li a{display:block;padding:20px 20px;display:block;font-size:11px;text-decoration:none;}
/* WIDGET COLS ------------------------------------------------------------*/
.widget-cols{margin-top:60px;margin-bottom:30px;font-size:11px;}
.widget-cols h4{margin-bottom:30px;font-weight:normal;text-align:center;}
.widget-cols > li{width:220px;float:left;margin-right:20px;}
.widget-cols > li.fourth-col{margin-right:0px;}
/* HEADER ------------------------------------------------------------*/
header .wrapper{/* SLIDER ------------------------------------------------------------*/
}
header .wrapper #home-slider{margin-bottom:-73px;-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-o-box-shadow:0px 0px 2px rgba(0,0,0,0.2);box-shadow:0px 0px 2px rgba(0,0,0,0.2);}
/* MAIN ------------------------------------------------------------*/
#main{min-height:500px;padding-top:40px;}
body.home #main{padding-top:120px;}
/* HEADLINE ----------------------------------------------------*/
#headline{margin-bottom:20px;font-family:'Voltaire',sans-serif;font-size:48px;line-height:1.1em;text-align:center;text-shadow:4px 4px 0 rgba(0,0,0,0.1);text-indent:-9000px;border-bottom:1px solid #ccc;padding-top:22px;padding-bottom:22px;}
/* MASTHEAD ----------------------------------------------------*/
.masthead{margin-bottom:35px;font-family:'Voltaire',sans-serif;font-size:48px;line-height:1.1em;text-align:center;text-shadow:4px 4px 0 rgba(0,0,0,0.1);border-bottom:1px solid #ccc;padding-bottom:22px;}
/* FILTERED ITEMS ----------------------------------------------------*/
.isotope-item{z-index:2;}
.isotope-hidden.isotope-item{pointer-events:none;z-index:1;}
#filter-buttons{text-align:center;border-bottom:1px solid #999;margin-bottom:20px;}
#filter-buttons li{display:inline-block;margin-bottom:0px;}
#filter-buttons li a{display:block;text-decoration:none;padding:5px 10px;margin-bottom:0px;}
#filter-container{width:965px;margin-bottom:60px;/* Fixes shadow and margin right */
padding-left:5px;padding-top:5px;margin-left:-5px;}
#filter-container figure{width:300px;float:left;margin-right:20px;margin-bottom:30px;-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-o-box-shadow:0px 0px 2px rgba(0,0,0,0.2);box-shadow:0px 0px 2px rgba(0,0,0,0.2);}
#filter-container figure .thumb{display:block;width:100%;line-height:0em;border-bottom:2px solid #ccc;}
#filter-container figure .thumb img{max-width:100%;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
#filter-container figure .thumb:hover img{opacity:0.2;}
#filter-container figure figcaption{margin:18px 10px 20px 10px;text-align:center;}
#filter-container figure figcaption .heading{margin-bottom:13px;font-size:32px;line-height:1.2em;text-transform:uppercase;display:block;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
#filter-container figure figcaption .readmore{display:block;margin:10px 0px;}
/* PAGE ----------------------------------------------------*/
#page-content,#page-content-sb{position:relative;margin-top:30px;margin-bottom:30px;}
#page-content-sb{width:640px;float:left;margin-right:60px;}
/* COLUMNS LAYOUT----------------------------------------------------------*/
.one-half,.one-third,.one-fourth{float:left;margin-bottom:40px;margin-right:2.1276%;position:relative;}
.one-half{width:48.9361%;}
.one-third{width:31.9148%;}
.one-fourth{width:23.4042%;}
.last{clear:right;margin-right:0 !important;}
/* PORTFOLIO ----------------------------------------------------*/
#portfolio-content{position:relative;margin-top:30px;margin-bottom:60px;}
#portfolio-content #filter-container{margin-bottom:60px;}
#portfolio-content #filter-container .heading{border:none;margin-bottom:10px;padding-bottom:0px;}
#portfolio-content #filter-container .portfolio-cat{font-style:italic;}
#portfolio-content .project-pager{text-align:center;margin-bottom:20px;}
#portfolio-content .project-pager .previous-project{float:left;}
#portfolio-content .project-pager .next-project{float:right;}
#portfolio-content #project-box{-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-o-box-shadow:0px 0px 2px rgba(0,0,0,0.2);box-shadow:0px 0px 2px rgba(0,0,0,0.2);margin-bottom:60px;}
#portfolio-content #project-box .info{float:left;width:164px;/* 184 - 20*/
padding-left:20px;margin-right:68px;font-size:11px;}
#portfolio-content #project-box .info strong{font-weight:bold;display:block;}
#portfolio-content #project-box .info p{margin-bottom:12px;}
#portfolio-content #project-box .info .launch{display:inline-block;padding:5px;margin-left:-5px;}
#portfolio-content #project-box .entry-content{float:left;width:688px;/* 940 - (184 + 68) - 20*/
margin-bottom:40px;}
#portfolio-content #project-box .entry-content .multicolumn .column *{padding-right:20px;}
/* RELATED PROJECTS ---------------------------------------------------*/
.related-projects{display:block;padding:0px;}
.related-projects .related-heading{font-weight:bold;margin-bottom:21px;}
.related-projects .related-list{display:block;}
.related-projects figure{display:block;float:left;margin-right:20px;margin-bottom:20px;width:220px;}
.related-projects figure:last-child{margin-right:0px;}
.related-projects figure .heading{text-decoration:none;font-style:normal;text-align:center;display:block;margin-bottom:10px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
.related-projects figure .thumb{display:block;margin-bottom:10px;line-height:0em;width:220px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-o-box-shadow:0px 0px 2px rgba(0,0,0,0.2);box-shadow:0px 0px 2px rgba(0,0,0,0.2);}
.related-projects figure .thumb img{max-width:100%;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
.related-projects figure .thumb:hover img{opacity:0.15;}
/* CONTACT ----------------------------------------------------*/
#map-holder{margin-bottom:80px;-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-o-box-shadow:0px 0px 2px rgba(0,0,0,0.2);box-shadow:0px 0px 2px rgba(0,0,0,0.2);}
#map-holder #map_canvas{width:100%;height:300px;}
#map-holder #map-content{padding:20px;border-top:1px solid #ccc;}
/* BLOG ------------------------------------------------------------*/
#posts-list{position:relative;width:640px;float:left;margin-top:30px;margin-right:60px;}
#posts-list article{position:relative;margin-bottom:55px;-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.2);-o-box-shadow:0px 0px 2px rgba(0,0,0,0.2);box-shadow:0px 0px 2px rgba(0,0,0,0.2);}
#posts-list article .feature-image{width:100%;line-height:0em;}
#posts-list article .feature-image img{max-width:100%;border-bottom:2px solid #ccc;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
#posts-list article .feature-image a img:hover{opacity:0.1;}
#posts-list article .box{position:relative;padding-left:40px;padding-top:12px;padding-bottom:18px;}
#posts-list article .box .entry-date{position:absolute;width:50px;height:37px;top:15px;left:-23px;display:block;padding-top:13px;font-family:'Voltaire',Arial,sans-serif;line-height:1em;-moz-border-radius:60px 60px 60px 60px;-webkit-border-radius:60px 60px 60px 60px;border-radius:60px 60px 60px 60px;box-shadow:4px 4px 0 0 rgba(0,0,0,0.2);}
#posts-list article .box .entry-date .number{font-size:18px;text-align:center;margin-bottom:3px;}
#posts-list article .box .entry-date .month{font-size:13px;text-align:center;}
#posts-list article .box .excerpt{float:left;width:421px;}
#posts-list article .box .excerpt .post-heading{display:block;font-family:'Voltaire',Arial,sans-serif;font-size:32px;line-height:1.1em;text-shadow:4px 4px 0 rgba(0,0,0,0.1);margin-top:14px;margin-bottom:21px;}
#posts-list article .box .excerpt .learnmore{display:inline-block;padding:7px;}
#posts-list article .box .meta{float:left;margin-left:20px;font-size:11px;padding-top:15px;}
#posts-list article .box .meta span{display:block;margin-bottom:10px;padding-left:25px;}
#posts-list article .box .meta .user{background:url(../img/icon-user.png) no-repeat 0px 0px;}
#posts-list article .box .meta .comments{background:url(../img/icon-comments.png) no-repeat 0px 0px;}
#posts-list article .box .meta .tags{background:url(../img/icon-tags.png) no-repeat 0px 0px;}
#posts-list article.format-audio .format{background:url(../img/icon-format-audio.png) no-repeat 0px 0px;}
#posts-list article.format-video .format{background:url(../img/icon-format-video.png) no-repeat 0px 0px;}
#posts-list article.format-link .format{background:url(../img/icon-format-link.png) no-repeat 0px 0px;}
#posts-list article.format-quote .format{background:url(../img/icon-format-quote.png) no-repeat 0px 0px;}
#posts-list article.format-standard .format{background:url(../img/icon-format-post.png) no-repeat 0px 0px;}
#posts-list article.format-image .format{background:url(../img/icon-format-image.png) no-repeat 0px 0px;}
body.single #posts-list{width:640px;}
body.single #posts-list article{margin-bottom:55px;}
body.single #posts-list article .box{position:relative;padding-left:40px;padding-top:12px;padding-bottom:18px;padding:0px 0px 0px 0px;background:none;}
body.single #posts-list article .box .excerpt{float:left;width:580px;margin-left:40px;margin-bottom:20px;margin-top:10px;}
body.single #posts-list article .box .meta{width:580px;margin-left:0px;padding:20px 20px 20px 40px;}
/* PAGE NAVIGATION ------------------------------------------------------------*/
#main .page-navigation{display:block;margin-bottom:100px;}
#main .page-navigation a{display:block;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
#main .page-navigation .nav-next{float:left;}
#main .page-navigation .nav-previous{float:right;}
/* SIDEBAR ------------------------------------------------------------*/
#sidebar{position:relative;width:240px;float:left;margin-top:30px;font-size:11px;}
#sidebar .block{margin-bottom:40px;padding-bottom:5px;}
#sidebar h4{border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:25px;padding-bottom:15px;}
#sidebar li{margin-bottom:7px;}
/* RESPONSIVE VIDEO ----------------------------------------------------*/
.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}
/* SOCIAL BAR ----------------------------------------------------*/
#social-bar{display:block;float:right;}
#social-bar li{display:block;float:left;margin-left:6px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
#social-bar li:hover{-webkit-transform:translate(0px,-5px);-moz-transform:translate(0px,-5px);-o-transform:translate(0px,-5px);transform:translate(0px,-5px);}
/* FOOTER ------------------------------------------------------------*/
footer{font-size:11px;}
footer h1,footer h2,footer h3,footer h4,footer h5,footer h6{text-shadow:4px 4px 0 rgba(255,255,255,0.1);}
/* FOOTER BOTTOM ------------------------------------------------------------*/
.footer-bottom{padding-top:20px;padding-bottom:60px;overflow:hidden;border-top:1px dashed rgba(255,255,255,0.1);}
.footer-bottom .left{width:50%;padding-top:10px;float:left;}
.footer-bottom .right{width:50%;float:right;}
CSS代码(superfish.css):
/*** ESSENTIAL STYLES ***/
.sf-menu,.sf-menu *{margin:0;padding:0;list-style:none;}
.sf-menu{}
.sf-menu ul{position:absolute;top:-999em;width:10em;/* left offset of submenus need to match (see below) */
}
.sf-menu ul li{width:100%;}
.sf-menu li:hover{visibility:inherit;/* fixes IE7 'sticky bug' */
}
.sf-menu li{float:left;position:relative;}
.sf-menu a{display:block;position:relative;}
.sf-menu li:hover ul,.sf-menu li.sfHover ul{left:0;top:2.5em;/* match top ul list item height */
z-index:99;}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em;}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:10em;/* match ul width */
top:0;}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul{top:-999em;}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul{left:10em;/* match ul width */
top:0;}
分享到QQ
分享到微博
微信扫一扫
