").html(e.replace(b,"")).find(i):e),l&&l.apply(a,arguments)},t.ajax(s),this};var N=encodeURIComponent;t.param=function(e,n){var r=[];return r.add=function(e,n){t.isFunction(n)&&(n=n()),null==n&&(n=""),this.push(N(e)+"="+N(n))},h(r,e,n),r.join("&").replace(/%20/g,"+")}}(Zepto),window.CoreLib=window.jQuery||window.Zepto,!function(t){"use strict";t.callEvent=function(e,n,r,i,a){var o,s=t.Event(e);return i&&(t(i).trigger(s,a),o=s.result),t.isFunction(n)&&(o=n.apply(r,t.isArray(a)?a:[a])),o},t.fn.callEvent=function(e,n,r){return t.callEvent(n,e.options?e.options[n]:null,e,this,r)},t.bindFn=function(e,n,r){var i=t.fn[e],a=n.NAME||"mzui."+e;t.fn[e]=function(e,i){return this.each(function(){var o=t(this),s=o.data(a),l="object"==typeof e&&e;r&&(l=t.extend(l,r)),s||o.data(a,s=new n(o,l)),"string"==typeof e&&s[e].apply(s,t.isArray(i)?i:[i])})},t.fn[e].Constructor=n,t.fn[e].noConflict=function(){return t.fn[e]=i,this}},t.formatDate=function(t,e){t instanceof Date||(t=new Date(t));var n={"M+":t.getMonth()+1,"d+":t.getDate(),"h+":t.getHours(),"m+":t.getMinutes(),"s+":t.getSeconds(),"S+":t.getMilliseconds()};/(y+)/i.test(e)&&(e=e.replace(RegExp.$1,(t.getFullYear()+"").substr(4-RegExp.$1.length)));for(var r in n)new RegExp("("+r+")").test(e)&&(e=e.replace(RegExp.$1,1==RegExp.$1.length?n[r]:("00"+n[r]).substr((""+n[r]).length)));return e},t.format=function(e,n){if(e instanceof Date)return t.formatDate(e,n);if(arguments.length>1){var r;if(2==arguments.length&&"object"==typeof n)for(var i in n)void 0!==n[i]&&(r=new RegExp("({"+i+"})","g"),e=e.replace(r,n[i]));else for(var a=1;a
',{id:i});var c=t("#"+a);c.length||(c=t('
',{id:a}).appendTo(u)),e.layer=e.container=c.append(r)}else"!self"===r&&(r=e.element||n.$);return r=t(r).addClass(o).attr("data-"+o+"-name",e.name),r.parent().length||r.appendTo(e.container),r.data(s)||r.data(s,r.attr("class")),r},h.prototype.update=function(e,n,i,a){var s=this,l=function(r){var i=n.template;t.isFunction(i)?r=i(r,n):t.isStr(i)&&(r=t.format(i,r)),r!==!1&&(t.is$(r)?e.empty().append(r):e["text"===n.contentType?"text":"html"](r))},f=t.calValue(n.remote,s,n);if(f){var p=t.uuid++,d=n.loadingClass;e.removeClass(n.showInClass).addClass(d),t(u).addClass("has-"+o+"-"+c),n.$backdrop&&n.$backdrop.addClass(d);var h=t.isStr(f)?{url:f}:f;s.xhr&&s.xhr.abort(),s.remoteCall=p,s.xhr=t.ajax(t.extend({dataType:n.remoteType||"html",error:n.remoteError},h,{success:function(t,e,n){l(t),h.success&&h.success(t,e,n)},complete:function(i,l){s.xhr=0,s.remoteCall===p&&(s.lastRemote!==f&&(t(n.container).scrollTop(0),
7 | s.lastRemote=f),e.removeClass(d).addClass(n.showInClass),t(u).removeClass("has-"+o+"-"+c),n.$backdrop&&n.$backdrop.removeClass(d),t.callEvent("loaded",n.loaded,s,s.$,n),t(r).triggerHandler(o+".loaded",[s,s.$,n]),h.complete&&h.complete(i,l),a&&a())}}))}else{var g=t.calValue(n.content,s,n),m=n.source;m&&(m=t(t.calValue(m,s,n)),m=m.parent().length?m.clone():m,g=g?m.html(g):m),l(g),a&&a()}i&&i(f)},h.prototype._getOptions=function(e){var n=this,r=t.extend({},n.options,e),i=r.display;return i&&h.plugs[i]&&(r=t.calValue(h.plugs[i],n,r)),r.$target||(r.$target=n._getTarget(r)),r},h.prototype.show=function(e,n){t.isFunction(e)&&(n=e,e=null);var c=this,p=c._getOptions(e);c.last=p;var g=p.$target,m=p.activeClass,v=p.animate,y=p.element,b=p.placement,w=p.layer,x="",C="",S=p.name,T=p.arrow,E=p.backdrop,N=t(y);if(g.attr("class","invisible "+g.data(s)+" "+(p.targetClass||"")).removeClass(l),t.callEvent("show",p.show,c,c.$,p)===!1)return g.attr("class",s),p.layer&&p.layer.remove(),n&&n();if(p.showSingle&&(p.showSingle===!0?g.parent().children():t(p.showSingle)).not(g).removeClass(p.showInClass).addClass(l),w&&w.removeClass(l),E){var k="backdrop-"+S;t("#"+k).remove();var $=p.$backdrop=t('
',{id:k,type:p.display,"data-display-name":S}).appendTo(u).css("zIndex",i++);E===!0&&(E="fade"),t.isStr(E)&&$.addClass(E),t(u).addClass("display-show-"+p.name),setTimeout(function(){$.addClass("in")},10),p.backdropDismiss&&$.attr("data-dismiss",o)}"none"!==p.targetZIndex&&(w||g).css("zIndex",p.targetZIndex||i++),m&&y&&(p.activeSingle&&N.parent().children().removeClass(m),N.addClass(m)),c.update(g,p,function(e){if(p.scrollTop&&t(p.container).scrollTop(0),b=t.calValue(b,c,p)){t.isStr(b)&&"{"==b[0]&&(b=t.parseJSON(b));var i=t("body");if(t.isPlainObject(b))g.css(b);else if("overlay"===b){var s=N.offset();g.css({position:"absolute",left:s.left-(p.layer?i.scrollLeft():0),top:s.top-(p.layer?i.scrollTop():0),width:N.width(),height:N.height()})}else if(0===b.indexOf("beside")){g.css({position:"absolute"}),b=b.split("-");var l,u,h=b[1]||"auto",m=b[2]||"center",s=N.offset(),y=s.top-(p.layer?i.scrollTop():0),S=s.left-(p.layer?i.scrollLeft():0),E=N.width(),k=N.height(),$=g.width(),j=g.height(),D=t(r).width(),L=t(r).height(),A="start"===m,P="end"===m;"auto"===h&&(h=L>=y+k+j?"bottom":y>=j?"top":D>=S+E+$?"right":S>=$?"left":"bottom");var O=A?S:P?S+E:S+E/2-$/2,M=A?y:P?y+k:y+k/2-j/2;"bottom"===h?(u=y+k,l=O):"top"===h?(u=y-j,l=O):"right"===h?(u=M,l=S+E):(u=M,l=S-$),g.css({top:Math.max(0,Math.min(u,L-j)),left:Math.max(0,Math.min(l,D-$))}),C=d[h],x="fade scale-from-"+C}else{b=b.split("-");var _=b[0],R=b[1],I={};"top"!=_&&"bottom"!=_&&"left"!=_&&"right"!=_||(I.justifyContent="flex-"+("top"===_||"left"==_?"start":"end"),I.flexDirection="top"==_||"bottom"==_?"column":"row",I.alignItems=R?"center"==R?"center":"left"==R?"flex-start":"flex-end":"stretch"),w&&w.css(I),x=_,C=d[x],x="from-"+x}}if(T){var F="display-arrow arrow-"+C;t.isStr(T)&&(F+=" "+T),g.addClass(F)}var z=function(){g.removeClass("invisible"),e||g.addClass(p.showInClass),n&&n();var i=p.autoHide;i&&(c.animateCall=setTimeout(function(){c.hide()},t.isNum(i)?i:5e3)),c.animateCall=setTimeout(function(){t.callEvent("shown",p.shown,c,c.$,p),t(r).triggerHandler(o+".shown",[c,c.$,p])},p.duration+50),p.targetDismiss&&g.one((p.targetDismiss===!0?a:p.targetDismiss)+f,function(){c.hide()})};v?(v===!0?g.addClass(x?"enter-"+x:"fade"):t.isStr(v)?g.addClass(v.replace("suggest",x)):t.isNum(v)&&(p.duration=v),clearTimeout(c.animateCall),c.animateCall=setTimeout(z,10)):z()},function(){t.callEvent("displayed",p.displayed,c,c.$,p),t(r).triggerHandler(o+".displayed",[c,c.$,p]),p.plugSkin&&g.find("[data-skin]").skin(),p.plugDisplay&&g.find("[data-"+o+"]").display(),t.fn.listenScroll&&g.find(".listen-scroll").listenScroll()}),h.last=S,h.all[S]=c},h.prototype.hide=function(e,n){t.isFunction(e)&&(n=e,e=null);var i=this,a=i.last||i._getOptions(e);if(t.callEvent("hide",a.hide,i,i.$,a)===!1)return n&&n();i.last=!1;var s=a.$target.off(f),c=t("#backdrop-"+a.name),p=function(){a.layer&&a.layer.addClass(l),t.callEvent(l,a[l],i,i.$,a),t(r).triggerHandler(o+"."+l,[i,i.$,a]),s.addClass(l),c.remove(),t(u).removeClass(o+"-show-"+a.name),a.layer&&a.layer.remove()};a.activeClass&&a.element&&t(a.element).removeClass(a.activeClass),s.removeClass(a.showInClass),c.removeClass("in"),a.animate?(clearTimeout(i.animateCall),i.animateCall=setTimeout(p,a.duration+50)):p()},h.prototype.isShow=function(e){return e=this._getOptions(e),e.checkShow?t.calValue(e.checkShow,this,e):e.$target?e.$target.hasClass(e.showInClass):e.last},h.prototype.toggle=function(e,n){var r;e===!0||e===!1?(r=e,e=t.isPlainObject(n)?n:null,e&&(n=null)):r=this.isShow(e),this[r?"hide":"show"](e,n)},h.NAME=p,h.DEFAULT={trigger:a,triggerMethod:"show",container:u,plugSkin:!0,plugDisplay:!0,content:!1,loadingClass:c,showInClass:"in",animate:!0,duration:300,keyboard:!0,backdropDismiss:!0,activeSingle:!0},h.plugs=function(e,n,r){if(t.isPlainObject(e))t.each(e,h.plugs);else{if(!n)return h.plugs[e];h.plugs[e]=n,e=0===e.indexOf("_")?e.substr(1):e,t.fn[e]||r===!1||t.bindFn(r||e,h,{display:e})}},h.all={},h.dismiss=function(e,n){t.isFunction(e)&&(n=e,e=""),e=e||h.last;var r=h.all[e];r&&r.hide(n)},t.bindFn(o,h),t.Display=h,t(function(){t("[data-"+o+"]").display(),t(r).on(a,'[data-dismiss="'+o+'"]',function(){var e=t(this),n="data-"+o+"-name";name=e.attr(n),name&&"null"!=name||(name=e.closest("."+o).attr(n)),h.dismiss(name)})})}(CoreLib,void 0,window,document),!function(t,e){"use strict";if(!t.Display)return void console.error("display.plugs.js requires display.js");var n=function(e,n,r,i,a){var o=t(n).next("."+e);return o.length||(o=r),o||'
'},r=function(t,n){return t===e?n:t};t.Display.plugs({dropdown:function(e){var i=e.source;return t.extend(e,{backdrop:r(e.backdrop,"clean"),source:e.target?null:function(){return n("dropdown-menu",e.element,i)},target:r(e.target,"!new"),placement:r(e.placement,"beside"),activeClass:r(e.activeClass,"open"),targetDismiss:r(e.targetDismiss,!0)})},popover:function(e){var i=e.source;return t.extend(e,{arrow:r(e.arrow,!0),backdrop:r(e.backdrop,"clean"),source:e.target?null:function(){return n("popover",e.element,i,"canvas with-padding")},target:r(e.target,"!new"),placement:r(e.placement,"beside"),activeClass:r(e.activeClass,"open")})},messager:function(n){return t.extend(n,{autoHide:r(n.autoHide,!0),animate:n.animate===e||n.animate===!0?"scale-suggest fade":n.animate,closeButton:r(n.closeButton,!0),template:function(e,n){var r=t(n.source||'
');return n.icon&&r.append('
'),r.append('
'+e+"
"),n.closeButton&&r.append('
'),r.addClass(n.type||"gray")},target:"!new",placement:r(n.placement,"bottom-center"),activeClass:r(n.activeClass,"open")})},modal:function(e){var i=e.source;return t.extend(e,{backdrop:r(e.backdrop,"modal-backdrop fade"),source:e.target?null:function(){return n("modal",e.element,i,"","content")},target:r(e.target,"!new"),targetClass:"modal "+(e.targetClass||""),placement:r(e.placement,"tap"===t.TapName?"bottom":"center"),activeClass:r(e.activeClass,"open")})},_collapse:function(e){return t.extend(e,{triggerMethod:"toggle",animate:!1,showInClass:"in",activeClass:"collapse-open",showSingle:r(e.group||e.showSingle,e.selector?"collapse-group-"+ ++t.uuid:!1)})}}),t.Display.plugs("_self",function(e){return t.extend(e,{trigger:!1,target:"!self",targetZIndex:"none",displayAuto:r(e.displayAuto,!0)})},"displaySelf");var i=new t.Display({display:"messager"});i._show=i.show,i.show=function(e,n){i._show(t.extend({content:e},n))},t.each({primary:0,success:"ok-sign",info:"info-sign",warning:"warning-sign",danger:"exclamation-sign",important:0,special:0},function(e,n){i[e]=function(r,a){i._show(t.extend({content:r,icon:n||null,type:e},a))}}),t.messager=i}(CoreLib,void 0),!function(t){"use strict";var e="mzui.scrollListener",n=function(r,i){var a=this;a.options=i=t.extend({},n.DEFAULT,r.data(),i),a.$=r,a.$container=i.container?"parent"==i.container?a.$.parent():t(i.container):a.$,a.lastScrollTop=0,a.lastCallTime=0;var o=0;if(r.on("scroll."+e,function(){clearTimeout(o);var t=(new Date).getTime();o=setTimeout(function(){a.onScroll(),a.lastCallTime=t},t-a.lastCallTime>i.handleInterval?0:i.handleInterval)}),i.canScrollClass){var s=(a.$[0]===window?t("body"):a.$)[0].scrollHeight;a.$container.toggleClass(i.canScrollClass,s>a.$.height())}};n.prototype.onScroll=function(){var t=this,e=t.options,n=t.$.scrollTop(),r=n>0,i=n>t.lastScrollTop?"down":"up";t.$container.toggleClass(e.inScrollClass,r).toggleClass(e.directionClass+"-down","down"===i).toggleClass(e.directionClass+"-up","up"===i).toggleClass(e.directionClass+"-over",n+t.$.height()>=t.$[0].scrollHeight),t.$container.callEvent(t,"listenScroll",[r,i,n]),t.isInScroll=r,t.scrollDirection=i,t.lastScrollTop=n},n.NAME=e,n.DEFAULT={minDelta:20,handleInterval:100,inScrollClass:"in-scroll",directionClass:"scroll",canScrollClass:"can-scroll"},t.bindFn("listenScroll",n),t(function(){t(window).listenScroll({container:"body"}),t(".listen-scroll").listenScroll()})}(CoreLib),!function(t,e,n){"use strict";function r(t){if(t=t.toLowerCase(),t&&c.test(t)){var e;if(4===t.length){var n="#";for(e=1;4>e;e+=1)n+=t.slice(e,e+1).concat(t.slice(e,e+1));t=n}var r=[];for(e=1;7>e;e+=2)r.push(v("0x"+t.slice(e,e+2)));return{r:r[0],g:r[1],b:r[2],a:1}}throw new Error("Wrong hex string! (hex: "+t+")")}function i(e){return typeof e===d&&("transparent"===e.toLowerCase()||c.test(t.trim(e.toLowerCase())))}function a(t){function e(t){return t=0>t?t+1:t>1?t-1:t,1>6*t?s+(o-s)*t*6:1>2*t?o:2>3*t?s+(o-s)*(2/3-t)*6:s}var n=t.h,r=t.s,i=t.l,a=t.a;n=l(n)%f/f,r=y(r),i=y(i),a=y(a);var o=.5>=i?i*(r+1):i+r-i*r,s=2*i-o,c={r:e(n+1/3)*u,g:e(n)*u,b:e(n-1/3)*u,a:a};return c}function o(t,n,r){return g(r)&&(r=0),g(n)&&(n=u),e.min(e.max(t,r),n)}function s(t,e){return o(t,e)}function l(t){return"number"==typeof t?t:parseFloat(t)}var c=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/,u=255,f=360,p=100,d="string",h="object",g=function(t){return t===n},m=function(t){return!g(t)},v=function(t){return parseInt(t)},y=function(t,e){return s(l(t),e)},b=function(t){return v(y(t,u))},w=function(t,e,n,i){var o=this;if(o.r=o.g=o.b=0,o.a=1,m(i)&&(o.a=y(i,1)),m(t)&&m(e)&&m(n))o.r=b(t),o.g=b(e),o.b=b(n);else if(m(t)){var s=typeof t;if(s==d)t=t.toLowerCase(),"transparent"===t?o.a=0:o.rgb(r(t));else if("number"==s&&g(e))o.r=o.g=o.b=b(t);else if(s==h&&m(t.r))o.r=b(t.r),m(t.g)&&(o.g=b(t.g)),m(t.b)&&(o.b=b(t.b)),m(t.a)&&(o.a=y(t.a,1));else if(s==h&&m(t.h)){var l={h:y(t.h,f),s:1,l:1,a:1};m(t.s)&&(l.s=y(t.s,1)),m(t.l)&&(l.l=y(t.l,1)),m(t.a)&&(l.a=y(t.a,1)),o.rgb(a(l))}}};w.prototype.rgb=function(t){var e=this;if(m(t)){if(typeof t==h)m(t.r)&&(e.r=b(t.r)),m(t.g)&&(e.g=b(t.g)),m(t.b)&&(e.b=b(t.b)),m(t.a)&&(e.a=y(t.a,1));else{var n=v(l(t));e.r=n,e.g=n,e.b=n}return e}return{r:e.r,g:e.g,b:e.b,a:e.a}},w.prototype.hue=function(t){var e=this,n=e.toHsl();return g(t)?n.h:(n.h=y(t,f),e.rgb(a(n)),e)},w.prototype.darken=function(t){var e=this,n=e.toHsl();return n.l-=t/p,n.l=s(n.l,1),e.rgb(a(n)),e},w.prototype.clone=function(){var t=this;return new w(t.r,t.g,t.b,t.a)},w.prototype.lighten=function(t){return this.darken(-t)},w.prototype.fade=function(t){return this.a=s(t/p,1),this},w.prototype.toHsl=function(){var t,n,r=this,i=r.r/u,a=r.g/u,o=r.b/u,s=r.a,l=e.max(i,a,o),c=e.min(i,a,o),p=(l+c)/2,d=l-c;if(l===c)t=n=0;else{switch(n=p>.5?d/(2-l-c):d/(l+c),l){case i:t=(a-o)/d+(o>a?6:0);break;case a:t=(o-i)/d+2;break;case o:t=(i-a)/d+4}t/=6}return{h:t*f,s:n,l:p,a:s}},w.prototype.luma=function(){var t=this.r/u,n=this.g/u,r=this.b/u;return t=.03928>=t?t/12.92:e.pow((t+.055)/1.055,2.4),n=.03928>=n?n/12.92:e.pow((n+.055)/1.055,2.4),r=.03928>=r?r/12.92:e.pow((r+.055)/1.055,2.4),.2126*t+.7152*n+.0722*r},w.prototype.saturate=function(t){var e=this.toHsl();return e.s+=t/p,e.s=s(e.s),this.rgb(a(e))},w.prototype.contrast=function(t,e,n){if(e=g(e)?new w(u,u,u,1):new w(e),t=g(t)?new w(0,0,0,1):new w(t),this.a<.5)return t;if(n=g(n)?.43:l(n),t.luma()>e.luma()){var r=e;e=t,t=r}return this.luma()
0?t.a<1?"rgba("+t.r+","+t.g+","+t.b+","+t.a+")":t.hexStr():"transparent"},w.isColor=i,t.Color=w}(CoreLib,Math,void 0),function(t,e){"use strict";var n="mzui.skin",r={},i=function(e,n){var r=this;r.options=n=t.extend({},i.DEFAULT,e.data(),n),r.$=e,r.paint()};i.prototype.paint=function(n){var i,a,o=this,s=o.options,l=o.$,c=o.$.hasClass("pale")||s.pale,u=s.outline||l.hasClass("outline"),f=s.tint||l.hasClass("text-tint");if(n=n===e?s.skin:n,c===e&&(o.$.hasClass("dark")||s.dark)&&(c=!1),t.isStr(n)&&n.indexOf(":")>0){n=n.split(":"),a=n[0],n=n[1];var p=parseInt(n);NaN!==p&&(n=p)}if(""===n||n===e||"random"===n)n=Math.round(360*Math.random());else if(r[n])n=r[n];else if(t.isStr(n)&&0===n.indexOf("random"))r[n]=n=Math.round(360*Math.random());else if(t.isStr(n)&&0===n.indexOf("@")){for(var d=0,h=n.length-1;h>0;--h)d+=Math.pow(3,h-1)*n.charCodeAt(h);n=d}a&&(r[a]=n),i="number"==typeof n?new t.Color({h:n*s.hueSpace%360,s:s.saturation,l:s.lightness}):new t.Color(n),o.color=i,i.luma()=0;--c)s.push(a[c]);a=s}t.isArray(a)?o===n?o=a:t.isArray(o)?o.push.apply(o,a):(a.push(o),o=a):i.lastIndexOf("]")===i.length-1?o===n?o=[a]:o.push(a):o=a,l[i]=o}),o("onSubmit",l);var c=new FormData;for(var u in l){var f=l[u];if(t.isArray(f))for(var p=f.length-1;p>=0;--p)c.append(u,f[p]);else c.append(u,f)}var d=i.find('[type="submit"]').attr("disabled","disabled").addClass("disabled loading");t.ajax({url:a.action,type:a.method,processData:!1,contentType:!1,dataType:i.data("type")||"json",data:c,success:function(e,n){try{if("string"==typeof e&&(e=t.parseJSON(e)),o("onSuccess",e),"success"===e.result)e.message?(t.messager.success(e.message),e.locate&&setTimeout(function(){location.href=e.locate},1200)):e.locate&&(location.href=e.locate);else{var r=e.message||e.reason||e.error;r&&(t.isPlainObject(r)?t.each(r,function(e,n){t.isArray(n)&&n.length&&(n=n.length>1?"":n[0]);var r=i.find("#"+e+', [name="'+e+'"]').closest(".control");if(r.length){var a=r.find(".help-text");a.length?a.html(n):r.append(''+n+"
"),r.addClass("has-error")}else s(n)}):s(r))}}catch(a){s(e||"No response.")}o("onResult",e)},error:function(n,r,i){s("error: "+i),o("onError",{xhr:n,errorType:r,error:i}),e.v&&e.v.lang.timeout&&t.messager.danger(e.v.lang.timeout)},complete:function(t,e){d.attr("disabled",null).removeClass("disabled loading"),o("onComplete",{xhr:t,status:e})}})}).on("change",function(e){i.find(".form-message").hide(),t(e.target).closest(".control").removeClass("has-error")})}};t.ajaxForm=i,t.fn.ajaxform=function(e){return t(this).each(function(){var n=t(this);i(n,t.extend(n.data(),e))})},t(function(){t(".ajaxform").ajaxform()})}(CoreLib,window,void 0),/*! Apache License 2.0 https://github.com/google/code-prettify*/
8 | !function(){var t=null;window.PR_SHOULD_USE_CONTINUATION=!0,function(){function e(t){function e(t){var e=t.charCodeAt(0);if(92!==e)return e;var n=t.charAt(1);return(e=f[n])?e:n>="0"&&"7">=n?parseInt(t.substring(1),8):"u"===n||"x"===n?parseInt(t.substring(2),16):t.charCodeAt(1)}function n(t){return 32>t?(16>t?"\\x0":"\\x")+t.toString(16):(t=String.fromCharCode(t),"\\"===t||"-"===t||"]"===t||"^"===t?"\\"+t:t)}function r(t){var r=t.substring(1,t.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),t=[],i="^"===r[0],a=["["];i&&a.push("^");for(var i=i?1:0,o=r.length;o>i;++i){var s=r[i];if(/\\[bdsw]/i.test(s))a.push(s);else{var l,s=e(s);o>i+2&&"-"===r[i+1]?(l=e(r[i+2]),i+=2):l=s,t.push([s,l]),65>l||s>122||(65>l||s>90||t.push([32|Math.max(65,s),32|Math.min(l,90)]),97>l||s>122||t.push([-33&Math.max(97,s),-33&Math.min(l,122)]))}}for(t.sort(function(t,e){return t[0]-e[0]||e[1]-t[1]}),r=[],o=[],i=0;is[0]&&(s[1]+1>s[0]&&a.push("-"),a.push(n(s[1])));return a.push("]"),a.join("")}function i(t){for(var e=t.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),i=e.length,s=[],l=0,c=0;i>l;++l){var u=e[l];"("===u?++c:"\\"===u.charAt(0)&&(u=+u.substring(1))&&(c>=u?s[u]=-1:e[l]=n(u))}for(l=1;ll;++l)u=e[l],"("===u?(++c,s[c]||(e[l]="(?:")):"\\"===u.charAt(0)&&(u=+u.substring(1))&&c>=u&&(e[l]="\\"+s[u]);for(l=0;i>l;++l)"^"===e[l]&&"^"!==e[l+1]&&(e[l]="");if(t.ignoreCase&&o)for(l=0;i>l;++l)u=e[l],t=u.charAt(0),u.length>=2&&"["===t?e[l]=r(u):"\\"!==t&&(e[l]=u.replace(/[A-Za-z]/g,function(t){return t=t.charCodeAt(0),"["+String.fromCharCode(-33&t,32|t)+"]"}));return e.join("")}for(var a=0,o=!1,s=!1,l=0,c=t.length;c>l;++l){var u=t[l];if(u.ignoreCase)s=!0;else if(/[a-z]/i.test(u.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){o=!0,s=!1;break}}for(var f={b:8,t:9,n:10,v:11,f:12,r:13},p=[],l=0,c=t.length;c>l;++l){if(u=t[l],u.global||u.multiline)throw Error(""+u);p.push("(?:"+i(u)+")")}return RegExp(p.join("|"),s?"gi":"g")}function n(t,e){function n(t){var l=t.nodeType;if(1==l){if(!r.test(t.className)){for(l=t.firstChild;l;l=l.nextSibling)n(l);l=t.nodeName.toLowerCase(),"br"!==l&&"li"!==l||(i[s]="\n",o[s<<1]=a++,o[s++<<1|1]=t)}}else 3!=l&&4!=l||(l=t.nodeValue,l.length&&(l=e?l.replace(/\r\n?/g,"\n"):l.replace(/[\t\n\r ]+/g," "),i[s]=l,o[s<<1]=a,a+=l.length,o[s++<<1|1]=t))}var r=/(?:^|\s)nocode(?:\s|$)/,i=[],a=0,o=[],s=0;return n(t),{a:i.join("").replace(/\n$/,""),d:o}}function r(t,e,n,r){e&&(t={a:e,e:t},n(t),r.push.apply(r,t.g))}function i(t){for(var e=void 0,n=t.firstChild;n;n=n.nextSibling)var r=n.nodeType,e=1===r?e?t:n:3===r&&x.test(n.nodeValue)?t:e;return e===t?void 0:e}function a(n,i){function a(t){for(var e=t.e,n=[e,"pln"],u=0,f=t.a.match(o)||[],p={},d=0,h=f.length;h>d;++d){var g,m=f[d],v=p[m],y=void 0;if("string"==typeof v)g=!1;else{var b=s[m.charAt(0)];if(b)y=m.match(b[1]),v=b[0];else{for(g=0;l>g;++g)if(b=i[g],y=m.match(b[1])){v=b[0];break}y||(v="pln")}!(g=v.length>=5&&"lang-"===v.substring(0,5))||y&&"string"==typeof y[1]||(g=!1,v="src"),g||(p[m]=v)}if(b=u,u+=m.length,g){g=y[1];var w=m.indexOf(g),x=w+g.length;y[2]&&(x=m.length-y[2].length,w=x-g.length),v=v.substring(5),r(e+b,m.substring(0,w),a,n),r(e+b+w,g,c(v,g),n),r(e+b+x,m.substring(x),a,n)}else n.push(e+b,v)}t.g=n}var o,s={};!function(){for(var r=n.concat(i),a=[],l={},c=0,u=r.length;u>c;++c){var f=r[c],p=f[3];if(p)for(var d=p.length;--d>=0;)s[p.charAt(d)]=f;f=f[1],p=""+f,l.hasOwnProperty(p)||(a.push(f),l[p]=t)}a.push(/[\S\s]/),o=e(a)}();var l=i.length;return a}function o(e){var n=[],r=[];e.tripleQuotedStrings?n.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,t,"'\""]):e.multiLineStrings?n.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,t,"'\"`"]):n.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,t,"\"'"]),e.verbatimStrings&&r.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,t]);var i=e.hashComments;if(i&&(e.cStyleComments?(i>1?n.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,t,"#"]):n.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\n\r]*)/,t,"#"]),r.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,t])):n.push(["com",/^#[^\n\r]*/,t,"#"])),e.cStyleComments&&(r.push(["com",/^\/\/[^\n\r]*/,t]),r.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,t])),i=e.regexLiterals){var o=(i=i>1?"":"\n\r")?".":"[\\S\\s]";r.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+("/(?=[^/*"+i+"])(?:[^/\\x5B\\x5C"+i+"]|\\x5C"+o+"|\\x5B(?:[^\\x5C\\x5D"+i+"]|\\x5C"+o+")*(?:\\x5D|$))+/")+")")])}return(i=e.types)&&r.push(["typ",i]),i=(""+e.keywords).replace(/^ | $/g,""),i.length&&r.push(["kwd",RegExp("^(?:"+i.replace(/[\s,]+/g,"|")+")\\b"),t]),n.push(["pln",/^\s+/,t," \r\n "]),i="^.[^\\s\\w.$@'\"`/\\\\]*",e.regexLiterals&&(i+="(?!s*/)"),r.push(["lit",/^@[$_a-z][\w$@]*/i,t],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,t],["pln",/^[$_a-z][\w$@]*/i,t],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,t,"0123456789"],["pln",/^\\[\S\s]?/,t],["pun",RegExp(i),t]),a(n,r)}function s(t,e,n){function r(t){var e=t.nodeType;if(1!=e||a.test(t.className)){if((3==e||4==e)&&n){var l=t.nodeValue,c=l.match(o);c&&(e=l.substring(0,c.index),t.nodeValue=e,(l=l.substring(c.index+c[0].length))&&t.parentNode.insertBefore(s.createTextNode(l),t.nextSibling),i(t),e||t.parentNode.removeChild(t))}}else if("br"===t.nodeName)i(t),t.parentNode&&t.parentNode.removeChild(t);else for(t=t.firstChild;t;t=t.nextSibling)r(t)}function i(t){function e(t,n){var r=n?t.cloneNode(!1):t,i=t.parentNode;if(i){var i=e(i,1),a=t.nextSibling;i.appendChild(r);for(var o=a;o;o=a)a=o.nextSibling,i.appendChild(o)}return r}for(;!t.nextSibling;)if(t=t.parentNode,!t)return;for(var n,t=e(t.nextSibling,0);(n=t.parentNode)&&1===n.nodeType;)t=n;c.push(t)}for(var a=/(?:^|\s)nocode(?:\s|$)/,o=/\r\n?|\n/,s=t.ownerDocument,l=s.createElement("li");t.firstChild;)l.appendChild(t.firstChild);for(var c=[l],u=0;uu;++u)l=c[u],l.className="L"+(u+e)%10,l.firstChild||l.appendChild(s.createTextNode(" ")),f.appendChild(l);t.appendChild(f)}function l(t,e){for(var n=e.length;--n>=0;){var r=e[n];S.hasOwnProperty(r)?f.console&&console.warn("cannot override language handler %s",r):S[r]=t}}function c(t,e){return t&&S.hasOwnProperty(t)||(t=/^\s*m;)p[m]!==p[m+2]?(p[g++]=p[m++],p[g++]=p[m++]):m+=2;for(d=g,m=g=0;d>m;){for(var v=p[m],y=p[m+1],b=m+2;d>=b+2&&p[b+1]===y;)b+=2;p[g++]=v,p[g++]=y,m=b}p.length=g;var w,x=t.c;x&&(w=x.style.display,x.style.display="none");try{for(;u>i;){var C,S=l[i+2]||s,T=p[h+2]||s,b=Math.min(S,T),E=l[i+1];if(1!==E.nodeType&&(C=o.substring(r,b))){a&&(C=C.replace(e,"\r")),E.nodeValue=C;var N=E.ownerDocument,k=N.createElement("span");k.className=p[h+1];var $=E.parentNode;$.replaceChild(k,E),k.appendChild(E),S>r&&(l[i+1]=E=N.createTextNode(o.substring(b,S)),$.insertBefore(E,k.nextSibling))}r=b,r>=S&&(i+=2),r>=T&&(h+=2)}}finally{x&&(x.style.display=w)}}catch(j){f.console&&console.log(j&&j.stack||j)}}var f=window,p=["break,continue,do,else,for,if,return,while"],d=[[p,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],h=[d,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],g=[d,"abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],m=[g,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"],d=[d,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],v=[p,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],y=[p,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],b=[p,"as,assert,const,copy,drop,enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"],p=[p,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],w=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,x=/\S/,C=o({keywords:[h,m,d,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",v,y,p],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),S={};l(C,["default-code"]),l(a([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]),l(a([["pln",/^\s+/,t," \r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,t,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'\/>]|\/(?=\s)))/],["pun",/^[\/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]),l(a([],[["atv",/^[\S\s]+/]]),["uq.val"]),l(o({keywords:h,hashComments:!0,cStyleComments:!0,types:w}),["c","cc","cpp","cxx","cyc","m"]),l(o({keywords:"null,true,false"}),["json"]),l(o({keywords:m,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:w}),["cs"]),l(o({keywords:g,cStyleComments:!0}),["java"]),l(o({keywords:p,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]),l(o({keywords:v,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]),l(o({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]),l(o({keywords:y,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]),l(o({keywords:d,cStyleComments:!0,regexLiterals:!0}),["javascript","js"]),l(o({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]),l(o({keywords:b,cStyleComments:!0,multilineStrings:!0}),["rc","rs","rust"]),l(a([],[["str",/^[\S\s]+/]]),["regex"]);var T=f.PR={createSimpleLexer:a,registerLangHandler:l,sourceDecorator:o,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:f.prettyPrintOne=function(t,e,n){var r=document.createElement("div");return r.innerHTML=""+t+"
",r=r.firstChild,n&&s(r,n,!0),u({h:e,j:n,c:r,i:1}),r.innerHTML},prettyPrint:f.prettyPrint=function(e,n){function r(){for(var n=f.PR_SHOULD_USE_CONTINUATION?h.now()+250:1/0;mp;++p)l.push(a[c][p]);var a=t,h=Date;h.now||(h={now:function(){return+new Date}});var g,m=0,v=/\blang(?:uage)?-([\w.]+)(?!\S)/,y=/\bprettyprint\b/,b=/\bprettyprinted\b/,w=/pre|xmp/i,x=/^code$/i,C=/^(?:pre|code|xmp)$/i,S={};r()}};"function"==typeof define&&define.amd&&define("google-code-prettify",[],function(){return T})}()}();
--------------------------------------------------------------------------------
/part/arrow-shape.html:
--------------------------------------------------------------------------------
1 |
32 |
33 |
34 |
35 |
36 |
37 |
42 |
43 |
<nav class="nav-arrow">
44 | <div>我家</div>
45 | <div>大院</div>
46 | <div>的井</div>
47 | </nav>
48 |
.nav-arrow > div {
49 | display: inline-block;
50 | line-height: 2rem;
51 | background-color: #76be35;
52 | color: #fff;
53 | position: relative;
54 | margin-right: .5rem;
55 | padding: 0 .5rem 0 1.5rem;
56 | }
57 | .nav-arrow > div:before,
58 | .nav-arrow > div:after {
59 | content: ' ';
60 | display: block;
61 | border: 1rem solid transparent;
62 | border-left-color: #fff;
63 | position: absolute;
64 | top: 0;
65 | left: 0;
66 | width: 0;
67 | height: 0;
68 | z-index: 0;
69 | }
70 | .nav-arrow > div:after {
71 | left: auto;
72 | right: -2rem;
73 | border-color: transparent;
74 | border-left-color: #76be35;
75 | z-index: 1;
76 | }
77 |
78 |
79 |
80 |
18 |
19 |
20 |
21 |
22 |
将鼠标移动到页面底部显示导航栏。
23 |
此示例仅限桌面端用鼠标仅限操作，移动端无法查看效果。
24 |
30 |
31 |
<nav class="nav auto-dock-nav dark">
32 | <a><i class="icon-home"></i> 首页</a>
33 | <a>项目</a>
34 | <a>产品</a>
35 | <a>任务</a>
36 | </nav>
37 |
.auto-dock-nav {
38 | position: fixed;
39 | bottom: 0;
40 | left: 0;
41 | right: 0;
42 | transform: translateY(99%);
43 | opacity: 0;
44 | transition: transform .3s, opacity .1s;
45 | }
46 | .auto-dock-nav:hover {
47 | opacity: 1;
48 | transform: translateY(0);
49 | }
50 |
51 |
52 |
53 |
9 |
10 |
11 |
12 |
茅屋为秋风所破歌 · 唐-杜甫
八月秋高风怒号，卷我屋上三重茅。茅飞渡江洒江郊，高者挂罥长林梢，下者飘转沉塘坳。
13 | 南村群童欺我老无力，忍能对面为盗贼，公然抱茅入竹去。唇焦口燥呼不得，归来倚杖自叹息。
14 |
<p class="bold-line">茅屋为秋风所破歌 · 唐-杜甫<br>八月秋高风怒号，卷我屋上三重茅。茅飞渡江洒江郊，高者挂罥长林梢，下者飘转沉塘坳。
15 | 南村群童欺我老无力，忍能对面为盗贼，公然抱茅入竹去。唇焦口燥呼不得，归来倚杖自叹息。</p>
16 |
p.bold-line:first-line {
17 | font-size: 1rem;
18 | font-weight: bold;
19 | color: #b06ce5;
20 | }
21 |
22 |
23 |
24 |
21 |
22 |
23 |
24 |
25 |
26 | - 我家
28 | - 大院
29 | - 的井
30 |
31 |
32 |
<ul class="breadcrumb">
33 | <li><a href=""><i class="icon icon-home"></i></a></li>
34 | <li><a href="">我家</a></li>
35 | <li><a href="">大院</a></li>
36 | <li class="active">的井</li>
37 | </ul>
38 |
.breadcrumb {
39 | padding: 8px 15px;
40 | margin-bottom: 20px;
41 | list-style: none;
42 | border-radius: 4px;
43 | }
44 | .breadcrumb > li {
45 | display: inline-block;
46 | }
47 | .breadcrumb > li + li:before {
48 | padding: 0 5px;
49 | color: #ccc;
50 | content: "/\00a0";
51 | }
52 | .breadcrumb > .active {
53 | color: #808080;
54 | }
55 |
56 |
57 |
58 |
38 |
39 |
40 |
41 |
42 |
<button type="button" class="btn btn-skin">按钮</button>
43 |
.btn-skin {
44 | position: relative;
45 | }
46 | .btn-skin:after {
47 | position: absolute;
48 | top: 0;
49 | right: 0;
50 | bottom: 0;
51 | left: 0;
52 | display: block;
53 | content: ' ';
54 | transition: .3s cubic-bezier(.175, .885, .32, 1);
55 | transform: scale(.6);
56 | opacity: 0;
57 | background-color: transparent;
58 | box-shadow: 0 0 0 .05rem #000;
59 | }
60 | .btn-skin:hover:after,
61 | .btn-skin.hover:after {
62 | transform: scale(1);
63 | opacity: .08;
64 | background-color: #000;
65 | }
66 | .btn-skin:focus {
67 | outline: none;
68 | }
69 | .btn-skin:focus:after {
70 | transform: scale(1);
71 | opacity: .1;
72 | background-color: rgba(0, 0, 0, .8);
73 | box-shadow: inset 0 0 0 .05rem rgba(0, 0, 0, .9);
74 | }
75 |
76 |
77 |
78 |
28 |
29 |
30 |
31 |
32 |
子曰：学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？
33 |
34 |
<div class="chat-bubble"><strong>子曰：</strong>学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</div>
35 |
.chat-bubble {
36 | background-color: #fff;
37 | border: .1rem solid #76be35;
38 | padding: .5rem;
39 | position: relative;
40 | max-width: 12rem;
41 | color: #76be35;
42 | }
43 | .chat-bubble:before,
44 | .chat-bubble:after {
45 | content: ' ';
46 | display: block;
47 | position: absolute;
48 | bottom: -1rem;
49 | left: 1rem;
50 | width: 0;
51 | height: 0;
52 | border: .5rem solid transparent;
53 | border-top-color: #76be35;
54 | }
55 | .chat-bubble:after {
56 | border-top-color: #fff;
57 | bottom: -.85rem;
58 | }
59 |
60 |
61 |
62 |
23 |
24 |
25 |
26 |
27 |
子曰：学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？
28 |
29 |
<div class="chat-bubble"><strong>子曰：</strong>学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</div>
30 |
.chat-bubble {
31 | background-color: #76be35;
32 | color: #fff;
33 | padding: .5rem;
34 | position: relative;
35 | max-width: 12rem;
36 | }
37 | .chat-bubble:after {
38 | content: ' ';
39 | display: block;
40 | position: absolute;
41 | top: 100%;
42 | left: 1rem;
43 | width: 0;
44 | height: 0;
45 | border: .3rem solid transparent;
46 | border-top-color: #76be35;
47 | border-left-color: #76be35;
48 | }
49 |
50 |
51 |
52 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
<div class="control">
25 | <div class="checkbox">
26 | <input type="checkbox" name="buyMethod">
27 | <label for="buyMethod">使用匿名购买</label>
28 | </div>
29 | </div>
30 | <div class="control">
31 | <label>付款方式</label>
32 | <div class="radio">
33 | <input type="radio" name="payment">
34 | <label for="payment">支付宝</label>
35 | </div>
36 | <div class="radio">
37 | <input type="radio" name="payment">
38 | <label for="payment">网银</label>
39 | </div>
40 | </div>
41 |
.radio,
42 | .checkbox {
43 | position: relative;
44 | }
45 | .radio > input,
46 | .checkbox > input {
47 | position: absolute;
48 | z-index: 1;
49 | top: 0;
50 | left: 0;
51 | display: block;
52 | width: 100%;
53 | height: 100%;
54 | opacity: 0;
55 | }
56 | .radio > input + label,
57 | .checkbox > input + label {
58 | position: relative;
59 | z-index: 0;
60 | display: block;
61 | padding: .25rem 0 .25rem 1.25rem;
62 | }
63 | .radio > input + label:before,
64 | .checkbox > input + label:before,
65 | .radio > input + label:after,
66 | .checkbox > input + label:after {
67 | position: absolute;
68 | top: .3rem;
69 | left: 0;
70 | display: flex;
71 | width: .9rem;
72 | height: .9rem;
73 | content: ' ';
74 | transition: .3s cubic-bezier(.175, .885, .32, 1);
75 | color: transparent;
76 | border: .1rem solid #ccc;
77 | align-items: center;
78 | justify-content: center;
79 | }
80 | .radio > input + label:after,
81 | .checkbox > input + label:after {
82 | transform: scale(0);
83 | opacity: 0;
84 | color: #808080;
85 | }
86 | .radio > input:focus + label:before,
87 | .checkbox > input:focus + label:before {
88 | border-color: #2196f3;
89 | }
90 | .radio > input:checked + label:after,
91 | .checkbox > input:checked + label:after {
92 | transform: scale(1);
93 | opacity: 1;
94 | }
95 | .radio > input[disabled],
96 | .checkbox > input[disabled],
97 | .radio > input.disabled,
98 | .checkbox > input.disabled {
99 | opacity: 0!important;
100 | }
101 | .radio > input[disabled] + label,
102 | .checkbox > input[disabled] + label,
103 | .radio > input.disabled + label,
104 | .checkbox > input.disabled + label {
105 | opacity: .5;
106 | }
107 | .radio.inline-block + .inline-block,
108 | .checkbox.inline-block + .inline-block {
109 | margin-left: .05rem;
110 | }
111 | .checkbox > input + label:after {
112 | font-family: ZenIcon;
113 | font-size: .7rem;
114 | font-weight: normal;
115 | font-style: normal;
116 | font-variant: normal;
117 | content: '\e60d';
118 | text-transform: none;
119 | border: none;
120 | speak: none;
121 | -webkit-font-smoothing: antialiased;
122 | -moz-osx-font-smoothing: grayscale;
123 | }
124 | .checkbox > input:focus + label:after {
125 | color: #2196f3;
126 | }
127 | .radio > input + label:before {
128 | border-radius: 1rem;
129 | }
130 | .radio > input + label:after {
131 | top: .55rem;
132 | left: .25rem;
133 | width: .4rem;
134 | height: .4rem;
135 | border: none;
136 | border-radius: .2rem;
137 | background-color: #808080;
138 | }
139 | .radio > input:focus + label:after {
140 | background-color: #2196f3;
141 | }
142 |
143 |
144 |
145 |
15 |
16 |
17 |
18 |
24 |
<div class="clearfix">
25 | <div class="pull-left">浮动一</div>
26 | <div class="pull-left">浮动一</div>
27 | </div>
28 |
.clearfix:before,
29 | .clearfix:after
30 | {
31 | display: table;
32 |
33 | content: ' ';
34 | }
35 | .clearfix:after
36 | {
37 | clear: both;
38 | }
39 |
40 |
41 |
42 |
16 |
17 |
18 |
19 |
20 |
今日作业：
21 |
22 | - 写字两页
23 | - 背古诗三首
24 | - 作文一篇
25 | - 算术练习
26 |
27 |
逗号分隔列表：
28 |
29 | - 写字两页
30 | - 背古诗三首
31 | - 作文一篇
32 | - 算术练习
33 |
34 |
35 |
<ul class="comma-list">
36 | <li>写字两页</li>
37 | <li>背古诗三首</li>
38 | <li>作文一篇</li>
39 | <li>算术练习</li>
40 | </ul>
41 |
ul.comma-list {
42 | padding-left: 0;
43 | }
44 | ul.comma-list > li {
45 | display: inline-block;
46 | }
47 | ul.comma-list > li:after {
48 | content: ", ";
49 | }
50 | ul.comma-list > li:last-child:after {
51 | display: none;
52 | }
53 |
54 |
55 |
56 |
22 |
23 |
24 |
25 |
26 |
<button data-badge="2" class="green btn has-badge"><i class="icon-check-board"></i> 今日待办</button>
27 |
.has-badge {
28 | position: relative;
29 | }
30 | .has-badge:before {
31 | content: attr(data-badge);
32 | display: block;
33 | position: absolute;
34 | top: -.5rem;
35 | right: -.5rem;
36 | height: 1rem;
37 | line-height: 1rem;
38 | border-radius: .5rem;
39 | background: red;
40 | color: #fff;
41 | min-width: 1rem;
42 | text-align: center;
43 | padding: 0 .25rem;
44 | }
45 |
46 |
47 |
48 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
<div class="has-corner">
46 | <img src="img/magic-tree.png" alt="">
47 | <div class="corner"><div>NEW</div></div>
48 | </div>
49 |
.has-corner {
50 | position: relative;
51 | border: .05rem solid #e75c54;
52 | }
53 | .has-corner > .corner {
54 | position: absolute;
55 | right: 0;
56 | top: 0;
57 | width: 3rem;
58 | height: 3rem;
59 | }
60 | .has-corner > .corner:before {
61 | content: ' ';
62 | display: block;
63 | position: absolute;
64 | right: 0;
65 | top: 0;
66 | width: 0;
67 | height: 0;
68 | border: 1.5rem solid #e75c54;
69 | border-left-color: transparent;
70 | border-bottom-color: transparent;
71 | }
72 | .has-corner > .corner > div {
73 | transform: rotate(45deg);
74 | position: relative;
75 | text-align: center;
76 | color: #fff;
77 | position: relative;
78 | top: .5rem;
79 | right: -.5rem;
80 | }
81 |
82 |
83 |
84 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
<div class="has-corner">
36 | <img src="img/magic-tree.png" alt="">
37 | </div>
38 |
.has-corner {
39 | position: relative;
40 | border: .05rem solid #ddd;
41 | overflow: hidden;
42 | }
43 | .has-corner:before,
44 | .has-corner:after {
45 | content: ' ';
46 | display: block;
47 | position: absolute;
48 | box-shadow: .1rem .1rem .5rem rgba(0,0,0,.3);
49 | width: 4rem;
50 | height: 4rem;
51 | transform: rotate(45deg);
52 | }
53 | .has-corner:before {
54 | right: -2rem;
55 | top: -2rem;
56 | }
57 | .has-corner:after {
58 | left: -2rem;
59 | bottom: -2rem;
60 | }
61 |
62 |
63 |
64 |
29 |
30 |
31 |
32 |
35 |
<a class="green btn has-backdrop">点击启用遮罩效果</a>
36 |
.has-backdrop {
37 | position: relative;
38 | }
39 | .has-backdrop:before {
40 | content: ' ';
41 | display: block;
42 | box-sizing: content-box;
43 | box-shadow: 0 0 0 0rem rgba(0,0,0,.5);
44 | position: absolute;
45 | top: 0;
46 | left: 0;
47 | right: 0;
48 | bottom: 0;
49 | z-index: 99999;
50 | pointer-events: none;
51 | transition: box-shadow .5s;
52 | opacity: 0;
53 | visibility: hidden;
54 | }
55 | .has-backdrop:hover:before,
56 | .has-backdrop:focus:before {
57 | opacity: 1;
58 | box-shadow: 0 0 0 9999rem rgba(0,0,0,.5);
59 | visibility: visible;
60 | }
61 |
62 |
63 |
64 |
34 |
35 |
36 |
37 |
在加载的时候我是隐藏的
38 |
<div class="primary loading relative box">在加载的时候我是隐藏的</div>
39 |
@keyframes spin {
40 | 0% {
41 | transform: rotate(0deg);
42 | }
43 | 100% {
44 | transform: rotate(359deg);
45 | }
46 | }
47 | .loading {
48 | color: transparent!important;
49 | }
50 | .loading > * {
51 | visibility: hidden;
52 | }
53 | .loading:before {
54 | position: absolute;
55 | top: 50%;
56 | left: 50%;
57 | display: block;
58 | width: .9rem;
59 | height: .9rem;
60 | margin-top: -.45rem;
61 | margin-left: -.45rem;
62 | content: ' ';
63 | transition: opacity .3s cubic-bezier(.175, .885, .32, 1);
64 | animation: spin 2s infinite linear;
65 | border: .15rem dotted rgba(255, 255, 255, .5);
66 | border-color: rgba(255, 255, 255, .1) rgba(255, 255, 255, .4) rgba(255, 255, 255, .5) rgba(255, 255, 255, .6);
67 | border-radius: 50%;
68 | }
69 |
70 |
71 |
72 |
60 |
61 |
62 |
63 |
66 |
<div class="primary box">
67 | <div class="path-zui-36"><i class="path-1"></i><i class="path-2"></i></div>
68 | </div>
69 |
.path-zui-36 {
70 | position: relative;
71 | display: inline-block;
72 | overflow: hidden;
73 | width: 3.6rem;
74 | height: 3.6rem;
75 | border-radius: 1.8rem;
76 | background-color: #fff;
77 | }
78 | .path-zui-36:before,
79 | .path-zui-36:after {
80 | position: absolute;
81 | left: 1.1rem;
82 | display: block;
83 | width: 1.4rem;
84 | height: .4rem;
85 | content: ' ';
86 | border: .2rem solid #3280fc;
87 | }
88 | .path-zui-36:before {
89 | top: .9rem;
90 | border-bottom: none;
91 | }
92 | .path-zui-36:after {
93 | top: 2.3rem;
94 | border-top: none;
95 | }
96 | .path-zui-36 .path-1,
97 | .path-zui-36 .path-2,
98 | .path-zui-36 .path-1:before,
99 | .path-zui-36 .path-1:after,
100 | .path-zui-36 .path-2:before {
101 | position: absolute;
102 | display: block;
103 | width: .2rem;
104 | height: .2rem;
105 | content: ' ';
106 | background-color: #3280fc;
107 | }
108 | .path-zui-36 .path-1 {
109 | top: 1.9rem;
110 | left: 1.5rem;
111 | }
112 | .path-zui-36 .path-1:before,
113 | .path-zui-36 .path-2:before {
114 | top: .2rem;
115 | left: -.2rem;
116 | }
117 | .path-zui-36 .path-1:after {
118 | top: -.2rem;
119 | left: .2rem;
120 | }
121 | .path-zui-36 .path-2 {
122 | top: 1.3rem;
123 | left: 2.1rem;
124 | }
125 |
126 |
127 |
128 |
32 |
33 |
34 |
35 |
38 |
<div class="luck"><span>LUCK</span></div>
39 |
.luck {
40 | position: relative;
41 | }
42 | .luck:before {
43 | content: ' ';
44 | display: block;
45 | position: absolute;
46 | width: 5rem;
47 | height: 5rem;
48 | top: 0;
49 | left: 0;
50 | transform: rotate(45deg);
51 | background: red;
52 | z-index: 0;
53 | }
54 | .luck > span {
55 | display: block;
56 | width: 5rem;
57 | height: 5rem;
58 | line-height: 5rem;
59 | text-align: center;
60 | position: relative;
61 | color: yellow;
62 | font-size: 1.2rem;
63 | z-index: 1;
64 | position: relative;
65 | }
66 |
67 |
68 |
69 |
43 |
44 |
45 |
46 |
47 |
夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。
48 |
49 |
<div data-tooltip="兰亭集序 (王羲之)" class="box green block has-tooltip">夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。</div>
50 |
.has-tooltip {
51 | position: relative;
52 | }
53 | .has-tooltip:before {
54 | content: attr(data-tooltip);
55 | display: block;
56 | position: absolute;
57 | background-color: rgba(0,0,0,.7);
58 | color: #fff;
59 | line-height: 1rem;
60 | padding: .25rem .5rem;
61 | bottom: 100%;
62 | left: 50%;
63 | transform: translateX(-50%);
64 | font-size: .6rem;
65 | opacity: 0;
66 | visibility: hidden;
67 | transition: all .2s;
68 | }
69 | .has-tooltip:after {
70 | content: ' ';
71 | display: block;
72 | width: 0;
73 | height: 0;
74 | border: .5rem solid transparent;
75 | border-top-color: rgba(0,0,0,.7);
76 | position: absolute;
77 | left: 50%;
78 | transform: translateX(-50%);
79 | top: 0;
80 | opacity: 0;
81 | transition: all .2s;
82 | }
83 | .has-tooltip:hover:before,
84 | .has-tooltip:hover:after {
85 | opacity: 1;
86 | visibility: visible;
87 | transform: translate(-50%, -.5rem);
88 | }
89 |
90 |
91 |
92 |
93 |
8 |
9 |
10 |
11 |
12 |
<a href="http://google.com" class="link" disabled="disabled">此链接被禁用</a>
13 |
.link[disabled] {
14 | opacity: .5;
15 | pointer-events: none;
16 | }
17 |
18 |
19 |
20 |
9 |
10 |
11 |
12 |
13 |
近塞上之人，有善术者，马无故亡而入胡。人皆吊之，其父曰：“此何遽不为福乎？”居数月，其马将胡骏马而归。人皆贺之，其父曰：“此何遽不能为祸乎？”家富良马，其子好骑，堕而折其髀。人皆吊之，其父曰：“此何遽不为福乎？”居一年，胡人大入塞，丁壮者引弦而战。近塞之人，死者十九。此独以跛之故，父子相保。
14 |
15 |
<p class="drop-cap">近塞上之人，有善术者，马无故亡而入胡。人皆吊之，其父曰：“此何遽不为福乎？”居数月，其马将胡骏马而归。人皆贺之，其父曰：“此何遽不能为祸乎？”家富良马，其子好骑，堕而折其髀。人皆吊之，其父曰：“此何遽不为福乎？”居一年，胡人大入塞，丁壮者引弦而战。近塞之人，死者十九。此独以跛之故，父子相保。</p>
16 |
p.drop-cap:first-letter {
17 | font-size: 2em;
18 | float: left;
19 | margin-right: .25em;
20 | }
21 |
22 |
23 |
24 |
33 |
34 |
35 |
36 |
42 |
<div class="caret-down">天天向下</div>
43 | <div class="caret-up">天天向上</div>
44 | <div class="caret-left">天天向左</div>
45 | <div class="caret-rigth">天天向右</div>
46 |
.caret-down:after,
47 | .caret-up:after,
48 | .caret-left:after,
49 | .caret-rigth:after {
50 | position: relative;
51 | content: ' ';
52 | display: inline-block;
53 | width: 0;
54 | height: 0;
55 | border: .3rem solid transparent;
56 | vertical-align: middle;
57 | margin-left: .25rem;
58 | }
59 | .caret-down:after {
60 | border-top-color: #03A9F4;
61 | top: .1rem;
62 | }
63 | .caret-up:after {
64 | border-bottom-color: #03A9F4;
65 | bottom: .1rem;
66 | }
67 | .caret-left:after {
68 | border-right-color: #03A9F4;
69 | right: .1rem;
70 | }
71 | .caret-rigth:after {
72 | border-left-color: #03A9F4;
73 | left: .1rem;
74 | }
75 |
76 |
77 |
78 |
38 |
39 |
40 |
41 |
65 |
<div class="dropdown">
66 | <a class="btn primary">检查下拉菜单 <i class="icon-caret-down"></i></a>
67 | <ul class="dropdown-menu">
68 | <li><a>产品</a></li>
69 | <li>
70 | <a>项目 <i class="icon-caret-right"></i></a>
71 | <ul class="dropdown-menu">
72 | <li><a>火星救援</a></li>
73 | <li>
74 | <a>太阳系远征 <i class="icon-caret-right"></i></a>
75 | <ul class="dropdown-menu">
76 | <li><a>半人马</a></li>
77 | <li><a>红蝎子</a></li>
78 | <li><a>阿尔法狗</a></li>
79 | </ul>
80 | </li>
81 | <li><a>月球漫步</a></li>
82 | </ul>
83 | </li>
84 | <li><a>任务</a></li>
85 | </ul>
86 | </div>
87 |
.dropdown {
88 | position: relative;
89 | }
90 | .dropdown:hover > .dropdown-menu,
91 | .dropdown.open > .dropdown-menu {
92 | display: block;
93 | position: absolute;
94 | top: 100%;
95 | left: 0;
96 | max-height: initial;
97 | }
98 | .dropdown-menu {
99 | padding: 0;
100 | overflow: visible;
101 | }
102 | .dropdown-menu > li {
103 | display: block;
104 | position: relative;
105 |
106 | }
107 | .dropdown-menu > li > a {
108 | padding: .5rem;
109 | display: block;
110 | }
111 | .dropdown-menu > li > a > .icon-caret-right {
112 | float: right;
113 | }
114 | .dropdown-menu > li:hover > a + .dropdown-menu {
115 | display: block;
116 | position: absolute;
117 | top: 0;
118 | left: 100%;
119 | max-height: initial;
120 | }
121 |
122 |
123 |
124 |
39 |
40 |
41 |
42 |
43 |
<button type="button" class="btn btn-expand">按钮</button>
44 |
.btn-expand {
45 | position: relative;
46 | background: #03A9F4;
47 | color: #fff;
48 | margin: 1rem;
49 | }
50 | .btn-expand:after {
51 | position: absolute;
52 | top: -1rem;
53 | right: -1rem;
54 | bottom: -1rem;
55 | left: -1rem;
56 | display: block;
57 | content: ' ';
58 | transition: .3s cubic-bezier(.175, .885, .32, 1);
59 | transform: scale(.6);
60 | opacity: 0;
61 | background-color: transparent;
62 | box-shadow: 0 0 0 .05rem #000;
63 | }
64 | .btn-expand:hover:after,
65 | .btn-expand.hover:after {
66 | transform: scale(1);
67 | opacity: .15;
68 | background-color: #000;
69 | }
70 | .btn-expand:focus {
71 | outline: none;
72 | }
73 | .btn-expand:focus:after {
74 | transform: scale(1);
75 | opacity: .2;
76 | background-color: rgba(0, 0, 0, .8);
77 | box-shadow: inset 0 0 0 .05rem rgba(0, 0, 0, .9);
78 | }
79 |
80 |
81 |
82 |
11 |
12 |
13 |
14 |
15 |
22 |
23 |
<nav class="nav nav-outline">
24 | <a><i class="icon-home"></i></a>
25 | <a>产品</a>
26 | <a>项目</a>
27 | <a>需求</a>
28 | <a>Bug</a>
29 | </nav>
30 |
.nav-outline > a {
31 | border: 1px solid red;
32 | border-right: none;
33 | }
34 | .nav-outline > a:last-child {
35 | border-right: 1px solid red;
36 | }
37 |
38 |
39 |
40 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
抽奖
33 |
34 |
35 |
欧耶
今日你值日
36 |
37 |
38 |
39 |
<div class="flip-card rounded shadow">
40 | <div class="front content red flex flex-center">
41 | <h1 class="text-center">抽奖</h1>
42 | </div>
43 | <div class="back content green flex flex-center">
44 | <h1 class="text-center">欧耶<br>今日你值日</h1>
45 | </div>
46 | </div>
47 |
.flip-card,
48 | .flip-card > .content {
49 | height: 10rem;
50 | transition: opacity .5s, transform .5s;
51 | }
52 | .flip-card > .content.back {
53 | opacity: 0;
54 | position: absolute;
55 | left: 0;
56 | top: 0;
57 | right: 0;
58 | }
59 | .flip-card:hover {
60 | transform: rotateY(180deg);
61 | }
62 | .flip-card:hover > .content.front {
63 | opacity: 0;
64 | }
65 | .flip-card:hover > .content.back {
66 | opacity: 1;
67 | transform: rotateY(180deg);
68 | }
69 |
70 |
71 |
72 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
点击并激活上面的电子邮件输入框
12 |
13 |
<div class="control">
14 | <label for="email">电子邮件</label>
15 | <input name="email" type="email" class="input" placeholder="example@email.com">
16 | </div>
17 |
.input:focus {
18 | border: .05rem solid red;
19 | }
20 |
21 |
22 |
23 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
<i class="icon-star"></i>
9 |
.icon-star:before{
10 | content: '\e606';
11 | }
12 |
19 |
20 |
21 |
22 |
5 |
6 |
7 |
8 |
9 |
我的下方有 3 个空段落。
10 |
11 |
12 |
13 |
我的上方有 3 个空段落。
14 |
15 |
<p>我的下方有 3 个空段落。</p>
16 | <p></p>
17 | <p></p>
18 | <p></p>
19 | <p>我的上方有 3 个空段落。</p>
20 |
21 |
22 |
23 |
24 |
18 |
19 |
20 |
21 |
22 |
这段话里面有些 重要内容 需要你注意。
23 |
24 |
<p>这段话里面有些 <span class="highlight">重要内容</span> 需要你注意。</p>
25 |
.highlight {
26 | position: relative;
27 | }
28 | .highlight:before {
29 | content: ' ';
30 | display: block;
31 | position: absolute;
32 | left: 0;
33 | top: 0;
34 | right: 0;
35 | bottom: 0;
36 | border: .05rem solid rgba(0,255,0, .8);
37 | background: rgba(0,255,0, .1);
38 | }
39 |
40 |
41 |
42 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
CSS 魔法类
32 |
33 |
34 |
点击图片查看效果
35 |
<a class="img-box">
36 | <img src="img/magic-tree.png" alt="">
37 | <div class="back-content flex flex-center">
38 | <h1 class="text-center" style="font-size: 2rem;"><span class="code text-yellow">C</span><span class="code text-red">S</span><span class="code text-purple">S</span> 魔法类</h1>
39 | </div>
40 | </a>
41 |
.img-box {
42 | overflow: hidden;
43 | display: block;
44 | margin-bottom: .5rem;
45 | position: relative;
46 | }
47 | .img-box > .back-content {
48 | opacity: 0;
49 | visibility: hidden;
50 | transition: all .5s;
51 | position: absolute;
52 | left: 0;
53 | top: 0;
54 | right: 0;
55 | bottom: 0;
56 | background-color: rgba(255,255,255,.9);
57 | }
58 | .img-box:hover > .back-content {
59 | opacity: 1;
60 | visibility: visible;
61 | }
62 |
63 |
64 |
65 |
13 |
14 |
15 |
16 |
17 |
点击图片查看效果
18 |
<a class="img-box"><img src="img/magic-tree.png" alt=""></a>
19 |
.img-box {
20 | overflow: hidden;
21 | display: block;
22 | margin-bottom: .5rem;
23 | }
24 | .img-box:hover > img {
25 | transform: scale(1.5);
26 | transition: transform .2s;
27 | }
28 |
29 |
30 |
31 |
20 |
21 |
27 |
28 |
29 |
30 |
a:hover {
31 | color: #fff;
32 | background-color: red;
33 | }
34 |
35 |
36 |
42 |
43 |
44 |
45 |
a:active {
46 | color: red;
47 | text-decoration: underline;
48 | }
49 |
50 |
51 |
52 |
53 |
54 |
a:focus {
55 | color: red;
56 | border: 1px solid red;
57 | }
58 |
59 |
60 |
61 |
50 |
51 |
52 |
53 |
下面是一个用纯 CSS 实现的 Material Design 风格的输入框。
54 |
55 |
56 |
57 |
58 |
59 |
60 |
<div class="md-input">
61 | <input type="text" class="input" id="account" name="account" required>
62 | <label for="account">用户名</label>
63 | </div>
64 |
.md-input {
65 | padding-top: 1rem;
66 | position: relative;
67 | }
68 | .md-input > label {
69 | position: absolute;
70 | line-height: 1rem;
71 | height: 2.5rem;
72 | padding: 1.25rem 0 0.25rem 0;
73 | top: 0;
74 | left: 0;
75 | right: 0;
76 | transition: all .4s;
77 | }
78 | .md-input > label:before {
79 | content: " ";
80 | display: block;
81 | position: absolute;
82 | background-color: red;
83 | height: .1rem;
84 | left: 50%;
85 | right: 50%;
86 | bottom: 0;
87 | transition: left .3s, right .3s;
88 | }
89 | .md-input > input {
90 | border-width: 0;
91 | border-bottom-width: .1rem;
92 | padding-left: 0;
93 | padding-right: 0;
94 | }
95 | .md-input > input:focus {
96 | border-color: #ccc;
97 | }
98 | .md-input > input:valid + label,
99 | .md-input > input:focus + label {
100 | padding-top: 0.25rem;
101 | padding-bottom: 1.25rem;
102 | font-size: .6rem;
103 | color: #666;
104 | }
105 | .md-input > input:valid + label:before,
106 | .md-input > input:focus + label:before {
107 | left: 0;
108 | right: 0;
109 | }
110 |
111 |
112 |
113 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
<label class="checkbox-skin"><input type="checkbox"> <span>选中就是绿色，不选中就是红色</span></label>
17 |
.checkbox-skin > input + span {
18 | color: red;
19 | }
20 | .checkbox-skin > input:checked + span {
21 | color: green;
22 | }
23 |
24 |
25 |
26 |
12 |
13 |
14 |
15 |
旋转设备屏幕或者更改浏览器窗口宽度，下方的红色矩形方块会保持 1:1 的比例。
16 |
17 |
<div class="red square"></div>
18 |
.square {
19 | width: 100%;
20 | }
21 | .square:before {
22 | content: " ";
23 | display: block;
24 | padding-top: 100%;
25 | }
26 |
32 |
33 |
34 |
35 |
2 |
3 |
4 |
:root {
5 | font-size: .7rem;
6 | }
7 |
8 |
9 |
7 |
8 |
9 |
10 |
28 |
.my-form input:not([type="submit"]) {
29 | border: 2px solid red;
30 | }
31 |
32 |
33 |
34 |
8 |
9 |
10 |
11 |
12 |
茅屋为秋风所破歌
13 |
唐 · 杜甫
14 |
八月秋高风怒号，卷我屋上三重茅。茅飞渡江洒江郊，高者挂罥长林梢，下者飘转沉塘坳。
15 |
南村群童欺我老无力，忍能对面为盗贼，公然抱茅入竹去。唇焦口燥呼不得，归来倚杖自叹息。
16 |
俄顷风定云墨色，秋天漠漠向昏黑。布衾多年冷似铁，娇儿恶卧踏里裂。床头屋漏无干处，雨脚如麻未断绝。自经丧乱少睡眠，长夜沾湿何由彻?
17 |
安得广厦千万间，大庇天下寒士俱欢颜，风雨不动安如山！呜呼！何时眼前突兀见此屋，吾庐独破受冻死亦足！
18 |
19 |
选择一些文本来查看选中的文本外观。
20 |
::selection {
21 | background-color: #76be35;
22 | color: #000;
23 | }
24 |
25 |
26 |
27 |
10 |
11 |
12 |
13 |
14 |
这里包含一个空链接 ，使用伪类 :empty 和 :before 可以使其显示出来，并使得其可以被点击。
15 |
16 |
<p>这里包含一个空链接 <a href="http://zui.sexy" title="zui 官方网站"></a>，使用伪类 <code>:empty</code> 和 <code>:before</code> 可以使其显示出来。 </p>
17 |
a:empty:before {
18 | content: attr(href);
19 | color: #2196F3;
20 | font-weight: bold;
21 | border-bottom: 1px dashed #2196F3;
22 | }
23 |
24 |
25 |
26 |
2 |
3 |
4 |
5 |
6 |
Sprite 图片：
7 |
8 |
Sprite 图标：
9 |
10 |
11 |
12 |
<p>Sprite 图片：</p>
13 | <img src="img/sprite.png" alt="" class="shadow">
14 | <p>Sprite 图标：</p>
15 | <p><i class="sprite sprite-face1"></i></p>
16 | <p><i class="sprite sprite-face2"></i></p>
17 |
.sprite:before {
18 | content: ' ';
19 | background-position: no-repeat;
20 | background: url(img/sprite.png) no-repeat;
21 | display: inline-block;
22 | width: 1.5rem;
23 | height: 1.5rem;
24 | }
25 | .sprite-face1:before {
26 | background-position: 0 0;
27 | }
28 | .sprite-face2:before {
29 | background-position: -30px 0;
30 | }
31 |
32 |
33 |
34 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | | ID |
15 | 名称 |
16 | 积分 |
17 | 排名 |
18 |
19 |
20 |
21 |
22 | | 1526 |
23 | 小马虎 |
24 | 1056 |
25 | 1 |
26 |
27 |
28 | | 1001 |
29 | 勇敢的小鸭 |
30 | 999 |
31 | 12 |
32 |
33 |
34 | | 1045 |
35 | 鸡大爷 |
36 | 998 |
37 | 23 |
38 |
39 |
40 | | 1025 |
41 | 猪无畏 |
42 | 860 |
43 | 25 |
44 |
45 |
46 | | 1102 |
47 | 糊涂虫 |
48 | 749 |
49 | 30 |
50 |
51 |
52 |
53 |
54 |
<table class="table striped-table">
55 | <thead>
56 | <tr>
57 | <th>ID</th>
58 | <th>名称</th>
59 | <th>积分</th>
60 | <th>排名</th>
61 | </tr>
62 | </thead>
63 | <tbody>
64 | <tr>
65 | <td>1526</td>
66 | <td>小马虎</td>
67 | <td>1056</td>
68 | <td class="text-red"><i class="icon icon-double-angle-up"></i> 1 </td>
69 | </tr>
70 | <tr>
71 | <td>1001</td>
72 | <td>勇敢的小鸭</td>
73 | <td>999</td>
74 | <td class="text-red"><i class="icon icon-double-angle-up"></i> 12 </td>
75 | </tr>
76 | <tr>
77 | <td>1045</td>
78 | <td>鸡大爷</td>
79 | <td>998</td>
80 | <td class="text-green"><i class="icon icon-double-angle-up"></i> 23 </td>
81 | </tr>
82 | <tr>
83 | <td>1025</td>
84 | <td>猪无畏</td>
85 | <td>860</td>
86 | <td class="text-green"><i class="icon icon-double-angle-down"></i> 25 </td>
87 | </tr>
88 | <tr>
89 | <td>1102</td>
90 | <td>糊涂虫</td>
91 | <td>749</td>
92 | <td class="text-red"><i class="icon icon-double-angle-up"></i> 30 </td>
93 | </tr>
94 | </tbody>
95 | </table>
96 |
.striped-table > tbody > tr:nth-child(odd) > td {
97 | background-color: #fff0d5;
98 | }
99 |
100 |
101 |
102 |
8 |
9 |
10 |
11 |
12 |
杜甫诗歌精选
13 |
21 |
22 |
春望
23 |
国破山河在，城春草木深。
24 |
感时花溅泪，恨别鸟惊心。
25 |
烽火连三月，家书抵万金。
26 |
白头搔更短，浑欲不胜簪。
27 |
28 |
29 |
春夜喜雨
30 |
好雨知时节，当春乃发生。
31 |
随风潜入夜，润物细无声。
32 |
野径云俱黑，江船火独明。
33 |
晓看红湿处，花重锦官城。
34 |
35 |
36 |
绝句
37 |
两个黄鹂鸣翠柳，一行白鹭上青天。
38 |
窗含西岭千秋雪，门泊东吴万里船。
39 |
40 |
41 |
望岳
42 |
岱宗夫如何？齐鲁青未了。
43 |
造化钟神秀，阴阳割昏晓。
44 |
荡胸生曾云，决眦入归鸟。
45 |
会当凌绝顶，一览众山小。
46 |
47 |
48 |
<div class="article">
49 | <h1>杜甫诗歌精选</h1>
50 | <div class="box outline gray space-sm">
51 | <ul class="no-margin">
52 | <li><a href="#p1">春望</a></li>
53 | <li><a href="#p2">春夜喜雨</a></li>
54 | <li><a href="#p3">绝句</a></li>
55 | <li><a href="#p4">望岳</a></li>
56 | </ul>
57 | </div>
58 | <div id="p1" class="box poetry">
59 | <h3>春望</h3>
60 | <p>国破山河在，城春草木深。</p>
61 | <p>感时花溅泪，恨别鸟惊心。</p>
62 | <p>烽火连三月，家书抵万金。</p>
63 | <p>白头搔更短，浑欲不胜簪。</p>
64 | </div>
65 | <div id="p2" class="box poetry">
66 | <h3>春夜喜雨</h3>
67 | <p>好雨知时节，当春乃发生。</p>
68 | <p>随风潜入夜，润物细无声。</p>
69 | <p>野径云俱黑，江船火独明。</p>
70 | <p>晓看红湿处，花重锦官城。</p>
71 | </div>
72 | <div id="p3" class="box poetry">
73 | <h3>绝句</h3>
74 | <p>两个黄鹂鸣翠柳，一行白鹭上青天。</p>
75 | <p>窗含西岭千秋雪，门泊东吴万里船。</p>
76 | </div>
77 | <div id="p4" class="box poetry">
78 | <h3>望岳</h3>
79 | <p>岱宗夫如何？齐鲁青未了。</p>
80 | <p>造化钟神秀，阴阳割昏晓。</p>
81 | <p>荡胸生曾云，决眦入归鸟。</p>
82 | <p>会当凌绝顶，一览众山小。</p>
83 | </div>
84 | </div>
85 |
.poetry:target {
86 | background-color: #ddf4df;
87 | border-color: #76be35;
88 | }
89 |
90 |
91 |
92 |
28 |
29 |
30 |
31 |
32 |
36 |
37 |
<button type="button" class="btn toggle-btn primary">
38 | <div class="normal-content"><i class="icon-download-alt"></i> 立即下载</div>
39 | <div class="hover-content">大小：120GB</div>
40 | </button>
41 |
.toggle-btn {
42 | position: relative;
43 | width: 6rem;
44 | border: none;
45 | overflow: hidden;
46 | }
47 | .toggle-btn > div {
48 | position: absolute;
49 | top: 0;
50 | left: 0;
51 | width: 100%;
52 | line-height: 1.5rem;
53 | transition: .2s top;
54 | }
55 | .toggle-btn > .hover-content {
56 | top: 1.5rem;
57 | background-color: #76be35;
58 | }
59 | .toggle-btn:hover > .normal-content {
60 | top: -1.5rem;
61 | }
62 | .toggle-btn:hover > .hover-content {
63 | top: 0;
64 | }
65 |
66 |
67 |
68 |
18 |
19 |
20 |
21 |
22 |
<div class="has-top-shadow"><img src="img/magic-tree.png" alt=""></div>
23 |
.has-top-shadow {
24 | position: relative;
25 | overflow: hidden;
26 | }
27 | .has-top-shadow:before {
28 | content: " ";
29 | display: block;
30 | position: absolute;
31 | top: -20px;
32 | left: -20px;
33 | right: -20px;
34 | height: 20px;
35 | box-shadow: 0 .3rem 2rem rgba(0,0,0,.5);
36 | }
37 |
38 |
39 |
40 |
26 |
27 |
28 |
29 |
36 |
<div class="triangle"></div>
37 | <div class="triangle2"></div>
38 | <div class="triangle3"></div>
39 |
.triangle {
40 | width: 0;
41 | height: 0;
42 | border: 2rem solid #e75c54;
43 | border-left-color: #b06ce5;
44 | border-right-color: #76be35;
45 | border-bottom-color: #2196F3;
46 | }
47 | .triangle2 {
48 | width: 0;
49 | height: 0;
50 | border: 2rem solid #e75c54;
51 | border-right-color: #76be35;
52 | border-bottom-color: #76be35;
53 | }
54 | .triangle3 {
55 | width: 0;
56 | height: 0;
57 | border: 2rem solid #e75c54;
58 | border-left-color: #76be35;
59 | border-bottom-color: #76be35;
60 | }
61 |
62 |
63 |
64 |
