以下是 CSS3多终端下拉导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3多终端下拉导航</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400">
<style>
body
{
background-color: #f7efeb;
padding: 1.25em; /* 20 */
}
#nav
{
width: 60em; /* 1000 */
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: absolute;
top: 25%;
left: 50%;
margin-left: -30em; /* 30 480 */
}
#nav > a
{
display: none;
}
#nav li
{
position: relative;
}
#nav li a
{
color: #fff;
display: block;
}
#nav li a:active
{
background-color: #c00 !important;
}
#nav span:after
{
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #efa585;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
#nav > ul
{
height: 3.75em; /* 60 */
background-color: #e15a1f;
}
#nav > ul > li
{
width: 25%;
height: 100%;
float: left;
}
#nav > ul > li > a
{
height: 100%;
font-size: 1.5em; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-align: center;
}
#nav > ul > li:not( :last-child ) > a
{
border-right: 1px solid #cc470d;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
background-color: #cc470d;
}
/* second level */
#nav li ul
{
background-color: #cc470d;
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul
{
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul
{
left: -1px;
}
#nav li ul a
{
font-size: 1.25em; /* 20 */
border-top: 1px solid #e15a1f;
padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
background-color: #e15a1f;
}
@media only screen and ( max-width: 62.5em ) /* 1000 */
{
#nav
{
width: 100%;
position: static;
margin: 0;
}
}
@media only screen and ( max-width: 40em ) /* 640 */
{
html
{
font-size: 75%; /* 12 */
}
#nav
{
position: relative;
top: auto;
left: auto;
}
#nav > a
{
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #e15a1f;
position: relative;
}
#nav > a:before,
#nav > a:after
{
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after
{
top: 60%;
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
{
display: block;
}
/* first level */
#nav > ul
{
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul
{
display: block;
}
#nav > ul > li
{
width: 100%;
float: none;
}
#nav > ul > li > a
{
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a
{
border-right: none;
border-bottom: 1px solid #cc470d;
}
/* second level */
#nav li ul
{
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
</style>
</head>
<body>
<nav id="nav" role="navigation">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clearfix">
<li><a href="?home">Home</a></li>
<li><a href="?blog"><span>Blog</span></a>
<ul>
<li><a href="?design">Design</a></li>
<li><a href="?html">HTML</a></li>
<li><a href="?css">CSS</a></li>
<li><a href="?javascript">JavaScript</a></li>
</ul>
</li>
<li><a href="?work"><span>Work</span></a>
<ul>
<li><a href="?webdesign">Web Design</a></li>
<li><a href="?typography">Typography</a></li>
<li><a href="?frontend">Front-End</a></li>
</ul>
</li>
<li><a href="?about">About</a></li>
</ul>
</nav>
</body>
</html>
JS代码(doubletaptogo.js):
/*AUTHOR:Osvaldas Valutis,www.osvaldas.info*/
;
(function( $,window,document,undefined ){
$.fn.doubleTapToGo = function( params ){
if( !( 'ontouchstart' in window ) &&!navigator.msMaxTouchPoints &&!navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) ) return false;
this.each( function(){
var curItem = false;
$( this ).on( 'click',function( e ){
var item = $( this );
if( item[ 0 ] != curItem[ 0 ] ){
e.preventDefault();
curItem = item;
}
}
);
$( document ).on( 'click touchstart MSPointerDown',function( e ){
var resetItem = true,parents = $( e.target ).parents();
for( var i = 0;
i < parents.length;
i++ )if( parents[ i ] == curItem[ 0 ] )resetItem = false;
if( resetItem )curItem = false;
}
);
}
);
return this;
}
;
}
)( jQuery,window,document );
JS代码(socialite.js):
/*! * Socialite v2.0 * http://socialitejs.com * Copyright (c) 2011 David Bushell * Dual-licensed under the BSD or MIT licenses:http://socialitejs.com/license.txt */
window.Socialite=function(a,b,c){
"use strict";
var d=0,e=[],f={
}
,g={
}
,h=/^($|loaded|complete)/,i=a.encodeURIComponent,j={
settings:{
}
,hasClass:function(a,b){
return(" "+a.className+" ").indexOf(" "+b+" ")!==-1}
,addClass:function(a,b){
j.hasClass(a,b)||(a.className=a.className===""?b:a.className+" "+b)}
,removeClass:function(a,b){
a.className=(" "+a.className+" ").replace(" "+b+" "," ")}
,extendObject:function(a,b,d){
for(var e in b){
var f=a[e]!==c;
if(f&&typeof b[e]=="object")j.extendObject(a[e],b[e],d);
else if(d||!f)a[e]=b[e]}
}
,getElements:function(a,b){
var c=0,d=[],e=!!a.getElementsByClassName,f=e?a.getElementsByClassName(b):a.getElementsByTagName("*");
for(;
c<f.length;
c++)(e||j.hasClass(f[c],b))&&d.push(f[c]);
return d}
,getDataAttributes:function(a,b,c){
var d=0,e="",f={
}
,g=a.attributes;
for(;
d<g.length;
d++){
var h=g[d].name,j=g[d].value;
j.length&&h.indexOf("data-")===0&&(b&&(h=h.substring(5)),c?f[h]=j:e+=i(h)+"="+i(j)+"&")}
return c?f:e}
,copyDataAttributes:function(a,b,c,d){
var e=j.getDataAttributes(a,c,!0);
for(var f in e)b.setAttribute(d?f.replace(/-/g,"_"):f,e[f])}
,createIframe:function(a,c){
var d=b.createElement("iframe");
return d.style.cssText="overflow:hidden;
border:none;
",j.extendObject(d,{
src:a,allowtransparency:"true",frameborder:"0",scrolling:"no"}
,!0),c&&(d.onload=d.onreadystatechange=function(){
h.test(d.readyState||"")&&(d.onload=d.onreadystatechange=null,j.activateInstance(c))}
),d}
,networkReady:function(a){
return f[a]?f[a].loaded:c}
,appendNetwork:function(a){
if(!a||a.appended)return;
if(typeof a.append=="function"&&a.append(a)===!1){
a.appended=a.loaded=!0,j.activateAll(a);
return}
a.script&&(a.el=b.createElement("script"),j.extendObject(a.el,a.script,!0),a.el.async=!0,a.el.onload=a.el.onreadystatechange=function(){
if(h.test(a.el.readyState||"")){
a.el.onload=a.el.onreadystatechange=null,a.loaded=!0;
if(typeof a.onload=="function"&&a.onload(a)===!1)return;
j.activateAll(a)}
}
,b.body.appendChild(a.el)),a.appended=!0}
,removeNetwork:function(a){
return j.networkReady(a.name)?(a.el.parentNode.removeChild(a.el),!(a.appended=a.loaded=!1)):!1}
,reloadNetwork:function(a){
var b=f[a];
b&&j.removeNetwork(b)&&j.appendNetwork(b)}
,createInstance:function(a,b){
var f=!0,g={
el:a,uid:d++,widget:b}
;
return e.push(g),b.process!==c&&(f=typeof b.process=="function"?b.process(g):!1),f&&j.processInstance(g),g.el.setAttribute("data-socialite",g.uid),g.el.className="socialite "+b.name+" socialite-instance",g}
,processInstance:function(a){
var c=a.el;
a.el=b.createElement("div"),a.el.className=c.className,j.copyDataAttributes(c,a.el),c.nodeName.toLowerCase()==="a"&&!c.getAttribute("data-default-href")&&a.el.setAttribute("data-default-href",c.getAttribute("href"));
var d=c.parentNode;
d.insertBefore(a.el,c),d.removeChild(c)}
,activateInstance:function(a){
if(a&&!a.loaded)return a.loaded=!0,typeof a.widget.activate=="function"&&a.widget.activate(a),j.addClass(a.el,"socialite-loaded"),a.onload?a.onload(a.el):null}
,activateAll:function(a){
typeof a=="string"&&(a=f[a]);
for(var b=0;
b<e.length;
b++){
var c=e[b];
c.init&&c.widget.network===a&&j.activateInstance(c)}
}
,load:function(a,c,d,f,h){
a=a&&typeof a=="object"&&a.nodeType===1?a:b;
if(!c||typeof c!="object"){
j.load(a,j.getElements(a,"socialite"),d,f,h);
return}
var i;
if(/Array/.test(Object.prototype.toString.call(c))){
for(i=0;
i<c.length;
i++)j.load(a,c[i],d,f,h);
return}
if(c.nodeType!==1)return;
if(!d||!g[d]){
d=null;
var k=c.className.split(" ");
for(i=0;
i<k.length;
i++)if(g[k[i]]){
d=k[i];
break}
if(!d)return}
var l,m=g[d],n=parseInt(c.getAttribute("data-socialite"),10);
if(!isNaN(n)){
for(i=0;
i<e.length;
i++)if(e[i].uid===n){
l=e[i];
break}
}
else l=j.createInstance(c,m);
if(h||!l)return;
l.init||(l.init=!0,l.onload=typeof f=="function"?f:null,m.init(l)),m.network.appended?j.networkReady(m.network.name)&&j.activateInstance(l):j.appendNetwork(m.network)}
,activate:function(b,c,d){
a.Socialite.load(null,b,c,d)}
,process:function(b,c,d){
a.Socialite.load(b,c,d,null,!0)}
,network:function(a,b){
f[a]={
name:a,el:null,appended:!1,loaded:!1,widgets:{
}
}
,b&&j.extendObject(f[a],b)}
,widget:function(a,b,c){
c.name=a+"-"+b;
if(!f[a]||g[c.name])return;
c.network=f[a],f[a].widgets[b]=g[c.name]=c}
,setup:function(a){
j.extendObject(j.settings,a,!0)}
}
;
return j}
(window,window.document),function(a,b,c,d){
c.setup({
facebook:{
lang:"en_GB",appId:null}
,twitter:{
lang:"en"}
,googleplus:{
lang:"en-GB"}
}
),c.network("facebook",{
script:{
src:"//connect.facebook.net/{
{
language}
}
/all.js",id:"facebook-jssdk"}
,append:function(d){
var e=b.createElement("div"),f=c.settings.facebook,g={
onlike:"edge.create",onunlike:"edge.remove",onsend:"message.send"}
;
e.id="fb-root",b.body.appendChild(e),d.script.src=d.script.src.replace("{
{
language}
}
",f.lang),a.fbAsyncInit=function(){
a.FB.init({
appId:f.appId,xfbml:!0}
);
for(var b in g)typeof f[b]=="function"&&a.FB.Event.subscribe(g[b],f[b])}
}
}
),c.widget("facebook","like",{
init:function(d){
var e=b.createElement("div");
e.className="fb-like",c.copyDataAttributes(d.el,e),d.el.appendChild(e),a.FB&&a.FB.XFBML&&a.FB.XFBML.parse(d.el)}
}
),c.network("twitter",{
script:{
src:"//platform.twitter.com/widgets.js",id:"twitter-wjs",charset:"utf-8"}
,append:function(){
var b=typeof a.twttr!="object",d=c.settings.twitter,e=["click","tweet","retweet","favorite","follow"];
return b&&(a.twttr=t={
_e:[],ready:function(a){
t._e.push(a)}
}
),a.twttr.ready(function(a){
for(var b=0;
b<e.length;
b++){
var f=e[b];
typeof d["on"+f]=="function"&&a.events.bind(f,d["on"+f])}
c.activateAll("twitter")}
),b}
}
);
var e=function(a){
var d=b.createElement("a");
d.className=a.widget.name+"-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("data-lang",a.el.getAttribute("data-lang")||c.settings.twitter.lang),a.el.appendChild(d)}
,f=function(b){
a.twttr&&typeof a.twttr.widgets=="object"&&typeof a.twttr.widgets.load=="function"&&a.twttr.widgets.load()}
;
c.widget("twitter","share",{
init:e,activate:f}
),c.widget("twitter","follow",{
init:e,activate:f}
),c.widget("twitter","hashtag",{
init:e,activate:f}
),c.widget("twitter","mention",{
init:e,activate:f}
),c.widget("twitter","embed",{
process:function(a){
a.innerEl=a.el,a.innerEl.getAttribute("data-lang")||a.innerEl.setAttribute("data-lang",c.settings.twitter.lang),a.el=b.createElement("div"),a.el.className=a.innerEl.className,a.innerEl.className="",a.innerEl.parentNode.insertBefore(a.el,a.innerEl),a.el.appendChild(a.innerEl)}
,init:function(a){
a.innerEl.className="twitter-tweet"}
,activate:f}
),c.network("googleplus",{
script:{
src:"//apis.google.com/js/plusone.js"}
,append:function(b){
if(a.gapi)return!1;
a.___gcfg={
lang:c.settings.googleplus.lang,parsetags:"explicit"}
}
}
);
var g=function(a){
var d=b.createElement("div");
d.className="g-"+a.widget.gtype,c.copyDataAttributes(a.el,d),a.el.appendChild(d),a.gplusEl=d}
,h=function(a,b){
return typeof b!="function"?null:function(c){
b(a.el,c)}
}
,i=function(b){
var d=b.widget.gtype;
if(a.gapi&&a.gapi[d]){
var e=c.settings.googleplus,f=c.getDataAttributes(b.el,!0,!0),g=["onstartinteraction","onendinteraction","callback"];
for(var i=0;
i<g.length;
i++)f[g[i]]=h(b,e[g[i]]);
a.gapi[d].render(b.gplusEl,f)}
}
;
c.widget("googleplus","one",{
init:g,activate:i,gtype:"plusone"}
),c.widget("googleplus","share",{
init:g,activate:i,gtype:"plus"}
),c.widget("googleplus","badge",{
init:g,activate:i,gtype:"plus"}
),c.network("linkedin",{
script:{
src:"//platform.linkedin.com/in.js"}
}
);
var j=function(d){
var e=b.createElement("script");
e.type="IN/"+d.widget.intype,c.copyDataAttributes(d.el,e),d.el.appendChild(e),typeof a.IN=="object"&&typeof a.IN.parse=="function"&&(a.IN.parse(d.el),c.activateInstance(d))}
;
c.widget("linkedin","share",{
init:j,intype:"Share"}
),c.widget("linkedin","recommend",{
init:j,intype:"RecommendProduct"}
)}
(window,window.document,window.Socialite),function(){
var a=window._socialite;
if(/Array/.test(Object.prototype.toString.call(a)))for(var b=0,c=a.length;
b<c;
b++)typeof a[b]=="function"&&a[b]()}
();
CSS代码(main.css):
/*AUTHOR:Osvaldas Valutis,www.osvaldas.info*/
@import url( 'http://fonts.googleapis.com/css?family=Advent+Pro:500,700' );html{font-size:100%;}
body{font-family:'Noticia Text',serif;font-weight:400;-webkit-font-smoothing:antialiased;}
body,a,a:hover{color:#111;}
a{-webkit-transition:color .3s ease;-moz-transition:color .3s ease;-ms-transition:color .3s ease;-o-transition:color .3s ease;transition:color .3s ease;}
a,a:hover{text-decoration:none;}
/*AD*/
#ad{width:170px;background-color:#fff;background-color:rgba( 255,255,255,.5 );overflow:hidden;position:fixed;z-index:1000;top:10px;left:10px;padding:20px;}
#ad.dark{background-color:#111;background-color:rgba( 0,0,0,.5 );}
#bsap_aplink{width:100%;font-size:14px;font-family:'Advent Pro',sans-serif;font-weight:500;text-transform:uppercase;color:#999;color:rgba( 0,0,0,.25 );display:block;margin-bottom:10px;}
#bsap_aplink:hover{color:#111;}
#ad.dark #bsap_aplink{color:#555;color:rgba( 255,255,255,.25 );}
#ad.dark #bsap_aplink:hover{color:#fff;}
body .one .bsa_it_ad,body .one .bsa_it_ad *{background-color:transparent !important;position:static !important;z-index:1 !important;}
body .one .bsa_it_ad{font-family:'Noticia Text',serif;border:none;padding:0;margin:0;}
body .one .bsa_it_ad .bsa_it_i,body .one .bsa_it_ad .bsa_it_t,body .one .bsa_it_ad .bsa_it_d{width:100%;display:block;padding:0;margin:0;}
body .one .bsa_it_ad .bsa_it_t,body .one .bsa_it_ad .bsa_it_d{font-size:14px;line-height:1.75;color:#555;color:rgba( 0,0,0,.75 );}
body .one .bsa_it_ad .bsa_it_i{margin-bottom:10px;}
body .one .bsa_it_ad .bsa_it_t{font-weight:700;}
#ad.dark .bsa_it_ad .bsa_it_t,#ad.dark .bsa_it_ad .bsa_it_d{color:#bbb;color:rgba( 255,255,255,.75 );}
body .one .bsa_it_p{display:none;}
#ad-close{width:10px;height:10px;text-align:left;text-indent:-9999px;position:absolute;top:5px;right:5px;}
#ad-close:before,#ad-close:after{width:2px;background-color:#666;content:'';position:absolute;top:0;bottom:0;left:50%;margin-left:-1px;}
#ad.dark #ad-close:before,#ad.dark #ad-close:after{background-color:#999;}
#ad-close:hover:before,#ad-close:hover:after{background-color:#111;}
#ad.dark #ad-close:hover:before,#ad.dark #ad-close:hover:after{background-color:#fff;}
#ad-close:before{-webkit-transform:rotate( 45deg );-moz-transform:rotate( 45deg );-ms-transform:rotate( 45deg );-o-transform:rotate( 45deg );transform:rotate( 45deg );}
#ad-close:after{-webkit-transform:rotate( -45deg );-moz-transform:rotate( -45deg );-ms-transform:rotate( -45deg );-o-transform:rotate( -45deg );transform:rotate( -45deg );}
/*META*/
#meta{width:100%;height:40px;line-height:1;background-color:#fff;background-color:rgba( 255,255,255,.5 );overflow:hidden;position:fixed;z-index:1001;bottom:0;left:0;padding:10px 20px 0;}
#meta.dark{background-color:#111;background-color:rgba( 0,0,0,.5 );}
#meta li{float:right;}
#meta li:first-child{float:left;}
#meta li:last-child{margin-right:15px;-webkit-transition:opacity .3s ease;-moz-transition:opacity .3s ease;-ms-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;}
#meta:not(:hover) li:last-child{opacity:0;}
#back-to-article{font-family:'Advent Pro',sans-serif;font-weight:500;text-transform:uppercase;text-decoration:none;color:#111;float:left;position:relative;bottom:-2px;}
#back-to-article:before{width:0;height:0;display:inline-block;border:5px solid transparent;border-left:none;border-right-color:#111;border-right-color:rgba( 0,0,0,.5 );content:'';margin-right:5px;}
#back-to-article:hover:before{border-right-color:#111;}
#meta.dark #back-to-article{color:#fff;}
#meta.dark #back-to-article:before{border-right-color:#fff;border-right-color:rgba( 255,255,255,.5 );}
#meta.dark #back-to-article:hover:before{border-right-color:#fff;}
/*RESPONSIVENESS*/
@media screen and (max-width:640px),screen and (max-height:640px){#ad,#meta{display:none;}
}
CSS代码(reset.css):
/*AUTHOR:Osvaldas Valutis,www.osvaldas.info*/
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;*behavior:url( '/theme/js/boxsizing.htc' );-webkit-tap-highlight-color:rgba( 0,0,0,0 );-webkit-overflow-scrolling:touch;}
html,body,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,sup,sub,tt,var,b,u,i,center,ul,ol,li,dl,dt,dd,table,tr,th,td,thead,tbody,tfoot,caption,form,fieldset,legend,input,button,textarea,select,label,applet,object,iframe,audio,video,canvas,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{font-size:100%;font-family:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;vertical-align:baseline;border:0;outline:0;padding:0;margin:0;}
html{font-size:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-o-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:Helvetica,Arial,sans-serif;line-height:1;color:#000;background-color:#fff;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
canvas{-ms-touch-action:double-tap-zoom;}
[hidden]{display:none;}
a{text-decoration:underline;color:#000;}
a:hover{text-decoration:none;}
small{font-size:75%;}
big{font-size:125%;}
em{font-style:italic;}
strong{font-weight:bold;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
sup,sub{font-size:75%;line-height:0;}
sup{vertical-align:super;}
sub{vertical-align:sub;}
pre{display:block;overflow:auto;}
code{font-family:'Courier New',Courier,monospace;}
ul,ol{list-style:none;}
table{table-layout:auto;border-collapse:separate;border-spacing:0;empty-cells:hide;}
img{vertical-align:middle;-ms-interpolation-mode:bicubic;}
svg:not(:root){overflow:hidden;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
input,textarea{-webkit-appearance:none;}
button,input,select,textarea{vertical-align:baseline;*vertical-align:middle;-webkit-border-radius:0;}
button,input{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;}
textarea{overflow:auto;vertical-align:top;}
input[type='search']::-webkit-search-decoration,input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-results-button,input[type='search']::-webkit-search-results-decoration,input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{display:none;}
input[type='password']::-ms-reveal{display:none;}
input::-ms-clear{display:none;}
textarea,input[type='text'],input[type='password'],input[type='email'],input[type='number'],input[type='search']{-webkit-appearance:none;}
input[type='radio']{-webkit-appearance:radio;}
input[type='checkbox']{-webkit-appearance:checkbox;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
* html .clearfix{zoom:1;}
*:first-child+html .clearfix{zoom:1;}
.cleaner{height:0;line-height:0;clear:both;}
分享到QQ
分享到微博
微信扫一扫
