以下是 uisdc优设网jQuery焦点图特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>uisdc优设网jQuery焦点图</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="wrap">
<div id="main">
<div class="featured-wrapper">
<div id="featured-content">
<img class="dummy " src="images/empty.gif" alt="" width="750" height="380" />
<div class="featured-post">
<a href="#" title="怎样给扁平化风格选择合适的字体（附字体案例）">
<img src="images/6.jpg" alt="怎样给扁平化风格选择合适的字体（附字体案例）" class="featured-thumbnail " /></a>
<h2 class="post-title entry-title">
<a href="#" target="_blank">
怎样给扁平化风格选择合适的字体（附字体案例）</a> </h2>
<div class="opacity_bg">
</div>
<h2></h2>
<div class="byline">
<abbr class="published" title="星期一, 八月 5th, 2013, 1:30 上午">
2013/08/05</abbr></div>
</div>
<!-- .featured-post -->
<div class="featured-post">
<a href="#" title="一组超酷的饮料类网站设计欣赏">
<img src="images/1.jpg" alt="一组超酷的饮料类网站设计欣赏" class="featured-thumbnail " /></a>
<h2 class="post-title entry-title">
<a href="#" target="_blank">
一组超酷的饮料类网站设计欣赏</a> </h2>
<div class="opacity_bg">
</div>
<h2></h2>
<div class="byline">
<abbr class="published" title="星期一, 八月 5th, 2013, 12:43 上午">
2013/08/05</abbr></div>
</div>
<!-- .featured-post -->
<div class="featured-post">
<a href="#?innovative-navigation-designs" title="网页新趋势：革命性的创新网页导航设计">
<img src="images/2.jpg" alt="网页新趋势：革命性的创新网页导航设计" class="featured-thumbnail " /></a>
<h2 class="post-title entry-title">
<a href="#?innovative-navigation-designs" target="_blank">
网页新趋势：革命性的创新网页导航设计</a> </h2>
<div class="opacity_bg">
</div>
<h2></h2>
<div class="byline">
<abbr class="published" title="星期五, 八月 2nd, 2013, 2:35 上午">
2013/08/02</abbr></div>
</div>
<!-- .featured-post -->
<div class="featured-post">
<a href="#?designer-film" title="设计师应该看的10部电影">
<img src="images/5.jpg" alt="设计师应该看的10部电影" class="featured-thumbnail " /></a>
<h2 class="post-title entry-title">
<a href="#?designer-film" target="_blank">
设计师应该看的10部电影</a> </h2>
<div class="opacity_bg">
</div>
<h2></h2>
<div class="byline">
<abbr class="published" title="星期五, 八月 2nd, 2013, 1:12 上午">
2013/08/02</abbr></div>
</div>
<!-- .featured-post -->
<div class="featured-post">
<a href="#?serve" title="优设网设计服务平台">
<img src="images/4.jpg" alt="优设网设计服务平台" class="featured-thumbnail " /></a>
<h2 class="post-title entry-title">
<a href="#?serve" target="_blank">优设网设计服务平台</a>
</h2>
<div class="opacity_bg">
</div>
<h2></h2>
<div class="byline">
<abbr class="published" title="星期二, 七月 30th, 2013, 7:45 下午">
2013/07/30</abbr></div>
</div>
<!-- .featured-post -->
<div class="featured-post">
<a href="#?13-font-website" title="13个将漂亮字体应用到网页设计中的案例">
<img src="images/3.jpg" alt="13个将漂亮字体应用到网页设计中的案例" class="featured-thumbnail " /></a>
<h2 class="post-title entry-title">
<a href="#?13-font-website" target="_blank">
13个将漂亮字体应用到网页设计中的案例</a> </h2>
<div class="opacity_bg">
</div>
<h2></h2>
<div class="byline">
<abbr class="published" title="星期四, 七月 25th, 2013, 12:51 上午">
2013/07/25</abbr></div>
</div>
<!-- .featured-post -->
<span id="slider-prev" class="slider-nav">←</span>
<span id="slider-next" class="slider-nav">→</span> </div>
<!-- #featured-content -->
<div id="slider-nav">
<ul id="slide-thumbs">
<li class>
<a href="#?flat-design-fonts" title="怎样给扁平化风格选择合适的字体（附字体案例）">
<img src="images/6_1.jpg" alt="怎样给扁平化风格选择合适的字体（附字体案例）" class="slider-nav-thumbnail " /></a>
</li>
<li class>
<a href="#?drink-website-gallery" title="一组超酷的饮料类网站设计欣赏">
<img src="images/1_1.jpg" alt="一组超酷的饮料类网站设计欣赏" class="slider-nav-thumbnail " /></a>
</li>
<li class>
<a href="#?innovative-navigation-designs" title="网页新趋势：革命性的创新网页导航设计">
<img src="images/2_1.jpg" alt="网页新趋势：革命性的创新网页导航设计" class="slider-nav-thumbnail " /></a>
</li>
<li class>
<a href="#?designer-film" title="设计师应该看的10部电影">
<img src="images/5_1.jpg" alt="设计师应该看的10部电影" class="slider-nav-thumbnail " /></a>
</li>
<li class>
<a href="#?serve" title="优设网设计服务平台">
<img src="images/4_1.jpg" alt="优设网设计服务平台" class="slider-nav-thumbnail " /></a>
</li>
<li class="last">
<a href="#?13-font-website" title="13个将漂亮字体应用到网页设计中的案例">
<img src="images/3_1.jpg" alt="13个将漂亮字体应用到网页设计中的案例" class="slider-nav-thumbnail " /></a>
</li>
</ul>
</div>
<!-- #slider-nav--></div>
</div></div>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var slider_settings = {"timeout":"6000"};
/* ]]> */
</script>
<script type="text/javascript" src="js/footer-scripts-light.js"></script>
</body>
</html>
JS代码(footer-scripts-light.js):
/* <![CDATA[ */
var jqu = jQuery.noConflict();
jqu( function (){
/* Remove a class from the body tag if JavaScript is enabled */
jqu( 'body' ).removeClass( 'no-js' );
/* Masonry */
var $container = jqu( '.hfeed-more');
var width = $container.width();
$container.imagesLoaded( function(){
$container.masonry({
temSelector:'.hentry',columnWidth:width * 0.4787234042553191,gutterWidth:width * 0.0425531914893617,isResizable:true,}
);
}
);
/* Cycle */
jqu( '#featured-content' ).cycle({
slideExpr:'.featured-post',fx:'fade',speed:500,timeout:slider_settings.timeout,cleartypeNoBg:true,pager:'#slide-thumbs',slideResize:true,containerResize:false,width:'100%',fit:1,prev:'#slider-prev',next:'#slider-next',pagerAnchorBuilder:function( idx,slide ){
// return selector string for existing anchorreturn '#slide-thumbs li:eq(' + idx + ') a';
}
}
);
/* FitVids */
jqu( ".entry-content" ).fitVids();
}
);
/* ]]> */
JS代码(jquery.masonry.min.js):
/** * jQuery Masonry v2.1.02 * A dynamic layout plugin for jQuery * The flip-side of CSS Floats * http://masonry.desandro.com * * Licensed under the MIT license. * Copyright 2011 David DeSandro */
(function(a,b,c){
var d=b.event,e;
d.special.smartresize={
setup:function(){
b(this).bind("resize",d.special.smartresize.handler)}
,teardown:function(){
b(this).unbind("resize",d.special.smartresize.handler)}
,handler:function(a,b){
var c=this,d=arguments;
a.type="smartresize",e&&clearTimeout(e),e=setTimeout(function(){
jQuery.event.handle.apply(c,d)}
,b==="execAsap"?0:100)}
}
,b.fn.smartresize=function(a){
return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])}
,b.Mason=function(a,c){
this.element=b(c),this._create(a),this._init()}
,b.Mason.settings={
isResizable:!0,isAnimated:!1,animationOptions:{
queue:!1,duration:500}
,gutterWidth:0,isRTL:!1,isFitWidth:!1,containerStyle:{
position:"relative"}
}
,b.Mason.prototype={
_filterFindBricks:function(a){
var b=this.options.itemSelector;
return b?a.filter(b).add(a.find(b)):a}
,_getBricks:function(a){
var b=this._filterFindBricks(a).css({
position:"absolute"}
).addClass("masonry-brick");
return b}
,_create:function(c){
this.options=b.extend(!0,{
}
,b.Mason.settings,c),this.styleQueue=[];
var d=this.element[0].style;
this.originalStyle={
height:d.height||""}
;
var e=this.options.containerStyle;
for(var f in e)this.originalStyle[f]=d[f]||"";
this.element.css(e),this.horizontalDirection=this.options.isRTL?"right":"left",this.offset={
x:parseInt(this.element.css("padding-"+this.horizontalDirection),10),y:parseInt(this.element.css("padding-top"),10)}
,this.isFluid=this.options.columnWidth&&typeof this.options.columnWidth=="function";
var g=this;
setTimeout(function(){
g.element.addClass("masonry")}
,0),this.options.isResizable&&b(a).bind("smartresize.masonry",function(){
g.resize()}
),this.reloadItems()}
,_init:function(a){
this._getColumns(),this._reLayout(a)}
,option:function(a,c){
b.isPlainObject(a)&&(this.options=b.extend(!0,this.options,a))}
,layout:function(a,b){
for(var c=0,d=a.length;
c<d;
c++)this._placeBrick(a[c]);
var e={
}
;
e.height=Math.max.apply(Math,this.colYs);
if(this.options.isFitWidth){
var f=0,c=this.cols;
while(--c){
if(this.colYs[c]!==0)break;
f++}
e.width=(this.cols-f)*this.columnWidth-this.options.gutterWidth}
this.styleQueue.push({
$el:this.element,style:e}
);
var g=this.isLaidOut?this.options.isAnimated?"animate":"css":"css",h=this.options.animationOptions,i;
for(c=0,d=this.styleQueue.length;
c<d;
c++)i=this.styleQueue[c],i.$el[g](i.style,h);
this.styleQueue=[],b&&b.call(a),this.isLaidOut=!0}
,_getColumns:function(){
var a=this.options.isFitWidth?this.element.parent():this.element,b=a.width();
this.columnWidth=this.isFluid?this.options.columnWidth(b):this.options.columnWidth||this.$bricks.outerWidth(!0)||b,this.columnWidth+=this.options.gutterWidth,this.cols=Math.floor((b+this.options.gutterWidth)/this.columnWidth),this.cols=Math.max(this.cols,1)}
,_placeBrick:function(a){
var c=b(a),d,e,f,g,h;
d=Math.ceil(c.outerWidth(!0)/(this.columnWidth+this.options.gutterWidth)),d=Math.min(d,this.cols);
if(d===1)f=this.colYs;
else{
e=this.cols+1-d,f=[];
for(h=0;
h<e;
h++)g=this.colYs.slice(h,h+d),f[h]=Math.max.apply(Math,g)}
var i=Math.min.apply(Math,f),j=0;
for(var k=0,l=f.length;
k<l;
k++)if(f[k]===i){
j=k;
break}
var m={
top:i+this.offset.y}
;
m[this.horizontalDirection]=this.columnWidth*j+this.offset.x,this.styleQueue.push({
$el:c,style:m}
);
var n=i+c.outerHeight(!0),o=this.cols+1-l;
for(k=0;
k<o;
k++)this.colYs[j+k]=n}
,resize:function(){
var a=this.cols;
this._getColumns(),(this.isFluid||this.cols!==a)&&this._reLayout()}
,_reLayout:function(a){
var b=this.cols;
this.colYs=[];
while(b--)this.colYs.push(0);
this.layout(this.$bricks,a)}
,reloadItems:function(){
this.$bricks=this._getBricks(this.element.children())}
,reload:function(a){
this.reloadItems(),this._init(a)}
,appended:function(a,b,c){
if(b){
this._filterFindBricks(a).css({
top:this.element.height()}
);
var d=this;
setTimeout(function(){
d._appended(a,c)}
,1)}
else this._appended(a,c)}
,_appended:function(a,b){
var c=this._getBricks(a);
this.$bricks=this.$bricks.add(c),this.layout(c,b)}
,remove:function(a){
this.$bricks=this.$bricks.not(a),a.remove()}
,destroy:function(){
this.$bricks.removeClass("masonry-brick").each(function(){
this.style.position="",this.style.top="",this.style.left=""}
);
var c=this.element[0].style;
for(var d in this.originalStyle)c[d]=this.originalStyle[d];
this.element.unbind(".masonry").removeClass("masonry").removeData("masonry"),b(a).unbind(".masonry")}
}
,b.fn.imagesLoaded=function(a){
function i(a){
a.target.src!==f&&b.inArray(this,g)===-1&&(g.push(this),--e<=0&&(setTimeout(h),d.unbind(".imagesLoaded",i)))}
function h(){
a.call(c,d)}
var c=this,d=c.find("img").add(c.filter("img")),e=d.length,f="data:image/gif;
base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",g=[];
e||h(),d.bind("load.imagesLoaded error.imagesLoaded",i).each(function(){
var a=this.src;
this.src=f,this.src=a}
);
return c}
;
var f=function(a){
this.console&&console.error(a)}
;
b.fn.masonry=function(a){
if(typeof a=="string"){
var c=Array.prototype.slice.call(arguments,1);
this.each(function(){
var d=b.data(this,"masonry");
if(!d)f("cannot call methods on masonry prior to initialization;
attempted to call method '"+a+"'");
else{
if(!b.isFunction(d[a])||a.charAt(0)==="_"){
f("no such method '"+a+"' for masonry instance");
return}
d[a].apply(d,c)}
}
)}
else this.each(function(){
var c=b.data(this,"masonry");
c?(c.option(a||{
}
),c._init()):b.data(this,"masonry",new b.Mason(a,this))}
);
return this}
}
)(window,jQuery);
CSS代码(style.css):
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
[hidden]{display:none;}
figure{margin:0;}
html{font-size:1em;/* 16px */
overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;position:relative;}
body{margin:0;font:0.75em/1.75em 'Arial',Helvetica,Arial,sans-serif;/* 12 / 16 = 0.75;21 / 12 = 1.75 */
color:#525252;background:#fff;padding:0;position:relative;}
::-moz-selection{background:#000;color:#fff;text-shadow:none;}
::selection{background:#000;color:#fff;text-shadow:none;}
a,a:visited{color:#0da4d3;text-decoration:none;}
a:hover{text-decoration:none;color:#000;}
a:focus{outline:none;}
a:hover,a:active{outline:0;}
abbr{cursor:help}
abbr[title]{border-bottom:1px dotted;}
acronym{font-size:.85em;text-transform:uppercase;color:#666;border-bottom:1px dotted #eee;cursor:help;}
acronym:hover{color:#333;background:#f3f3f3;border-bottom:1px dotted #aaa;}
small{font-size:0.9166666666666667em;}
/* 12 / 13 = 0.9166666666666667 */
big{font-size:15px;}
p{margin:0 0 1.75em 0}
b,strong{font-weight:bold;}
blockquote{margin:0 1.75em;font-style:normal}
blockquote em,blockquote cite{font-style:italic}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
em,cite{font-style:italic;}
em em,cite cite{font-style:normal}
dfn{font-style:italic;}
address{font-style:italic;margin:0 0 1.75em 0}
li address,dd address{margin:0}
del{text-decoration:line-through}
embed,object,video{margin-bottom:1.75em}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0 1.75em 0;padding:0;}
ins{background:#f3f3f3;color:#000;text-decoration:none;font-style:italic;}
mark{background:#f3f3f3;color:#000;font-style:italic;font-weight:bold;}
pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace;font-size:1em;}
pre code{font-size:1em}
pre{font-size:0.9166666666666667em;font-family:Monaco,monospace,Courier,"Courier New";overflow:auto;line-height:1.75em;margin-bottom:1.75em;padding:10px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
code{font-size:0.9166666666666667em;font-family:Monaco,monospace,Courier,"Courier New";}
sub,sup{font-size:0.8333333333333333em;/* 10 / 12 = 0.8333333333333333 */
line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
ul{list-style:circle;margin:0 0 1.75em 2.8em;padding:0;}
ol{list-style-type:decimal;margin:0 0 1.75em 3.1em;padding:0;}
ol ol{list-style:upper-roman}
ol ol ol{list-style:lower-roman}
ol ol ol ol{list-style:upper-alpha}
ol ol ol ol ol{list-style:lower-alpha}
ul ul,ol ol,ul ol,ol ul{margin-bottom:0}
dl{margin:0 0 1.75em 5px}
dt{font-weight:bold;margin:10px 0 0 0}
dd{margin:5px 0 0 1.5em}
h1,h2,h3,h4,h5,h6{font-family:'Abel','Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-weight:normal;margin:0 0 15px 0;color:#333;line-height:1.3em;}
h1{font-size:3em;}
/* 36 / 12 = 3 */
h2{font-size:2em;}
/* 24 / 12 = 2 */
h3{font-size:1.666666666666667em;}
/* 20 / 12 = 1.666666666666667 */
h4{font-size:1.5em;}
/* 18 / 12 = 1.5 */
h5{font-size:1.333333333333333em;/* 16 / 12 = 1.333333333333333 */
}
h6{font-size:1.166666666666667em;/* 14 / 12 = 1.166666666666667 */
text-transform:uppercase;font-weight:normal;}
img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}
svg:not(:root){overflow:hidden;}
form{margin:0;}
fieldset{border:0;margin:0;padding:0;}
label{cursor:pointer;}
legend{border:0;*margin-left:-7px;padding:0;}
button,input,select,textarea,a.button{font-size:1em;margin:0;vertical-align:baseline;*vertical-align:middle;}
button,input,a.button{line-height:normal;*overflow:visible;}
table button,table input{*overflow:auto;}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;resize:vertical;}
input:valid,textarea:valid{}
input:invalid,textarea:invalid{background-color:#f0dddd;}
option{padding:1px 2px;}
table{border-collapse:collapse;border-spacing:0;margin-bottom:1.75em;}
td{vertical-align:top;}
th,td{text-align:left;}
/* Transitions-------------------------------------------------------------- */
a,a img,input,.featured-post .byline{-webkit-transition:all 0.18s ease-out;-moz-transition:all 0.18s ease-out;-ms-transition:all 0.18s ease-out;-o-transition:all 0.18s ease-out;transition:all 0.18s ease-out;}
/* WordPress classes-------------------------------------------------------------- */
.hfeed h1,.hfeed h2,.hfeed h3,.hfeed h4,.hfeed h5,.hfeed h6{font-weight:normal;}
img.wp-smiley{max-height:0.8125em;margin:0;padding:0;border:none;}
.gallery{display:block;text-align:center;margin-bottom:1.75em !important;}
.left,.alignleft{float:left;//margin:0 15px 5px 0;}
.right,.alignright{float:right;//margin:0 0 10px 20px;}
.center,.aligncenter{display:block;margin:0 auto 1.75em auto !important;}
.block,.alignnone{display:block;margin:0 0 1.75em 0;}
img.alignleft,img.alignright{margin-top:5px;display:inline;}
blockquote.alignleft,blockquote .alignright{width:33%;}
.byline abbr,.entry-meta abbr,.comment-meta abbr{border:none;}
/* Tables-------------------------------------------------------------- */
table{margin:0 0 1.75em 0;width:100%;}
table caption{font-size:0.8125em;line-height:1.75em;color:#888;}
table th{font-size:0.9166666666666667em;line-height:1.75em;font-weight:normal;text-transform:uppercase;padding:10px 2%;border-bottom:none;border-bottom:1px solid #ddd;text-align:left;}
td{padding:0.8125em 2%;color:#888;border-bottom:1px solid #e7e7e7;}
/* Images & Video-------------------------------------------------------------- */
#site-title{display:none}
#site-title a:hover img{border:none;}
.hentry img,.entry-content img,.widget img,.wp-caption,.hentry embed,.entry-content embed,.widget embed,.hentry object,.entry-content object,.widget object,.hentry video,.entry-content video,.widget video{max-width:100%;}
.hentry img,.entry-content img,.widget img,.wp-caption{height:auto;}
/* Captions [caption]-------------------------------------------------------------- */
.wp-caption{overflow:hidden;}
.wp-caption img{margin:0 0 5px 0;}
.wp-caption .wp-caption-text{margin:5px 0;font-size:0.9166666666666667em;line-height:1em;color:#888;text-align:left;}
.wp-caption a{border:none;}
/* Layout-------------------------------------------------------------- */
#main{clear:both;width:100%;margin:0 auto;position:relative;padding-top:80px;}
.page-template-fullwidth #content{width:100%;}
.content-wrap{float:right;width:79.78723404255319%;/* 750 / 940 = 0.79787234042553 */
}
.page-template-fullwidth .content-wrap{width:100%;}
#content{float:left;width:62.66666666666667%;/* 470 / 750 = 0.6266666666666667 */
margin:0 0 30px 0;}
.aside{float:left;width:17.02127659574468%;/* 160 / 940 = 0.1702127659574468 */
}
#sidebar-primary{float:left;width:100%;/* 160 / 940 = 0.1702127659574468 */
}
#sidebar-secondary{float:right;width:33.33333333333333%;/* 250 / 750 = 0.3333333333333333 */
}
.wrap{max-width:940px;margin:0 auto;position:relative;}
#comments-template{clear:left;}
/* Header-------------------------------------------------------------- */
#header{clear:both;width:100%;float:left;}
#branding{width:940px;height:57px;position:relative;margin:0 auto;}
#site-title{font-family:'微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:3em;/* 36 / 12 = 3 */
line-height:1em;margin:0 0 3px 0;text-transform:uppercase;word-wrap:break-word;float:left;padding-top:10px;}
#site-title a{color:#fff;border-bottom:none;font-family:'微软雅黑';}
#header img{max-width:100%;}
#site-description{display:none;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.1em;/* 11 / 12 = 0.9166666666666667 */
font-weight:normal;line-height:1.5em;color:#bbb;float:left;margin:30px 0 0 5px;color:#fff}
.breadcrumbs{font-size:0.9166666666666667em;color:#aaa;float:left;width:96.85%;background:#f3f3f3;padding:.25em .6em .35em .9em;margin-bottom:20px;border-left:10px solid #e9e9e9;}
.breadcrumbs a,.breadcrumbs a:visited{color:#777;}
.breadcrumbs a:hover{color:#000;}
#sidebar-header{overflow:hidden;float:right;width:49.78723404255319%;/* 468 / 940 = 0.4978723404255319 */
height:60px;margin-bottom:20px;}
.featured-wrapper{float:right;margin-bottom:30px;width:79.78723404255319%;/* 750 / 940 = 0.79787234042553 */
overflow:hidden;position:relative;z-index:1;}
#featured-content{position:relative;margin-bottom:20px;height:287px;overflow:hidden;}
.featured-post{position:relative;overflow:hidden;float:left;}
.featured-post h2.entry-title a{position:absolute;bottom:180px;right:0;color:#fff;background:rgba(0,0,0,0.7);padding:5px 30px 5px 20px;font-size:22px;text-transform:uppercase;background:#000\9;filter:alpha(opacity=70)}
.featured-post:hover h2.entry-title a,.featured-post:hover .byline{color:#fff;background:#111;}
.featured-post .byline{position:absolute;bottom:150px;right:0;color:#fff;background:rgba(0,0,0,0.7);padding:5px 30px 5px 20px;font-size:12px;bottom:136px;bottom:135px\9;background:#000\9;filter:alpha(opacity=70)}
@-moz-document url-prefix(){.featured-post .byline{bottom:135px!important;}
}
.featured-post a:hover{border-bottom:none;}
.featured-thumbnail{max-width:100%;}
#featured-content .dummy{width:100% !important;height:auto !important;max-width:100%;height:auto;}
.no-js #featured-content .dummy,#featured-content .dummy.hidden{display:none;}
.slider-nav{display:block;position:absolute;bottom:0;width:31px;height:28px;background:#111 url(slider-nav-arrows.png) no-repeat;background:rgba(0,0,0,.5) url(slider-nav-arrows.png) no-repeat;color:#fff;font-size:1em;z-index:9;cursor:pointer;text-indent:-9999em;}
#slider-prev{left:0;background-position:7px -21px;}
#slider-next{right:0;background-position:7px 11px;}
.slider-nav:hover{background-color:#000;}
/* Featured Content (slider) Navigation-------------------------------------------------------------- */
#slider-nav{position:relative;width:100%;overflow:hidden;padding:0;margin:0;}
#slide-thumbs{width:100%;margin:0;}
#slider-nav li{float:left;list-style:none;width:14.66666666666667%;/* 110 / 750 = 0.1466666666666667 */
margin:0 2.4% 0 0px;/* 18 / 750 = 0.024 */
}
#slider-nav li a,#slider-nav li a:visited{border-bottom:none;padding:0;}
#slider-nav li.last{margin-right:0;}
#slider-nav li img{max-width:100%;}
.activeSlide img{opacity:0.3!important;}
.activeSlide a:hover,#slider-nav li a:hover{border-bottom:none!important;text-decoration:none}
/* Home-------------------------------------------------------------- */
.section-title{float:left;width:93.85%;color:#999;background:#f3f3f3;padding:.25em .6em .35em .6em;margin-bottom:20px;text-transform:lowercase;border-left:10px solid #e9e9e9;font-family:"microsoft yahei";}
.hfeed-more{float:left;width:100%;}
.page-template-front .hfeed-more .hentry{float:left;width:47.87234042553191%;/* 225 / 470 = 0.4787234042553191 */
margin:0 4.25531914893617% 15px 0;/* 20 / 470 = 0.0425531914893617 */
padding-bottom:8px;border-bottom:1px solid #eee;}
.page-template-front .hfeed-more .hentry.even{margin-right:0;}
.page-template-front .hfeed-more .hentry .entry-title a{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:0.9375em;/* 15 /16 = 0.875 */
text-transform:none;color:#333;}
.page-template-front .hfeed-more .hentry .entry-title a:hover{color:#0da4d3;border-color:#888;}
/* Posts-------------------------------------------------------------- */
.page-template-front .hentry,.archive .hentry,.search .hentry{float:left;width:100%;margin:0 0 25px 0;/* 20 / 510 = 0.0392156862745098 */
font-size:1em;position:relative;}
.hentry.even{margin-right:0;}
.hentry{margin:0 0 20px 0;position:relative;float:left;width:100%;}
.entry-header{/*float:left;width:30%;*/
}
.entry-summary{/*float:right;width:65%;padding-left:2.34375%;*/
}
.hentry .archive-thumbnail{margin:0 0 11px 0;}
.hentry img.featured{margin-bottom:15px;}
.byline-cat{position:absolute;top:0;right:0;padding:.1em .8em;font-size:0.8333333333333333em;background:#111;background:rgba(0,0,0,.25);}
.byline-cat,.byline-cat a,.byline-cat a:visited{color:#fff;color:rgba(255,255,255,.75);max-height:45px;overflow:hidden;}
.byline-cat a:hover{color:#fff;}
.read-more,.read-more:visited{position:absolute;top:173px;top:174px/9;right:0;z-index:10;color:#fff;background:#0da4d3;padding:.1em .8em;font-size:0.9166666666666667em;display:none;}
@-moz-document url-prefix(){.read-more,.read-more:visited{top:174px;}
}
.read-more:hover{color:#fff;background:#111;}
.home .hentry a:hover,.page-template-front .hentry a:hover,.archive .hentry a:hover,.search .hentry a:hover{border-bottom:none;}
/*.home .hentry:hover .read-more,.page-template-front .hentry:hover .read-more,.archive .hentry:hover .read-more,.search */
.hentry:hover .read-more{display:block;}
.hentry .gallery a:hover,.page-template-front .read-more:hover,.archive .read-more:hover,.search .read-more:hover{border-bottom:none;}
/* Post titles-------------------------------------------------------------- */
.hentry .entry-title,.page-template-front .hentry .entry-title{margin:0 0 0 0;padding:0;font-size:1.333333333333333em;/* 16 / 12 = 1.333333333333333 */
text-transform:uppercase;line-height:1.4em;height:1.4em;overflow:hidden;border:none;color:#111;word-spacing:2px;word-wrap:break-word;}
.entry-header h2.entry-title{font-size:1.4em!important;padding-bottom:5px !important;}
.singular .entry-title{font-size:1.8em;/* 24 / 12 = 2 */
font-family:Arial,'微软雅黑','Microsoft Yahei';color:#555;}
.singular-page .entry-title{color:#ccc;}
.singular-page .entry-title,.singular-attachment .entry-title{margin-bottom:.7em;}
.entry-title a,.entry-title a:visited{color:#0da4d3;font-family:'微软雅黑','hei','黑体',Arial,Helvetica,sans-serif;}
.home .hentry .entry-title a:hover,.page-template-front .hentry .entry-title a:hover,.archive .hentry .entry-title a:hover,.search .hentry .entry-title a:hover{color:#000;border-bottom:1px solid #000!important;}
/* Post bylines-------------------------------------------------------------- */
.byline,.home.singular .byline{font-size:12px;color:#bbb;line-height:1.4;}
.singular .byline{margin-bottom:12px;}
.featured-wrapper .featured-post .byline{margin-bottom:18px}
.byline a,.byline a:visited{color:#bbb;}
.byline a:hover{color:#000;}
.author,.published,.category,.edit{font-style:normal;}
.comment-list .published,.comment-list .edit,.comment-list .comment-reply-link{font-size:1em;text-transform:none;}
/* Post excerpts-------------------------------------------------------------- */
.entry-summary p{margin:0 0 1.6em 0;}
/* Post metadata-------------------------------------------------------------- */
.entry-meta{margin:0 0 25px 0;font-size:1.0em;color:#aaa;}
.entry-meta a{color:#888;}
.entry-meta a:hover{color:#000;}
/* Singular post prev/next links-------------------------------------------------------------- */
.singular .loop-nav{font-size:1.2em;color:#888;clear:left;margin-bottom:1em;}
.singular .previous{float:left;width:40%;}
.loop-nav .next{float:right;width:40%;text-align:right;}
/* Page links for multi-paged posts <!--nextpage-->-------------------------------------------------------------- */
.page-links{clear:both;font-size:0.9166666666666667em;word-spacing:2px;line-height:1em;color:#222;}
.entry-summary .page-links{clear:none;font-size:0.9166666666666667em;line-height:1em;color:#aaa;}
.page-links a,.page-links a:visited{display:inline-block;color:#555;background:#eee;padding:3px 6px;}
.page-links a:hover{color:#000;background:none;border:none;}
/* Archive/search pagination and comment pagination-------------------------------------------------------------- */
.comment-navigation{margin-bottom:1.75em;}
.pagination.loop-pagination{float:right;clear:both;margin-top:30px;}
.pagination .page-numbers,.comment-navigation .page-numbers,.wp-pagenavi a,.wp-pagenavi span{display:inline-block;padding:9px 12px;margin:0 5px 0 0;line-height:1em;margin-right:2px;}
.wp-pagenavi span{padding:0}
.pagination a.page-numbers,.comment-navigation a.page-numbers,.wp-pagenavi a{color:#fff!important;background:#111;}
.pagination a:hover,.comment-navigation a:hover,.wp-pagenavi a:hover{color:#fff;background:#0da4d3;border-bottom:none;}
.pagination .current,.comment-navigation .current,.wp-pagenavi .current{color:#999!important;background:none;padding:5px 10px 7px 10px;}
/* Sidebar after singular posts-------------------------------------------------------------- */
#sidebar-after-singular{overflow:hidden;margin:0;font-size:1em;float:left;}
#sidebar-after-singular a:hover{border-bottom:none;}
/* Widgets-------------------------------------------------------------- */
.sidebar .widget{float:left;width:100%;margin-bottom:15px;}
/* Widget titles-------------------------------------------------------------- */
.sidebar .widget-title{font-size:1em;color:#aaa;text-transform:uppercase;letter-spacing:1px;word-spacing:2px;}
/* Widget unordered lists-------------------------------------------------------------- */
.sidebar .widget ul{margin-left:16px;}
.sidebar .widget ul li.same_tag{line-height:1.5;margin-bottom:10px;}
.sidebar .widget ul li a{color:#555;}
.sidebar .widget ul li a:hover{color:#000;}
.sidebar .widget ul li a{color:#555;}
.sidebar .widget ul li a:hover{color:#000;}
.similarity .same_tag{width:49%;float:left}
.similarity:after{content:".";display:block;font-size:0px;line-height:0;height:0;clear:both;margin-bottom:20px;}
/* Search form widget-------------------------------------------------------------- */
.widget .search-form{}
.widget .search-form label{font-size:0.9166666666666667em;line-height:1.75em;color:#aaa;}
.widget .search-form input[type="text"]{width:91%;float:left;padding:8px 10px;font-size:1em;color:#aaa;}
.search-form .search-submit,.widget.search .widget-title{display:none;}
/* Comments-------------------------------------------------------------- */
.comment-list,.comment-list ol{list-style:none;margin:0 0 25px 0;}
.comment-list{margin-bottom:40px;}
.comment-list li{padding:20px 0 0 0;border-top:none;}
.comment-list li li{padding-left:11.70212765957447%;}
/* 55px / 470px = 0.1170212765957447 */
.comment-list .avatar{float:left;margin:0 13px 10px 0;}
.comment-meta{margin:0 0 3px 0;font-size:0.9166666666666667em;color:#bbb;line-height:1.75em;}
.comment-meta .comment-author cite{font-style:normal;font-weight:bold;color:#333;font-size:1.153846153846154em;}
.comment-author{margin-right:10px;}
.comment-meta a,.comment-meta a:visited{font-style:normal;color:#333;border-bottom:1px solid #0da4d3;}
.comment-meta a:hover{color:#000;border-bottom:none;}
.comments-closed{padding:10px 25px;font-size:1em;color:#888;background:#f3f3f3;}
.comment-content{margin-left:55px;}
.comment-content p{margin-bottom:1em;}
/* Comment form-------------------------------------------------------------- */
#respond{overflow:hidden;width:100%;}
.comment-list #respond{margin-top:1.75em;}
#respond .log-in-out{font-size:0.9166666666666667em;line-height:1em;color:#888;margin-bottom:-7px;}
#reply-title small a{font-size:0.9166666666666667em;line-height:1.75em;background:#fff;padding-right:8px;}
#respond label{font-size:0.9166666666666667em;line-height:1.75em;color:#bbb;}
#respond p.req label{color:#888;line-height:2.4em;}
#respond span.required{font-size:1em;font-weight:bold;color:#000;}
#respond #submit{margin-bottom:1.75em;}
#commentform input{display:inline;margin-right:10px;}
#commentform p{margin-bottom:15px;line-height:1em;}
#comment{margin-top:20px;}
#comments-number,#reply-title{color:#aaa;float:left;width:92%;background:#f3f3f3;padding:.25em .6em .35em .9em;margin-bottom:20px;border-left:10px solid #e9e9e9;}
/* Subsidiary sidebar-------------------------------------------------------------- */
#sidebar-subsidiary{overflow:visible;width:103.4%;margin:0 auto;padding:30px 0 0 0;clear:both;}
#sidebar-subsidiary .widget{float:left;width:21.80851063829787%;/* 205px / 940px = 21.80851063829787% */
margin:0 3.191489361702128% 20px 0;/* 30px / 940px = 3.191489361702128% */
font-size:1em;padding-top:20px;}
分享到QQ
分享到微博
微信扫一扫
