");return n.inlineElement=r,r}return t.updateStatus("ready"),t._parseMarkup(i,{},n),i}}});var F,H="ajax",L=function(){F&&i.removeClass(F)},A=function(){L(),t.req&&t.req.abort()};e.magnificPopup.registerModule(H,{options:{settings:null,cursor:"mfp-ajax-cur",tError:'
The content could not be loaded.'},proto:{initAjax:function(){t.types.push(H),F=t.st.ajax.cursor,x(l+"."+H,A),x("BeforeChange."+H,A)},getAjax:function(n){F&&i.addClass(F),t.updateStatus("loading");var o=e.extend({url:n.src,success:function(i,o,r){var a={data:i,xhr:r};T("ParseAjax",a),t.appendContent(e(a.data),H),n.finished=!0,L(),t._setFocus(),setTimeout(function(){t.wrap.addClass(v)},16),t.updateStatus("ready"),T("AjaxContentAdded")},error:function(){L(),n.finished=n.loadError=!0,t.updateStatus("error",t.st.ajax.tError.replace("%url%",n.src))}},t.st.ajax.settings);return t.req=e.ajax(o),""}}});var j,N=function(n){if(n.data&&void 0!==n.data.title)return n.data.title;var i=t.st.image.titleSrc;if(i){if(e.isFunction(i))return i.call(t,n);if(n.el)return n.el.attr(i)||""}return""};e.magnificPopup.registerModule("image",{options:{markup:'
',cursor:"mfp-zoom-out-cur",titleSrc:"title",verticalFit:!0,tError:'
The image could not be loaded.'},proto:{initImage:function(){var e=t.st.image,n=".image";t.types.push("image"),x(f+n,function(){"image"===t.currItem.type&&e.cursor&&i.addClass(e.cursor)}),x(l+n,function(){e.cursor&&i.removeClass(e.cursor),I.off("resize"+h)}),x("Resize"+n,t.resizeImage),t.isLowIE&&x("AfterChange",t.resizeImage)},resizeImage:function(){var e=t.currItem;if(e&&e.img&&t.st.image.verticalFit){var n=0;t.isLowIE&&(n=parseInt(e.img.css("padding-top"),10)+parseInt(e.img.css("padding-bottom"),10)),e.img.css("max-height",t.wH-n)}},_onImageHasSize:function(e){e.img&&(e.hasSize=!0,j&&clearInterval(j),e.isCheckingImgSize=!1,T("ImageHasSize",e),e.imgHidden&&(t.content&&t.content.removeClass("mfp-loading"),e.imgHidden=!1))},findImageSize:function(e){var n=0,i=e.img[0],o=function(r){j&&clearInterval(j),j=setInterval(function(){return i.naturalWidth>0?(t._onImageHasSize(e),void 0):(n>200&&clearInterval(j),n++,3===n?o(10):40===n?o(50):100===n&&o(500),void 0)},r)};o(1)},getImage:function(n,i){var o=0,r=function(){n&&(n.img[0].complete?(n.img.off(".mfploader"),n===t.currItem&&(t._onImageHasSize(n),t.updateStatus("ready")),n.hasSize=!0,n.loaded=!0,T("ImageLoadComplete")):(o++,200>o?setTimeout(r,100):a()))},a=function(){n&&(n.img.off(".mfploader"),n===t.currItem&&(t._onImageHasSize(n),t.updateStatus("error",s.tError.replace("%url%",n.src))),n.hasSize=!0,n.loaded=!0,n.loadError=!0)},s=t.st.image,l=i.find(".mfp-img");if(l.length){var c=document.createElement("img");c.className="mfp-img",n.el&&n.el.find("img").length&&(c.alt=n.el.find("img").attr("alt")),n.img=e(c).on("load.mfploader",r).on("error.mfploader",a),c.src=n.src,l.is("img")&&(n.img=n.img.clone()),c=n.img[0],c.naturalWidth>0?n.hasSize=!0:c.width||(n.hasSize=!1)}return t._parseMarkup(i,{title:N(n),img_replaceWith:n.img},n),t.resizeImage(),n.hasSize?(j&&clearInterval(j),n.loadError?(i.addClass("mfp-loading"),t.updateStatus("error",s.tError.replace("%url%",n.src))):(i.removeClass("mfp-loading"),t.updateStatus("ready")),i):(t.updateStatus("loading"),n.loading=!0,n.hasSize||(n.imgHidden=!0,i.addClass("mfp-loading"),t.findImageSize(n)),i)}}});var W,R=function(){return void 0===W&&(W=void 0!==document.createElement("p").style.MozTransform),W};e.magnificPopup.registerModule("zoom",{options:{enabled:!1,easing:"ease-in-out",duration:300,opener:function(e){return e.is("img")?e:e.find("img")}},proto:{initZoom:function(){var e,n=t.st.zoom,i=".zoom";if(n.enabled&&t.supportsTransition){var o,r,a=n.duration,s=function(e){var t=e.clone().removeAttr("style").removeAttr("class").addClass("mfp-animated-image"),i="all "+n.duration/1e3+"s "+n.easing,o={position:"fixed",zIndex:9999,left:0,top:0,"-webkit-backface-visibility":"hidden"},r="transition";return o["-webkit-"+r]=o["-moz-"+r]=o["-o-"+r]=o[r]=i,t.css(o),t},d=function(){t.content.css("visibility","visible")};x("BuildControls"+i,function(){if(t._allowZoom()){if(clearTimeout(o),t.content.css("visibility","hidden"),e=t._getItemToZoom(),!e)return d(),void 0;r=s(e),r.css(t._getOffset()),t.wrap.append(r),o=setTimeout(function(){r.css(t._getOffset(!0)),o=setTimeout(function(){d(),setTimeout(function(){r.remove(),e=r=null,T("ZoomAnimationEnded")},16)},a)},16)}}),x(c+i,function(){if(t._allowZoom()){if(clearTimeout(o),t.st.removalDelay=a,!e){if(e=t._getItemToZoom(),!e)return;r=s(e)}r.css(t._getOffset(!0)),t.wrap.append(r),t.content.css("visibility","hidden"),setTimeout(function(){r.css(t._getOffset())},16)}}),x(l+i,function(){t._allowZoom()&&(d(),r&&r.remove(),e=null)})}},_allowZoom:function(){return"image"===t.currItem.type},_getItemToZoom:function(){return t.currItem.hasSize?t.currItem.img:!1},_getOffset:function(n){var i;i=n?t.currItem.img:t.st.zoom.opener(t.currItem.el||t.currItem);var o=i.offset(),r=parseInt(i.css("padding-top"),10),a=parseInt(i.css("padding-bottom"),10);o.top-=e(window).scrollTop()-r;var s={width:i.width(),height:(b?i.innerHeight():i[0].offsetHeight)-a-r};return R()?s["-moz-transform"]=s.transform="translate("+o.left+"px,"+o.top+"px)":(s.left=o.left,s.top=o.top),s}}});var Z="iframe",q="//about:blank",D=function(e){if(t.currTemplate[Z]){var n=t.currTemplate[Z].find("iframe");n.length&&(e||(n[0].src=q),t.isIE8&&n.css("display",e?"block":"none"))}};e.magnificPopup.registerModule(Z,{options:{markup:'
',srcAction:"iframe_src",patterns:{youtube:{index:"youtube.com",id:"v=",src:"//www.youtube.com/embed/%id%?autoplay=1"},vimeo:{index:"vimeo.com/",id:"/",src:"//player.vimeo.com/video/%id%?autoplay=1"},gmaps:{index:"//maps.google.",src:"%id%&output=embed"}}},proto:{initIframe:function(){t.types.push(Z),x("BeforeChange",function(e,t,n){t!==n&&(t===Z?D():n===Z&&D(!0))}),x(l+"."+Z,function(){D()})},getIframe:function(n,i){var o=n.src,r=t.st.iframe;e.each(r.patterns,function(){return o.indexOf(this.index)>-1?(this.id&&(o="string"==typeof this.id?o.substr(o.lastIndexOf(this.id)+this.id.length,o.length):this.id.call(this,o)),o=this.src.replace("%id%",o),!1):void 0});var a={};return r.srcAction&&(a[r.srcAction]=o),t._parseMarkup(i,a,n),t.updateStatus("ready"),i}}});var K=function(e){var n=t.items.length;return e>n-1?e-n:0>e?n+e:e},Y=function(e,t,n){return e.replace(/%curr%/gi,t+1).replace(/%total%/gi,n)};e.magnificPopup.registerModule("gallery",{options:{enabled:!1,arrowMarkup:'
',preload:[0,2],navigateByImgClick:!0,arrows:!0,tPrev:"Previous (Left arrow key)",tNext:"Next (Right arrow key)",tCounter:"%curr% of %total%"},proto:{initGallery:function(){var n=t.st.gallery,i=".mfp-gallery",r=Boolean(e.fn.mfpFastClick);return t.direction=!0,n&&n.enabled?(a+=" mfp-gallery",x(f+i,function(){n.navigateByImgClick&&t.wrap.on("click"+i,".mfp-img",function(){return t.items.length>1?(t.next(),!1):void 0}),o.on("keydown"+i,function(e){37===e.keyCode?t.prev():39===e.keyCode&&t.next()})}),x("UpdateStatus"+i,function(e,n){n.text&&(n.text=Y(n.text,t.currItem.index,t.items.length))}),x(p+i,function(e,i,o,r){var a=t.items.length;o.counter=a>1?Y(n.tCounter,r.index,a):""}),x("BuildControls"+i,function(){if(t.items.length>1&&n.arrows&&!t.arrowLeft){var i=n.arrowMarkup,o=t.arrowLeft=e(i.replace(/%title%/gi,n.tPrev).replace(/%dir%/gi,"left")).addClass(y),a=t.arrowRight=e(i.replace(/%title%/gi,n.tNext).replace(/%dir%/gi,"right")).addClass(y),s=r?"mfpFastClick":"click";o[s](function(){t.prev()}),a[s](function(){t.next()}),t.isIE7&&(k("b",o[0],!1,!0),k("a",o[0],!1,!0),k("b",a[0],!1,!0),k("a",a[0],!1,!0)),t.container.append(o.add(a))}}),x(m+i,function(){t._preloadTimeout&&clearTimeout(t._preloadTimeout),t._preloadTimeout=setTimeout(function(){t.preloadNearbyImages(),t._preloadTimeout=null},16)}),x(l+i,function(){o.off(i),t.wrap.off("click"+i),t.arrowLeft&&r&&t.arrowLeft.add(t.arrowRight).destroyMfpFastClick(),t.arrowRight=t.arrowLeft=null}),void 0):!1},next:function(){t.direction=!0,t.index=K(t.index+1),t.updateItemHTML()},prev:function(){t.direction=!1,t.index=K(t.index-1),t.updateItemHTML()},goTo:function(e){t.direction=e>=t.index,t.index=e,t.updateItemHTML()},preloadNearbyImages:function(){var e,n=t.st.gallery.preload,i=Math.min(n[0],t.items.length),o=Math.min(n[1],t.items.length);for(e=1;(t.direction?o:i)>=e;e++)t._preloadItem(t.index+e);for(e=1;(t.direction?i:o)>=e;e++)t._preloadItem(t.index-e)},_preloadItem:function(n){if(n=K(n),!t.items[n].preloaded){var i=t.items[n];i.parsed||(i=t.parseEl(n)),T("LazyLoad",i),"image"===i.type&&(i.img=e('
').on("load.mfploader",function(){i.hasSize=!0}).on("error.mfploader",function(){i.hasSize=!0,i.loadError=!0,T("LazyLoadError",i)}).attr("src",i.src)),i.preloaded=!0}}}});var U="retina";e.magnificPopup.registerModule(U,{options:{replaceSrc:function(e){return e.src.replace(/\.\w+$/,function(e){return"@2x"+e})},ratio:1},proto:{initRetina:function(){if(window.devicePixelRatio>1){var e=t.st.retina,n=e.ratio;n=isNaN(n)?n():n,n>1&&(x("ImageHasSize."+U,function(e,t){t.img.css({"max-width":t.img[0].naturalWidth/n,width:"100%"})}),x("ElementParse."+U,function(t,i){i.src=e.replaceSrc(i,n)}))}}}}),function(){var t=1e3,n="ontouchstart"in window,i=function(){I.off("touchmove"+r+" touchend"+r)},o="mfpFastClick",r="."+o;e.fn.mfpFastClick=function(o){return e(this).each(function(){var a,s=e(this);if(n){var l,c,d,u,p,f;s.on("touchstart"+r,function(e){u=!1,f=1,p=e.originalEvent?e.originalEvent.touches[0]:e.touches[0],c=p.clientX,d=p.clientY,I.on("touchmove"+r,function(e){p=e.originalEvent?e.originalEvent.touches:e.touches,f=p.length,p=p[0],(Math.abs(p.clientX-c)>10||Math.abs(p.clientY-d)>10)&&(u=!0,i())}).on("touchend"+r,function(e){i(),u||f>1||(a=!0,e.preventDefault(),clearTimeout(l),l=setTimeout(function(){a=!1},t),o())})})}s.on("click"+r,function(){a||o()})})},e.fn.destroyMfpFastClick=function(){e(this).off("touchstart"+r+" click"+r),n&&I.off("touchmove"+r+" touchend"+r)}}(),_()});
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/data/magnific-popup.min.css:
--------------------------------------------------------------------------------
1 | .mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:.8;filter:alpha(opacity=80)}.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-preloader a:hover{color:#fff}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;filter:alpha(opacity=65);padding:0 0 18px 10px;color:#fff;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1;filter:alpha(opacity=100)}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px;white-space:nowrap}.mfp-arrow{position:absolute;opacity:.65;filter:alpha(opacity=65);margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1;filter:alpha(opacity=100)}.mfp-arrow .mfp-a,.mfp-arrow .mfp-b,.mfp-arrow:after,.mfp-arrow:before{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow .mfp-a,.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow .mfp-b,.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left .mfp-a,.mfp-arrow-left:after{border-right:17px solid #fff;margin-left:31px}.mfp-arrow-left .mfp-b,.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3f3f3f}.mfp-arrow-right{right:0}.mfp-arrow-right .mfp-a,.mfp-arrow-right:after{border-left:17px solid #fff;margin-left:39px}.mfp-arrow-right .mfp-b,.mfp-arrow-right:before{border-left:27px solid #3f3f3f}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,.6);background:#000}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure{line-height:0}.mfp-figure:after{content:'';position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,.6);background:#444}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}.mfp-image-holder .mfp-content{max-width:100%}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(0.75);transform:scale(0.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}.mfp-ie7 .mfp-img{padding:0}.mfp-ie7 .mfp-bottom-bar{width:600px;left:50%;margin-left:-300px;margin-top:5px;padding-bottom:5px}.mfp-ie7 .mfp-container{padding:0}.mfp-ie7 .mfp-content{padding-top:44px}.mfp-ie7 .mfp-close{top:0;right:0;padding-top:0}
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/data/main.js:
--------------------------------------------------------------------------------
1 | /*====================================================
2 | TABLE OF CONTENT
3 | 1. function declearetion
4 | 2. Initialization
5 | ====================================================*/
6 |
7 | /*===========================
8 | 1. function declearetion
9 | ==========================*/
10 | var themeApp = {
11 | featuredMedia: function(){
12 | $(".post").each(function() {
13 | var thiseliment = $(this);
14 | var media_wrapper = $(this).find('featured');
15 | var media_content_image = media_wrapper.find($('img'));
16 | var media_content_embeded = media_wrapper.find('iframe');
17 | if (media_content_image.length > 0) {
18 | $(media_content_image).insertAfter(thiseliment.find('.post-head')).wrap("
");
19 | thiseliment.addClass('post-type-image');
20 | media_wrapper.remove();
21 | }
22 | else if (media_content_embeded.length > 0) {
23 | $(media_content_embeded).insertAfter(thiseliment.find('.post-head')).wrap("
");
24 | thiseliment.addClass('post-type-embeded');
25 | }
26 | });
27 | },
28 | responsiveIframe: function() {
29 | $('.post').fitVids();
30 | },
31 | sidebarConfig:function() {
32 | if(sidebar_left == true) {
33 | $('.main-content').addClass('col-md-push-4');
34 | $('.sidebar').addClass('col-md-pull-8');
35 | }
36 | },
37 | recentPost:function() {
38 | var feed_url = "/rss/";
39 | var code = String('');
40 | $.get(feed_url, function(data) {
41 | $(data).find('item').slice(0,recent_post_count).each(function(){
42 | var full = $(this).find('description').text();
43 | var content = $(this).contentSnippet;
44 | var link = $(this).find('link').text();
45 | var title = $(this).find('title').text();
46 | var published_date = $(this).find('pubDate').text();
47 | function format_date (dt) {
48 | var d = new Date(dt);
49 | var month_name = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
50 | var month = month_name[d.getMonth()];
51 | var date = d.getDate();
52 | var year = d.getFullYear();
53 | var formatted_dt = month+' '+date+','+' '+year;
54 | return formatted_dt;
55 | }
56 | code += '
';
57 | code += '
' + title + ' ' + format_date(published_date) + '
';
58 | code += '
';
59 | })
60 | $(".recent-post").html(code);
61 | });
62 | },
63 | highlighter: function() {
64 | $('pre code').each(function(i, block) {
65 | hljs.highlightBlock(block);
66 | });
67 | },
68 | backToTop: function() {
69 | $(window).scroll(function(){
70 | if ($(this).scrollTop() > 100) {
71 | $('#back-to-top').fadeIn();
72 | } else {
73 | $('#back-to-top').fadeOut();
74 | }
75 | });
76 | $('#back-to-top').on('click', function(e){
77 | e.preventDefault();
78 | $('html, body').animate({scrollTop : 0},1000);
79 | return false;
80 | });
81 | },
82 | init: function() {
83 | themeApp.featuredMedia();
84 | themeApp.responsiveIframe();
85 | // themeApp.sidebarConfig();
86 | // themeApp.recentPost();
87 | themeApp.highlighter();
88 | themeApp.backToTop();
89 | }
90 | }
91 |
92 | /*===========================
93 | 2. Initialization
94 | ==========================*/
95 | $(document).ready(function(){
96 | themeApp.init();
97 | });
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/data/monokai_sublime.min.css:
--------------------------------------------------------------------------------
1 | .hljs{display:block;overflow-x:auto;padding:0.5em;background:#23241f;-webkit-text-size-adjust:none}.hljs,.hljs-tag,.css .hljs-rule,.css .hljs-value,.aspectj .hljs-function,.css .hljs-function .hljs-preprocessor,.hljs-pragma{color:#f8f8f2}.hljs-strongemphasis,.hljs-strong,.hljs-emphasis{color:#a8a8a2}.hljs-bullet,.hljs-blockquote,.hljs-horizontal_rule,.hljs-number,.hljs-regexp,.alias .hljs-keyword,.hljs-literal,.hljs-hexcolor{color:#ae81ff}.hljs-tag .hljs-value,.hljs-code,.hljs-title,.css .hljs-class,.hljs-class .hljs-title:last-child{color:#a6e22e}.hljs-link_url{font-size:80%}.hljs-strong,.hljs-strongemphasis{font-weight:bold}.hljs-emphasis,.hljs-strongemphasis,.hljs-class .hljs-title:last-child,.hljs-typename{font-style:italic}.hljs-keyword,.ruby .hljs-class .hljs-keyword:first-child,.ruby .hljs-function .hljs-keyword,.hljs-function,.hljs-change,.hljs-winutils,.hljs-flow,.nginx .hljs-title,.tex .hljs-special,.hljs-header,.hljs-attribute,.hljs-symbol,.hljs-symbol .hljs-string,.hljs-tag .hljs-title,.hljs-value,.alias .hljs-keyword:first-child,.css .hljs-tag,.css .unit,.css .hljs-important{color:#f92672}.hljs-function .hljs-keyword,.hljs-class .hljs-keyword:first-child,.hljs-aspect .hljs-keyword:first-child,.hljs-constant,.hljs-typename,.hljs-name,.css .hljs-attribute{color:#66d9ef}.hljs-variable,.hljs-params,.hljs-class .hljs-title,.hljs-aspect .hljs-title{color:#f8f8f2}.hljs-string,.css .hljs-id,.hljs-subst,.hljs-type,.ruby .hljs-class .hljs-parent,.hljs-built_in,.django .hljs-template_tag,.django .hljs-variable,.smalltalk .hljs-class,.django .hljs-filter .hljs-argument,.smalltalk .hljs-localvars,.smalltalk .hljs-array,.hljs-attr_selector,.hljs-pseudo,.hljs-addition,.hljs-stream,.hljs-envvar,.apache .hljs-tag,.apache .hljs-cbracket,.tex .hljs-command,.hljs-prompt,.hljs-link_label,.hljs-link_url{color:#e6db74}.hljs-comment,.hljs-javadoc,.hljs-annotation,.hljs-decorator,.hljs-pi,.hljs-doctype,.hljs-deletion,.hljs-shebang,.apache .hljs-sqbracket,.tex .hljs-formula{color:#75715e}.coffeescript .javascript,.javascript .xml,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata,.xml .php,.php .xml{opacity:0.5}
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/data/screen.css:
--------------------------------------------------------------------------------
1 | /*====================================================
2 | Importing bootstrap less files
3 | ====================================================*/
4 | /*====================================================
5 | COLOR VARIABLE FOR THEME
6 | ====================================================*/
7 | /* common */
8 | /*====================================================
9 | common styles
10 | ====================================================*/
11 | html,
12 | body {
13 | color: #505050;
14 | line-height: 1.75em;
15 | background: #ebebeb;
16 | position: relative;
17 | font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
18 | }
19 | h1,
20 | h2,
21 | h3,
22 | h4,
23 | h5,
24 | h6 {
25 | font-weight: 400;
26 | color: #303030;
27 | }
28 | h1 {
29 | font-size: 3em;
30 | }
31 | h2 {
32 | font-size: 2.5em;
33 | }
34 | h3 {
35 | font-size: 2em;
36 | }
37 | h4 {
38 | font-size: 1.5em;
39 | }
40 | h5 {
41 | font-size: 1em;
42 | }
43 | h6 {
44 | font-size: 0.75em;
45 | }
46 | a {
47 | color: #e67e22;
48 | outline: none;
49 | }
50 | a:hover {
51 | color: #e67e22;
52 | }
53 | a:active,
54 | a:focus,
55 | a img {
56 | outline: none;
57 | }
58 | .btn {
59 | padding: 7px 14px;
60 | border-radius: 2px;
61 | }
62 | .btn-default {
63 | border: 1px solid #e67e22;
64 | background: #e67e22;
65 | color: #ffffff;
66 | -webkit-transition: all 0.2s ease-in-out;
67 | -o-transition: all 0.2s ease-in-out;
68 | transition: all 0.2s ease-in-out;
69 | }
70 | .btn-default:hover {
71 | border: 1px solid #303030;
72 | background: #303030;
73 | color: #ffffff;
74 | }
75 | .btn-default:focus {
76 | outline: none;
77 | }
78 | .btn-default[disabled] {
79 | border: 1px solid #303030;
80 | background: #303030;
81 | color: #ffffff;
82 | }
83 | input[type="search"],
84 | input[type="text"],
85 | input[type="url"],
86 | input[type="email"],
87 | textarea {
88 | padding: 7px 7px;
89 | border: 1px solid #ebebeb;
90 | border-radius: 2px;
91 | -webkit-transition: all 0.2s;
92 | -o-transition: all 0.2s;
93 | transition: all 0.2s;
94 | }
95 | input[type="search"]:focus,
96 | input[type="text"]:focus,
97 | input[type="url"]:focus,
98 | input[type="email"]:focus,
99 | textarea:focus {
100 | border: 1px solid #e67e22;
101 | outline: none;
102 | }
103 | blockquote {
104 | border-left: 4px solid #e67e22;
105 | }
106 | pre {
107 | padding: 0;
108 | background: none;
109 | border: none;
110 | }
111 | ::-moz-selection {
112 | color: #ffffff;
113 | background: #e67e22;
114 | text-shadow: none;
115 | }
116 | ::selection {
117 | color: #ffffff;
118 | background: #e67e22;
119 | text-shadow: none;
120 | }
121 | /* header */
122 | /*====================================================
123 | header
124 | ====================================================*/
125 | .main-header {
126 | text-align: center;
127 | padding: 42px 0;
128 | background: #ffffff;
129 | }
130 | .main-header .branding {
131 | font-size: 3.5em;
132 | color: #303030;
133 | }
134 | .main-header .branding:hover {
135 | text-decoration: none;
136 | }
137 | .main-header .branding img {
138 | max-width: 100%;
139 | }
140 | .home-template .main-header {
141 | padding-top: 62px;
142 | padding-bottom: 62px;
143 | background-repeat: no-repeat;
144 | background-position: center 20%;
145 | -webkit-background-size: cover;
146 | background-size: cover;
147 | }
148 | /* main-navigation */
149 | .main-navigation {
150 | text-align: center;
151 | background: #ffffff;
152 | border-top: 1px solid #ebebeb;
153 | margin-bottom: 35px;
154 | border-bottom: 2px solid #e1e1e1;
155 | }
156 | .main-navigation .menu {
157 | padding: 0;
158 | margin: 0;
159 | }
160 | .main-navigation .menu li {
161 | list-style: none;
162 | display: inline-block;
163 | position: relative;
164 | }
165 | .main-navigation .menu li.nav-current {
166 | border-bottom: 2px solid #e67e22;
167 | margin-bottom: -2px;
168 | }
169 | .main-navigation .menu li a {
170 | color: #505050;
171 | line-height: 4em;
172 | display: block;
173 | padding: 0 21px;
174 | }
175 | .main-navigation .menu li:hover > a {
176 | color: #e67e22;
177 | text-decoration: none;
178 | }
179 | .main-navigation .menu li ul {
180 | visibility: hidden;
181 | background: #ffffff;
182 | text-align: left;
183 | padding: 7px 0px;
184 | margin: 0;
185 | position: absolute;
186 | left: 0;
187 | top: 120%;
188 | width: 200px;
189 | z-index: 999;
190 | opacity: 0;
191 | filter: alpha(opacity=0);
192 | -webkit-transition: all 0.2s ease;
193 | -o-transition: all 0.2s ease;
194 | transition: all 0.2s ease;
195 | }
196 | .main-navigation .menu li ul li {
197 | display: block;
198 | margin: 0;
199 | }
200 | .main-navigation .menu li ul li a {
201 | line-height: 2.5em;
202 | color: #505050;
203 | }
204 | .main-navigation .menu li ul:hover > a {
205 | color: #e67e22;
206 | }
207 | .main-navigation .menu li:hover ul {
208 | visibility: visible;
209 | opacity: 1;
210 | filter: alpha(opacity=100);
211 | top: 100%;
212 | }
213 | @media (max-width: 767px) {
214 | .main-navigation {
215 | text-align: left;
216 | }
217 | .main-navigation .menu li {
218 | display: block;
219 | }
220 | .main-navigation .menu li:hover > a {
221 | color: #e67e22;
222 | text-decoration: none;
223 | }
224 | .main-navigation .menu li ul {
225 | visibility: visible;
226 | padding: 0px 0px 0px 20px;
227 | margin: 0;
228 | position: relative;
229 | top: 0;
230 | width: 100%;
231 | opacity: 1;
232 | filter: alpha(opacity=100);
233 | }
234 | }
235 | /* navbar */
236 | .navbar-header {
237 | text-align: center;
238 | }
239 | .navbar-header i {
240 | height: 56px;
241 | line-height: 56px;
242 | font-size: 2em;
243 | cursor: pointer;
244 | }
245 | @media (min-width: 768px) {
246 | .nav-toggle-button {
247 | display: none;
248 | }
249 | }
250 | /* post */
251 | /*====================================================
252 | main post area
253 | ====================================================*/
254 | .post {
255 | padding: 35px;
256 | background: #ffffff;
257 | margin-bottom: 35px;
258 | position: relative;
259 | overflow: hidden;
260 | }
261 | .post .featured {
262 | position: absolute;
263 | background: #e67e22;
264 | color: #ffffff;
265 | text-align: center;
266 | top: -12px;
267 | right: -32px;
268 | width: 80px;
269 | height: 40px;
270 | line-height: 54px;
271 | -webkit-transform: rotate(45deg);
272 | -ms-transform: rotate(45deg);
273 | -o-transform: rotate(45deg);
274 | transform: rotate(45deg);
275 | }
276 | .post .featured i {
277 | -webkit-transform: rotate(-45deg);
278 | -ms-transform: rotate(-45deg);
279 | -o-transform: rotate(-45deg);
280 | transform: rotate(-45deg);
281 | }
282 | .post .post-head {
283 | text-align: center;
284 | }
285 | .post .post-head .post-title {
286 | margin: 0;
287 | font-size: 2.5em;
288 | line-height: 1em;
289 | }
290 | .post .post-head .post-title a {
291 | color: #303030;
292 | }
293 | .post .post-head .post-title a:hover,
294 | .post .post-head .post-title a:focus {
295 | text-decoration: none;
296 | }
297 | .post .post-head .post-meta {
298 | color: #959595;
299 | margin: 14px 0 0px;
300 | }
301 | .post .post-head .post-meta span {
302 | margin: 0px 7px;
303 | white-space: nowrap;
304 | }
305 | .post .featured-media {
306 | margin-top: 30px;
307 | overflow: hidden;
308 | }
309 | .post .featured-media img {
310 | width: 100%;
311 | }
312 | .post .post-content {
313 | margin: 30px 0;
314 | }
315 | .post .post-footer {
316 | margin-top: 30px;
317 | border-top: 1px solid #ebebeb;
318 | padding: 21px 0 0;
319 | }
320 | .post .post-footer .tag-list {
321 | color: #959595;
322 | line-height: 28px;
323 | }
324 | .post .post-footer .tag-list a {
325 | color: #959595;
326 | margin-left: 7px;
327 | }
328 | .post .post-footer .tag-list a:hover {
329 | color: #e67e22;
330 | }
331 | /* post content */
332 | /*====================================================
333 | main post content
334 | ====================================================*/
335 | .post-content {
336 | font: 400 18px/1.62 "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
337 | color: #444443;
338 | }
339 | .post-content h1,
340 | .post-content h2,
341 | .post-content h3,
342 | .post-content h4,
343 | .post-content h5,
344 | .post-content h6 {
345 | font-family: "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", "SimSun", sans-serif;
346 | color: #222223;
347 | }
348 | .post-content h1 {
349 | font-size: 1.8em;
350 | margin: 0.67em 0;
351 | }
352 | .post-content > h1 {
353 | margin-top: 0;
354 | font-size: 2em;
355 | }
356 | .post-content h2 {
357 | font-size: 1.5em;
358 | margin: 0.83em 0;
359 | }
360 | .post-content h3 {
361 | font-size: 1.17em;
362 | margin: 1em 0;
363 | }
364 | .post-content h4,
365 | .post-content h5,
366 | .post-content h6 {
367 | font-size: 1em;
368 | margin: 1.6em 0 1em 0;
369 | }
370 | .post-content h6 {
371 | font-weight: 500;
372 | }
373 | .post-content p {
374 | margin-top: 0;
375 | margin-bottom: 1.46em;
376 | }
377 | .post-content a {
378 | word-wrap: break-word;
379 | -moz-text-decoration-color: rgba(0, 0, 0, 0.4);
380 | text-decoration-color: rgba(0, 0, 0, 0.4);
381 | }
382 | .post-content a:hover {
383 | -moz-text-decoration-color: rgba(0, 0, 0, 0.6);
384 | text-decoration-color: rgba(0, 0, 0, 0.6);
385 | }
386 | .post-content a img {
387 | /* Remove border on IE */
388 | border: none;
389 | }
390 | .post-content strong,
391 | .post-content b {
392 | font-weight: 700;
393 | color: #222223;
394 | }
395 | .post-content em,
396 | .post-content i {
397 | font-style: italic;
398 | color: #222223;
399 | }
400 | .post-content img {
401 | max-width: 100%;
402 | height: auto;
403 | margin: 0.2em 0;
404 | }
405 | .post-content figure {
406 | position: relative;
407 | clear: both;
408 | outline: 0;
409 | margin: 10px 0 30px;
410 | padding: 0;
411 | min-height: 100px;
412 | }
413 | .post-content figure img {
414 | display: block;
415 | max-width: 100%;
416 | margin: auto auto 4px;
417 | -moz-box-sizing: border-box;
418 | -webkit-box-sizing: border-box;
419 | box-sizing: border-box;
420 | }
421 | .post-content figure figcaption {
422 | position: relative;
423 | width: 100%;
424 | text-align: center;
425 | left: 0;
426 | margin-top: 10px;
427 | font-weight: 400;
428 | font-size: 14px;
429 | color: #666665;
430 | }
431 | .post-content figure figcaption a {
432 | text-decoration: none;
433 | color: #666665;
434 | }
435 | .post-content hr {
436 | display: block;
437 | width: 50%;
438 | height: 1px;
439 | border: 0 none;
440 | border-top: #dededc 1px solid;
441 | margin: 3.2em auto;
442 | padding: 0;
443 | }
444 | .post-content blockquote {
445 | margin: 0 0 1.64em 0;
446 | border-left: 3px solid #e67e22;
447 | padding-left: 12px;
448 | color: #666664;
449 | }
450 | .post-content blockquote a {
451 | color: #666664;
452 | }
453 | .post-content ul,
454 | .post-content ol {
455 | margin: 0 0 24px 6px;
456 | padding-left: 16px;
457 | }
458 | .post-content ul {
459 | list-style-type: square;
460 | }
461 | .post-content ol {
462 | list-style-type: decimal;
463 | }
464 | .post-content li {
465 | margin-bottom: 0.2em;
466 | }
467 | .post-content li ul,
468 | .post-content li ol {
469 | margin-top: 0;
470 | margin-bottom: 0;
471 | margin-left: 14px;
472 | }
473 | .post-content li ul {
474 | list-style-type: disc;
475 | }
476 | .post-content li ul ul {
477 | list-style-type: circle;
478 | }
479 | .post-content li p {
480 | margin: 0.4em 0 0.6em;
481 | }
482 | .post-content .unstyled {
483 | list-style-type: none;
484 | margin: 0;
485 | padding: 0;
486 | }
487 | .post-content code,
488 | .post-content tt {
489 | color: #808080;
490 | font-size: 0.96em;
491 | background-color: #f9f9f7;
492 | padding: 1px 2px;
493 | border: 1px solid #dadada;
494 | border-radius: 3px;
495 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
496 | word-wrap: break-word;
497 | }
498 | .post-content pre {
499 | margin: 1.64em 0;
500 | padding: 7px;
501 | border: none;
502 | border-left: 3px solid #dadada;
503 | padding-left: 10px;
504 | overflow: auto;
505 | line-height: 1.5;
506 | font-size: 0.96em;
507 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
508 | color: #4c4c4c;
509 | background-color: #f9f9f7;
510 | }
511 | .post-content pre code,
512 | .post-content pre tt {
513 | color: #4c4c4c;
514 | border: none;
515 | background: none;
516 | padding: 0;
517 | }
518 | .post-content table {
519 | width: 100%;
520 | max-width: 100%;
521 | border-collapse: collapse;
522 | border-spacing: 0;
523 | margin-bottom: 1.5em;
524 | font-size: 0.96em;
525 | -moz-box-sizing: border-box;
526 | -webkit-box-sizing: border-box;
527 | box-sizing: border-box;
528 | }
529 | .post-content th,
530 | .post-content td {
531 | text-align: left;
532 | padding: 4px 8px 4px 10px;
533 | border: 1px solid #dadada;
534 | }
535 | .post-content td {
536 | vertical-align: top;
537 | }
538 | .post-content tr:nth-child(even) {
539 | background-color: #efefee;
540 | }
541 | .post-content iframe {
542 | display: block;
543 | max-width: 100%;
544 | margin-bottom: 30px;
545 | }
546 | .post-content figure iframe {
547 | margin: auto;
548 | }
549 | .post-content table pre {
550 | margin: 0;
551 | padding: 0;
552 | border: none;
553 | background: none;
554 | }
555 | @media (min-width: 1100px) {
556 | .post-content blockquote {
557 | margin-left: -24px;
558 | padding-left: 20px;
559 | border-width: 4px;
560 | }
561 | .post-content blockquote blockquote {
562 | margin-left: 0;
563 | }
564 | .post-content figure img {
565 | margin: 0 0 4px;
566 | }
567 | .post-content figure figcaption {
568 | position: absolute;
569 | left: -172px;
570 | width: 150px;
571 | top: 0;
572 | text-align: right;
573 | margin-top: 0;
574 | }
575 | .post-content figure figcaption:before {
576 | width: 25%;
577 | margin-left: 75%;
578 | border-top: 1px solid #dededc;
579 | display: block;
580 | content: "";
581 | margin-bottom: 10px;
582 | }
583 | }
584 | .windows .post-content {
585 | font-size: 16px;
586 | font-family: "Georgia", "SimSun", sans-serif;
587 | }
588 | /* pagination */
589 | /*====================================================
590 | pagination
591 | ====================================================*/
592 | .pagination {
593 | margin: 0 0 35px;
594 | text-align: center;
595 | display: block;
596 | }
597 | .pagination a {
598 | text-align: center;
599 | display: inline-block;
600 | color: #ffffff;
601 | background: #e67e22;
602 | border-radius: 2px;
603 | }
604 | .pagination a a:hover {
605 | background: #505050;
606 | text-decoration: none;
607 | color: #ffffff;
608 | }
609 | .pagination a i {
610 | width: 36px;
611 | height: 36px;
612 | line-height: 36px;
613 | }
614 | .pagination .page-number {
615 | background: #e67e22;
616 | color: #ffffff;
617 | margin: 0 3px;
618 | display: inline-block;
619 | line-height: 36px;
620 | padding: 0 14px;
621 | border-radius: 2px;
622 | }
623 | /* author */
624 | /*====================================================
625 | about author and comment
626 | ====================================================*/
627 | .about-author {
628 | background: #ffffff;
629 | padding: 35px;
630 | margin-bottom: 35px;
631 | }
632 | .about-author .avatar {
633 | width: 100px;
634 | height: 100px;
635 | border-radius: 50%;
636 | }
637 | .about-author .details {
638 | margin-left: 114px;
639 | }
640 | .about-author .author {
641 | font-size: 1.5em;
642 | margin-bottom: 7px;
643 | }
644 | .about-author .author a:hover {
645 | text-decoration: none;
646 | }
647 | .about-author .meta-info {
648 | color: #959595;
649 | margin-bottom: 7px;
650 | }
651 | .about-author .meta-info span {
652 | margin-right: 14px;
653 | white-space: nowrap;
654 | }
655 | .about-author .meta-info span i {
656 | margin-right: 7px;
657 | }
658 | /* prev and next link */
659 | .prev-next-wrap {
660 | margin-bottom: 35px;
661 | text-align: center;
662 | }
663 | @media (max-width: 767px) {
664 | .prev-next-wrap a {
665 | display: block;
666 | }
667 | }
668 | /* sidebar */
669 | /*====================================================
670 | sidebar
671 | ====================================================*/
672 | .sidebar .widget {
673 | background: #ffffff;
674 | padding: 21px 30px;
675 | }
676 | .main-footer .widget {
677 | padding: 0px 30px;
678 | }
679 | .widget {
680 | margin-bottom: 35px;
681 | }
682 | .widget .title {
683 | margin-top: 0;
684 | padding-bottom: 7px;
685 | border-bottom: 1px solid #ebebeb;
686 | margin-bottom: 21px;
687 | position: relative;
688 | }
689 | .widget .title:after {
690 | content: "";
691 | width: 90px;
692 | height: 1px;
693 | background: #e67e22;
694 | position: absolute;
695 | left: 0;
696 | bottom: -1px;
697 | }
698 | .widget .recent-post .recent-single-post {
699 | border-bottom: 1px dashed #ebebeb;
700 | padding-bottom: 14px;
701 | margin-bottom: 14px;
702 | }
703 | .widget .recent-post .recent-single-post:last-child {
704 | margin-bottom: 0;
705 | }
706 | .widget .recent-post .recent-single-post .post-title {
707 | color: #505050;
708 | -webkit-transition: all 0.2s ease;
709 | -o-transition: all 0.2s ease;
710 | transition: all 0.2s ease;
711 | }
712 | .widget .recent-post .recent-single-post .post-title:hover {
713 | color: #e67e22;
714 | text-decoration: none;
715 | }
716 | .widget .recent-post .recent-single-post .date {
717 | color: #959595;
718 | }
719 | .widget .tag-cloud a {
720 | border: 1px solid #ebebeb;
721 | padding: 2px 7px;
722 | color: #959595;
723 | line-height: 1.5em;
724 | display: inline-block;
725 | margin: 0 7px 7px 0;
726 | -webkit-transition: all 0.2s ease;
727 | -o-transition: all 0.2s ease;
728 | transition: all 0.2s ease;
729 | }
730 | .widget .tag-cloud a:hover {
731 | color: #ffffff;
732 | background: #e67e22;
733 | border: 1px solid #e67e22;
734 | text-decoration: none;
735 | }
736 | .widget .social {
737 | padding: 0;
738 | margin: 0;
739 | }
740 | .widget .social li {
741 | display: inline-block;
742 | margin: 0 2px 5px 0;
743 | text-align: center;
744 | }
745 | .widget .social li a i {
746 | width: 35px;
747 | height: 35px;
748 | line-height: 35px;
749 | border: 1px solid #ebebeb;
750 | color: #959595;
751 | -webkit-transition: all 0.2s;
752 | -o-transition: all 0.2s;
753 | transition: all 0.2s;
754 | }
755 | .widget .social li:hover i {
756 | color: #ffffff;
757 | background: #e67e22;
758 | border: 1px solid #e67e22;
759 | }
760 | .widget .newsletter .input-group {
761 | margin-bottom: 10px;
762 | display: block;
763 | }
764 | .widget .newsletter .input-group .email,
765 | .widget .newsletter .input-group btn {
766 | width: 100%;
767 | }
768 | .widget .ad {
769 | text-align: center;
770 | }
771 | .widget .ad img {
772 | max-width: 100%;
773 | }
774 | /* cover*/
775 | /*====================================================
776 | Tag page & author page cover
777 | ====================================================*/
778 | .cover {
779 | text-align: center;
780 | background: #ffffff;
781 | padding: 35px;
782 | margin-bottom: 35px;
783 | }
784 | .cover .tag-name {
785 | margin-top: 0;
786 | }
787 | .cover .post-count {
788 | margin-top: 7px;
789 | color: #959595;
790 | }
791 | .cover .avatar {
792 | width: 100px;
793 | height: 100px;
794 | border-radius: 50%;
795 | }
796 | .cover .meta-info {
797 | color: #959595;
798 | }
799 | .cover .meta-info span {
800 | margin: 0 7px;
801 | }
802 | .cover .meta-info span i {
803 | margin-right: 7px;
804 | }
805 | .cover .bio {
806 | margin-top: 7px;
807 | }
808 | /* footer */
809 | /*====================================================
810 | footer
811 | ====================================================*/
812 | .main-footer {
813 | background: #202020;
814 | padding: 35px 0 0;
815 | color: #959595;
816 | }
817 | .main-footer .widget .title {
818 | color: #ffffff;
819 | border-bottom: 1px solid #303030;
820 | }
821 | .main-footer .widget .tag-cloud a {
822 | border: 1px solid #303030;
823 | }
824 | .main-footer .widget .tag-cloud a:hover {
825 | border: 1px solid #e67e22;
826 | }
827 | .main-footer .widget .friend-links a {
828 | border: none;
829 | }
830 | .main-footer .widget .friend-links a:hover {
831 | border: none;
832 | }
833 | .main-footer .widget .friend-links hr {
834 | margin: 1em 0;
835 | border-top: 1px dashed #303030;
836 | }
837 | .main-footer .widget .recent-post .recent-single-post {
838 | border-bottom: 1px dashed #303030;
839 | }
840 | .main-footer .widget .recent-post .recent-single-post .post-title {
841 | color: #959595;
842 | }
843 | .main-footer .widget .recent-post .recent-single-post .post-title:hover {
844 | color: #e67e22;
845 | }
846 | .main-footer .widget .recent-post .recent-single-post .date {
847 | color: #505050;
848 | }
849 | .copyright {
850 | background: #111;
851 | font-size: 13px;
852 | text-align: center;
853 | color: #555555;
854 | padding-top: 28px;
855 | padding-bottom: 28px;
856 | border-top: 1px solid #303030;
857 | }
858 | .copyright span {
859 | margin: 0 .5em;
860 | }
861 | .copyright a {
862 | color: #555555;
863 | }
864 | #back-to-top {
865 | position: fixed;
866 | right: 10px;
867 | bottom: 10px;
868 | background: rgba(230, 126, 34, 0.6);
869 | color: #ffffff;
870 | text-align: center;
871 | border-radius: 2px;
872 | z-index: 1;
873 | display: none;
874 | }
875 | #back-to-top:hover {
876 | background: #e67e22;
877 | }
878 | #back-to-top i {
879 | width: 30px;
880 | height: 30px;
881 | line-height: 30px;
882 | }
883 |
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/data/share.js:
--------------------------------------------------------------------------------
1 | window._bd_share_main?window._bd_share_is_recently_loaded=!0:(window._bd_share_is_recently_loaded=!1,window._bd_share_main={version:"2.0",jscfg:{domain:{staticUrl:"http://bdimg.share.baidu.com/"}}}),!window._bd_share_is_recently_loaded&&(window._bd_share_main.F=window._bd_share_main.F||function(e,t){function r(e,t){if(e instanceof Array){for(var n=0,r=e.length;n
1?(this.svnMod=n[0],this.name=n[1]):this.name=t}this.svnMod||(this.svnMod=this.path.split("/js/")[0].substr(1)),this.type="js",this.getKey=function(){return this.svnMod+":"+this.name},this._info={}}function o(e,t){var n=t=="css",r=document.createElement(n?"link":"script");return r}function u(t,n,r,i){function c(){c.isCalled||(c.isCalled=!0,clearTimeout(l),r&&r())}var s=o(t,n);s.nodeName==="SCRIPT"?a(s,c):f(s,c);var l=setTimeout(function(){throw new Error("load "+n+" timeout : "+t)},e._loadScriptTimeout||1e4),h=document.getElementsByTagName("head")[0];n=="css"?(s.rel="stylesheet",s.href=t,h.appendChild(s)):(s.type="text/javascript",s.src=t,h.insertBefore(s,h.firstChild))}function a(e,t){e.onload=e.onerror=e.onreadystatechange=function(){if(/loaded|complete|undefined/.test(e.readyState)){e.onload=e.onerror=e.onreadystatechange=null;if(e.parentNode){e.parentNode.removeChild(e);try{if(e.clearAttributes)e.clearAttributes();else for(var n in e)delete e[n]}catch(r){}}e=undefined,t&&t()}}}function f(e,t){e.attachEvent?e.attachEvent("onload",t):setTimeout(function(){l(e,t)},0)}function l(e,t){if(t&&t.isCalled)return;var n,r=navigator.userAgent,i=~r.indexOf("AppleWebKit"),s=~r.indexOf("Opera");if(i||s)e.sheet&&(n=!0);else if(e.sheet)try{e.sheet.cssRules&&(n=!0)}catch(o){if(o.name==="SecurityError"||o.name==="NS_ERROR_DOM_SECURITY_ERR")n=!0}setTimeout(function(){n?t&&t():l(e,t)},1)}var n="api";e.each=r,i.currentPath="",i.loadedPaths={},i.loadingPaths={},i.cache={},i.paths={},i.handlers=[],i.moduleFileMap={},i.requiredPaths={},i.lazyLoadPaths={},i.services={},i.isPathsLoaded=function(e){var t=!0;return r(e,function(e){if(!(e in i.loadedPaths))return t=!1}),t},i.require=function(e,t){e.search(":")<0&&(t||(t=n,i.currentPath&&(t=i.currentPath.split("/js/")[0].substr(1))),e=t+":"+e);var r=i.get(e,i.currentPath);if(r.type=="css")return;if(r){if(!r._inited){r._inited=!0;var s,o=r.svnMod;if(s=r.fn.call(null,function(e){return i.require(e,o)},r.exports,new h(r.name,o)))r.exports=s}return r.exports}throw new Error('Module "'+e+'" not found!')},i.baseUrl=t?t[t.length-1]=="/"?t:t+"/":"/",i.getBasePath=function(e){var t,n;return(n=e.indexOf("/"))!==-1&&(t=e.slice(0,n)),t&&t in i.paths?i.paths[t]:i.baseUrl},i.getJsPath=function(t,r){if(t.charAt(0)==="."){r=r.replace(/\/[^\/]+\/[^\/]+$/,""),t.search("./")===0&&(t=t.substr(2));var s=0;t=t.replace(/^(\.\.\/)+/g,function(e){return s=e.length/3,""});while(s>0)r=r.substr(0,r.lastIndexOf("/")),s--;return r+"/"+t+"/"+t.substr(t.lastIndexOf("/")+1)+".js"}var o,u,a,f,l,c;if(t.search(":")>=0){var h=t.split(":");o=h[0],t=h[1]}else r&&(o=r.split("/")[1]);o=o||n;var p=/\.css(?:\?|$)/i.test(t);p&&e._useConfig&&i.moduleFileMap[o][t]&&(t=i.moduleFileMap[o][t]);var t=l=t,d=i.getBasePath(t);return(a=t.indexOf("/"))!==-1&&(u=t.slice(0,a),f=t.lastIndexOf("/"),l=t.slice(f+1)),u&&u in i.paths&&(t=t.slice(a+1)),c=d+o+"/js/"+t+".js",c},i.get=function(e,t){var n=i.getJsPath(e,t);return i.cache[n]?i.cache[n]:new i(n,e)},i.prototype={load:function(){i.loadingPaths[this.path]=!0;var t=this.svnMod||n,r=window._bd_share_main.jscfg.domain.staticUrl+"static/"+t+"/",o=this,u=/\.css(?:\?|$)/i.test(this.name);this.type=u?"css":"js";var a="/"+this.type+"/"+i.moduleFileMap[t][this.name];e._useConfig&&i.moduleFileMap[t][this.name]?r+=this.type+"/"+i.moduleFileMap[t][this.name]:r+=this.type+"/"+this.name+(u?"":".js");if(e._firstScreenCSS.indexOf(this.name)>0||e._useConfig&&a==e._firstScreenJS)o._loaded=!0,o.ready();else{var f=(new Date).getTime();s.create({src:r,type:this.type,loaded:function(){o._info.loadedTime=(new Date).getTime()-f,o.type=="css"&&(o._loaded=!0,o.ready())}})}},lazyLoad:function(){var e=this.name;if(i.lazyLoadPaths[this.getKey()])this.define(),delete i.lazyLoadPaths[this.getKey()];else{if(this.exist())return;i.requiredPaths[this.getKey()]=!0,this.load()}},ready:function(e,t){var n=t?this._requiredStack:this._readyStack;if(e)this._loaded?e():n.push(e);else{i.loadedPaths[this.path]=!0,delete i.loadingPaths[this.path],this._loaded=!0,i.currentPath=this.path;if(this._readyStack&&this._readyStack.length>0){this._inited=!0;var s,o=this.svnMod;this.fn&&(s=this.fn.call(null,function(e){return i.require(e,o)},this.exports,new h(this.name,o)))&&(this.exports=s),r(this._readyStack,function(e){e()}),delete this._readyStack}this._requiredStack&&this._requiredStack.length>0&&(r(this._requiredStack,function(e){e()}),delete this._requiredStack)}},define:function(){var e=this,t=this.deps,n=this.path,s=[];t||(t=this.getDependents()),t.length?(r(t,function(t){s.push(i.getJsPath(t,e.path))}),r(t,function(t){var n=i.get(t,e.path);n.ready(function(){i.isPathsLoaded(s)&&e.ready()},!0),n.lazyLoad()})):this.ready()},exist:function(){var e=this.path;return e in i.loadedPaths||e in i.loadingPaths},getDependents:function(){var e=this,t=this.fn.toString(),n=t.match(/function\s*\(([^,]*),/i),i=new RegExp("[^.]\\b"+n[1]+"\\(\\s*('|\")([^()\"']*)('|\")\\s*\\)","g"),s=t.match(i),o=[];return s&&r(s,function(e,t){o[t]=e.substr(n[1].length+3).slice(0,-2)}),o}};var s={create:function(e){var t=e.src;if(t in this._paths)return;this._paths[t]=!0,r(this._rules,function(e){t=e.call(null,t)}),u(t,e.type,e.loaded)},_paths:{},_rules:[],addPathRule:function(e){this._rules.push(e)}};e.version="1.0",e.use=function(e,t){typeof e=="string"&&(e=[e]);var n=[],s=[];r(e,function(e,t){s[t]=!1}),r(e,function(e,o){var u=i.get(e),a=u._loaded;u.ready(function(){var e=u.exports||{};e._INFO=u._info,e._INFO&&(e._INFO.isNew=!a),n[o]=e,s[o]=!0;var i=!0;r(s,function(e){if(e===!1)return i=!1}),t&&i&&t.apply(null,n)}),u.lazyLoad()})},e.module=function(e,t,n){var r=i.get(e);r.fn=t,r.deps=n,i.requiredPaths[r.getKey()]?r.define():i.lazyLoadPaths[r.getKey()]=!0},e.pathRule=function(e){s.addPathRule(e)},e._addPath=function(e,t){t.slice(-1)!=="/"&&(t+="/");if(e in i.paths)throw new Error(e+" has already in Module.paths");i.paths[e]=t};var c=n;e._setMod=function(e){c=e||n},e._fileMap=function(t,n){if(typeof t=="object")r(t,function(t,n){e._fileMap(n,t)});else{var s=c;typeof n=="string"&&(n=[n]),t=t.indexOf("js/")==1?t.substr(4):t,t=t.indexOf("css/")==1?t.substr(5):t;var o=i.moduleFileMap[s];o||(o={}),r(n,function(e){o[e]||(o[e]=t)}),i.moduleFileMap[s]=o}},e._eventMap={},e.call=function(t,n,r){var i=[];for(var s=2,o=arguments.length;s=0;r--)t[r]=this.svnMod+":"+t[r];e.use(t,n)}},e._Context=h,e.addLog=function(t,n){e.use("lib/log",function(e){e.defaultLog(t,n)})},e.fire=function(t,n,r){e.use("lib/mod_evt",function(e){e.fire(t,n,r)})},e._defService=function(e,t){if(e){var n=i.services[e];n=n||{},r(t,function(e,t){n[t]=e}),i.services[e]=n}},e.getService=function(t,n,r){var s=i.services[t];if(!s)throw new Error(t+" mod didn't define any services");var o=s[n];if(!o)throw new Error(t+" mod didn't provide service "+n);e.use(t+":"+o,r)},e}({})),!window._bd_share_is_recently_loaded&&window._bd_share_main.F.module("base/min_tangram",function(e,t){var n={};n.each=function(e,t,n){var r,i,s,o=e.length;if("function"==typeof t)for(s=0;s0?t.each(e[o],function(s,u){e[o][s]=t.extend({},r[o],n,u,i[o])}):e[o]=t.extend({},r[o],n,e[o],i[o]))}),e}var t=e.T;_bd_share_main.init=function(e){e=e||window._bd_share_config||{share:{}};if(e){var t=i(e);t.like&&r(["share/like_api","view/like_view"],t.like),t.share&&r(["share/share_api","view/share_view"],t.share),t.slide&&r(["share/slide_api","view/slide_view"],t.slide),t.selectShare&&r(["share/select_api","view/select_view"],t.selectShare),t.image&&r(["share/image_api","view/image_view"],t.image)}},window._bd_share_main._LogPoolV2=[],window._bd_share_main.n1=(new Date).getTime(),t.domready(function(){window._bd_share_main.n2=(new Date).getTime()+1e3,_bd_share_main.init(),setTimeout(function(){window._bd_share_main.F.use("trans/logger",function(e){e.nsClick(),e.back(),e.duration()})},3e3)})}),!window._bd_share_is_recently_loaded&&window._bd_share_main.F.module("component/comm_tools",function(e,t){var n=function(){var e=window.location||document.location||{};return e.href||""},r=function(e,t){var n=e.length,r="";for(var i=1;i<=t;i++){var s=Math.floor(n*Math.random());r+=e.charAt(s)}return r},i=function(){var e=(+(new Date)).toString(36),t=r("0123456789abcdefghijklmnopqrstuvwxyz",3);return e+t};t.getLinkId=i,t.getPageUrl=n}),!window._bd_share_is_recently_loaded&&window._bd_share_main.F.module("trans/trans",function(e,t){var n=e("component/comm_tools"),r=e("conf/const").URLS,i=function(){window._bd_share_main.F.use("base/tangram",function(e){var t=e.T;t.cookie.get("bdshare_firstime")==null&&t.cookie.set("bdshare_firstime",new Date*1,{path:"/",expires:(new Date).setFullYear(2022)-new Date})})},s=function(e){var t=e.bdUrl||n.getPageUrl();return t=t.replace(/\'/g,"%27").replace(/\"/g,"%22"),t},o=function(e){var t=(new Date).getTime()+3e3,r={click:1,url:s(e),uid:e.bdUid||"0",to:e.__cmd,type:"text",pic:e.bdPic||"",title:(e.bdText||document.title).substr(0,300),key:(e.bdSnsKey||{})[e.__cmd]||"",desc:e.bdDesc||"",comment:e.bdComment||"",relateUid:e.bdWbuid||"",searchPic:e.bdSearchPic||0,sign:e.bdSign||"on",l:window._bd_share_main.n1.toString(32)+window._bd_share_main.n2.toString(32)+t.toString(32),linkid:n.getLinkId(),firstime:a("bdshare_firstime")||""};switch(e.__cmd){case"copy":l(r);break;case"print":c();break;case"bdxc":h();break;case"bdysc":p(r);break;case"weixin":d(r);break;default:u(e,r)}window._bd_share_main.F.use("trans/logger",function(t){t.commit(e,r)})},u=function(e,t){var n=r.jumpUrl;e.__cmd=="mshare"?n=r.mshareUrl:e.__cmd=="mail"&&(n=r.emailUrl);var i=n+"?"+f(t);window.open(i)},a=function(e){if(e){var t=new RegExp("(^| )"+e+"=([^;]*)(;|$)"),n=t.exec(document.cookie);if(n)return decodeURIComponent(n[2]||null)}},f=function(e){var t=[];for(var n in e)t.push(encodeURIComponent(n)+"="+encodeURIComponent(e[n]));return t.join("&").replace(/%20/g,"+")},l=function(e){window._bd_share_main.F.use("base/tangram",function(t){var r=t.T;r.browser.ie?(window.clipboardData.setData("text",document.title+" "+(e.bdUrl||n.getPageUrl())),alert("\u6807\u9898\u548c\u94fe\u63a5\u590d\u5236\u6210\u529f\uff0c\u60a8\u53ef\u4ee5\u63a8\u8350\u7ed9QQ/MSN\u4e0a\u7684\u597d\u53cb\u4e86\uff01")):window.prompt("\u60a8\u4f7f\u7528\u7684\u662f\u975eIE\u6838\u5fc3\u6d4f\u89c8\u5668\uff0c\u8bf7\u6309\u4e0b Ctrl+C \u590d\u5236\u4ee3\u7801\u5230\u526a\u8d34\u677f",document.title+" "+(e.bdUrl||n.getPageUrl()))})},c=function(){window.print()},h=function(){window._bd_share_main.F.use("trans/trans_bdxc",function(e){e&&e.run()})},p=function(e){window._bd_share_main.F.use("trans/trans_bdysc",function(t){t&&t.run(e)})},d=function(e){window._bd_share_main.F.use("trans/trans_weixin",function(t){t&&t.run(e)})},v=function(e){o(e)};t.run=v,i()});
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/data/share_style0_24.css:
--------------------------------------------------------------------------------
1 | .bdshare-button-style0-24 .bds_qzone{background-position:0 -52px}.bdshare-button-style0-24 .bds_tsina{background-position:0 -104px}.bdshare-button-style0-24 .bds_renren{background-position:0 -208px}.bdshare-button-style0-24 .bds_tqq{background-position:0 -260px}.bdshare-button-style0-24 .bds_kaixin001{background-position:0 -312px}.bdshare-button-style0-24 .bds_tqf{background-position:0 -364px}.bdshare-button-style0-24 .bds_hi{background-position:0 -416px}.bdshare-button-style0-24 .bds_douban{background-position:0 -468px}.bdshare-button-style0-24 .bds_tieba{background-position:0 -728px}.bdshare-button-style0-24 .bds_hx{background-position:0 -988px}.bdshare-button-style0-24 .bds_fx{background-position:0 -1040px}.bdshare-button-style0-24 .bds_ty{background-position:0 -1196px}.bdshare-button-style0-24 .bds_fbook{background-position:0 -1352px}.bdshare-button-style0-24 .bds_twi{background-position:0 -1404px}.bdshare-button-style0-24 .bds_linkedin{background-position:0 -1664px}.bdshare-button-style0-24 .bds_meilishuo{background-position:0 -1716px}.bdshare-button-style0-24 .bds_mogujie{background-position:0 -1768px}.bdshare-button-style0-24 .bds_diandian{background-position:0 -1820px}.bdshare-button-style0-24 .bds_huaban{background-position:0 -1872px}.bdshare-button-style0-24 .bds_duitang{background-position:0 -2028px}.bdshare-button-style0-24 .bds_youdao{background-position:0 -2080px}.bdshare-button-style0-24 .bds_wealink{background-position:0 -2184px}.bdshare-button-style0-24 .bds_copy{background-position:0 -2288px}.bdshare-button-style0-24 .bds_mail{background-position:0 -2340px}.bdshare-button-style0-24 .bds_print{background-position:0 -2392px}.bdshare-button-style0-24 .bds_mshare{background-position:0 -2444px}.bdshare-button-style0-24 .bds_sqq{background-position:0 -2652px}.bdshare-button-style0-24 .bds_sdo{background-position:0 -2704px}.bdshare-button-style0-24 .bds_qingbiji{background-position:0 -2756px}.bdshare-button-style0-24 .bds_people{background-position:0 -2808px}.bdshare-button-style0-24 .bds_xinhua{background-position:0 -2912px}.bdshare-button-style0-24 .bds_yaolan{background-position:0 -2964px}.bdshare-button-style0-24 .bds_thx{background-position:0 -2496px}.bdshare-button-style0-24 .bds_bdhome{background-position:0 -156px}.bdshare-button-style0-24 .bds_bdxc{background-position:0 -2548px}.bdshare-button-style0-24 .bds_bdysc{background-position:0 -3068px}.bdshare-button-style0-24 .bds_isohu{background-position:0 -3016px}.bdshare-button-style0-24 .bds_more{background-position:0 0}.bdshare-button-style0-24 .bds_ibaidu{background-position:0 -3120px}.bdshare-button-style0-24 .bds_weixin{background-position:0 -1612px}.bdshare-button-style0-24 .bds_iguba{background-position:0 -1300px}.bdshare-button-style0-24 .bds_h163{background-position:0 -3168px}.bdshare-button-style0-24 .bds_evernotecn{background-position:0 -3228px}.bdshare-button-style0-24{zoom:1}.bdshare-button-style0-24:after{content:".";visibility:hidden;display:block;height:0;clear:both}.bdshare-button-style0-24 a,.bdshare-button-style0-24 .bds_more{float:left;font-size:18px;padding-left:25px;line-height:24px;height:24px;background-image:url(../img/share/icons_0_24.png?v=dcaa92d6.png);background-repeat:no-repeat;cursor:pointer;margin:6px 6px 6px 0}.bdshare-button-style0-24 a:hover{color:#333;opacity:.8;filter:alpha(opacity=80)}.bdshare-button-style0-24 .bds_more{color:#333;float:left}.bdshare-button-style0-24 .bds_count{color:#333;background:url(../img/share/sc.png?v=a970ff04.png) no-repeat 0 0;width:45px;height:24px;padding:0;text-align:center;margin:6px 6px 0 0}.bdshare-button-style0-24 .bds_count:hover{background-position:-44px 0}.bds_tsohu,.bds_tfh,.bds_baidu,.bds_qq,.bds_msn,.bds_sohu,.bds_qy,.bds_leho,.bds_ifeng,.bds_ff,.bds_tuita,.bds_ms,.bds_deli,.bds_s51,.bds_t163,.bds_share189,.bds_xg,.bds_s139{display:none}
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/Ghost开源博客页面自适应/fonts/FontAwesome.otf
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/Ghost开源博客页面自适应/fonts/fontawesome-webfont.eot
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/Ghost开源博客页面自适应/fonts/fontawesome-webfont.ttf
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/Ghost开源博客页面自适应/fonts/fontawesome-webfont.woff
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/Ghost开源博客页面自适应/fonts/fontawesome-webfont.woff2
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/Ghost开源博客页面自适应/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/Ghost开源博客页面自适应/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/Ghost开源博客页面自适应/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/Ghost开源博客页面自适应/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/Ghost开源博客页面自适应/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS3弹性盒和媒体查询、响应式布局
2 | ```
3 | 1、怪异盒模型的简介
4 |
5 | 2、弹性盒模型和相关概念
6 |
7 | 3、Flex容器属性(添加在父级元素上的)
8 |
9 | 4、Flex项目属性(添加在子元素上的)
10 |
11 | 5、媒体查询的概念和应用
12 |
13 | 6、Responsive web design 响应式设计布局概念
14 |
15 | 7、CSS3多列布局
16 | ```
17 | ## 一、怪异盒模型的简介
18 | ：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
95 | 默认情况，Flex项目是按文档源的流顺序排列。然而，在Flex容器中可以通过order属性来控制Flex项目的顺序源。设置或检索弹性盒模型对象的子元素出現的順序。设置或检索弹性盒的收缩比率
106 | 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。注意：flex-shrink取负值将失效。
107 | | | auto | content
109 | `设置或检索弹性盒伸缩基准值`。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。
235 | ```
236 | ###### 这段代码的几个参数解释：
237 | ```
238 | width = device-width：宽度等于当前设备的宽度
239 |
240 | initial-scale： 初始的缩放比例（默认设置为1.0）
241 |
242 | minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
243 |
244 | maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
245 |
246 | user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
247 | ```
248 |
249 | ## 常见的一些网页布局单位
250 |
251 | `px：绝对单位，页面按精确像素展示`JQuery
10 |
48 |
49 |
50 |
57 |
58 | Navigate...
59 | Download
60 | API Documentation
61 | Blog
62 | Plugins
63 | Browser Support
64 |
65 |
70 |
71 |
72 |
73 |
86 |
87 |
88 |
89 |
90 |
Lightweight Footprint
91 |
Only 32kB minified and gzipped. Can also be included as an AMD module
92 |
94 |
95 |
96 |
97 |
CSS3 Compliant
98 |
Supports CSS3 selectors to find elements as well as in style property manipulation
99 |
101 |
102 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
What is jQuery?
116 |
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
117 |
118 |
119 |
120 |
Corporate Members
121 |
122 |
123 |
125 |
126 |
128 |
129 |
131 |
132 |
134 |
135 |
136 | Support from our corporate members makes it possible for the jQuery Foundation to continue our work on our JavaScript libraries and pushing the open web forward with events and participation in the standards process. View our members page for a full list of corporate and individual members.
137 |
138 |
139 |
140 |
Other jQuery Foundation Projects
141 |
142 |
143 |
145 |
146 |
148 |
149 |
151 |
152 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
Resources
161 |
162 |
163 | jQuery Core API Documentation
165 |
166 |
167 | jQuery Learning Center
169 |
170 |
171 | jQuery Blog
173 |
174 |
175 |
176 | Contribute to jQuery
178 |
179 |
180 | About the jQuery Foundation
182 |
183 |
184 | Browse or Submit jQuery Bugs
186 |
187 |
188 |
189 |
191 |
192 |
193 |
194 |
195 |
A Brief Look
196 |
197 |
DOM Traversal and Manipulation
198 |
Get the <button> element with the class 'continue' and change its HTML to 'Next Step...'
199 |
1 $( "button.continue" ).html( "Next Step..." )
200 |
201 |
202 |
Event Handling
203 |
Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.
204 |
1 var hiddenBox = $( "button.continue" );2 $( "#button-container button" ).on( "click" , function ( event ) {3 hiddenBox.show();4 });
205 |
206 |
207 |
Ajax
208 |
Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp's html with the returned text.
209 |
1 $.ajax({2 url: "/api/getWeather" ,3 data: {4 zipcode: 97201 5 },6 success: function ( data ) {7 $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );8 }9 });
210 |
211 |
212 |
213 |
214 |
4 |
5 | Created by FontForge 20120731 at Wed May 13 13:29:58 2015
6 | By Ads
7 |
8 |
9 |
10 |
63 |
64 |
--------------------------------------------------------------------------------
/jQuery/font/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/font/iconfont.ttf
--------------------------------------------------------------------------------
/jQuery/font/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/font/iconfont.woff
--------------------------------------------------------------------------------
/jQuery/img/banner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/banner.gif
--------------------------------------------------------------------------------
/jQuery/img/book/book1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/book/book1.jpg
--------------------------------------------------------------------------------
/jQuery/img/book/book2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/book/book2.jpg
--------------------------------------------------------------------------------
/jQuery/img/book/book3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/book/book3.jpg
--------------------------------------------------------------------------------
/jQuery/img/contentText_resource_imglink.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/contentText_resource_imglink.jpg
--------------------------------------------------------------------------------
/jQuery/img/content_ico/famous.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/content_ico/famous.gif
--------------------------------------------------------------------------------
/jQuery/img/content_ico/ibm.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/content_ico/ibm.gif
--------------------------------------------------------------------------------
/jQuery/img/content_ico/maxcdn.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/content_ico/maxcdn.gif
--------------------------------------------------------------------------------
/jQuery/img/content_ico/neobux.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/content_ico/neobux.gif
--------------------------------------------------------------------------------
/jQuery/img/downloadBox_link.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/downloadBox_link.gif
--------------------------------------------------------------------------------
/jQuery/img/ico.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/ico.ico
--------------------------------------------------------------------------------
/jQuery/img/introLogo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/introLogo.jpg
--------------------------------------------------------------------------------
/jQuery/img/logo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/logo.gif
--------------------------------------------------------------------------------
/jQuery/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/logo.png
--------------------------------------------------------------------------------
/jQuery/img/sprite.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/sprite.gif
--------------------------------------------------------------------------------
/jQuery/img/sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/sprite.png
--------------------------------------------------------------------------------
/jQuery/img/sprite.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/jQuery/img/sprite.psd
--------------------------------------------------------------------------------
/jQuery/js/minmax.js:
--------------------------------------------------------------------------------
1 |
2 | /*@cc_on
3 | @if (@_win32 && @_jscript_version>4)
4 |
5 | var minmax_elements;
6 |
7 | minmax_props= new Array(
8 | new Array('min-width', 'minWidth'),
9 | new Array('max-width', 'maxWidth'),
10 | new Array('min-height','minHeight'),
11 | new Array('max-height','maxHeight')
12 | );
13 |
14 | // Binding. Called on all new elements. If , initialise; check all
15 | // elements for minmax properties
16 |
17 | function minmax_bind(el) {
18 | var i, em, ms;
19 | var st= el.style, cs= el.currentStyle;
20 |
21 | if (minmax_elements==window.undefined) {
22 | // initialise when body element has turned up, but only on IE
23 | if (!document.body || !document.body.currentStyle) return;
24 | minmax_elements= new Array();
25 | window.attachEvent('onresize', minmax_delayout);
26 | // make font size listener
27 | em= document.createElement('div');
28 | em.setAttribute('id', 'minmax_em');
29 | em.style.position= 'absolute'; em.style.visibility= 'hidden';
30 | em.style.fontSize= 'xx-large'; em.style.height= '5em';
31 | em.style.top='-5em'; em.style.left= '0';
32 | if (em.style.setExpression) {
33 | em.style.setExpression('width', 'minmax_checkFont()');
34 | document.body.insertBefore(em, document.body.firstChild);
35 | }
36 | }
37 |
38 | // transform hyphenated properties the browser has not caught to camelCase
39 | for (i= minmax_props.length; i-->0;)
40 | if (cs[minmax_props[i][0]])
41 | st[minmax_props[i][1]]= cs[minmax_props[i][0]];
42 | // add element with properties to list, store optimal size values
43 | for (i= minmax_props.length; i-->0;) {
44 | ms= cs[minmax_props[i][1]];
45 | if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') {
46 | st.minmaxWidth= cs.width; st.minmaxHeight= cs.height;
47 | minmax_elements[minmax_elements.length]= el;
48 | // will need a layout later
49 | minmax_delayout();
50 | break;
51 | } }
52 | }
53 |
54 | // check for font size changes
55 |
56 | var minmax_fontsize= 0;
57 | function minmax_checkFont() {
58 | var fs= document.getElementById('minmax_em').offsetHeight;
59 | if (minmax_fontsize!=fs && minmax_fontsize!=0)
60 | minmax_delayout();
61 | minmax_fontsize= fs;
62 | return '5em';
63 | }
64 |
65 | // Layout. Called after window and font size-change. Go through elements we
66 | // picked out earlier and set their size to the minimum, maximum and optimum,
67 | // choosing whichever is appropriate
68 |
69 | // Request re-layout at next available moment
70 | var minmax_delaying= false;
71 | function minmax_delayout() {
72 | if (minmax_delaying) return;
73 | minmax_delaying= true;
74 | window.setTimeout(minmax_layout, 0);
75 | }
76 |
77 | function minmax_stopdelaying() {
78 | minmax_delaying= false;
79 | }
80 |
81 | function minmax_layout() {
82 | window.setTimeout(minmax_stopdelaying, 100);
83 | var i, el, st, cs, optimal, inrange;
84 | for (i= minmax_elements.length; i-->0;) {
85 | el= minmax_elements[i]; st= el.style; cs= el.currentStyle;
86 |
87 | // horizontal size bounding
88 | st.width= st.minmaxWidth; optimal= el.offsetWidth;
89 | inrange= true;
90 | if (inrange && cs.minWidth && cs.minWidth!='0' && cs.minWidth!='auto' && cs.minWidth!='') {
91 | st.width= cs.minWidth;
92 | inrange= (el.offsetWidthoptimal);
97 | }
98 | if (inrange) st.width= st.minmaxWidth;
99 |
100 | // vertical size bounding
101 | st.height= st.minmaxHeight; optimal= el.offsetHeight;
102 | inrange= true;
103 | if (inrange && cs.minHeight && cs.minHeight!='0' && cs.minHeight!='auto' && cs.minHeight!='') {
104 | st.height= cs.minHeight;
105 | inrange= (el.offsetHeightoptimal);
110 | }
111 | if (inrange) st.height= st.minmaxHeight;
112 | }
113 | }
114 |
115 | // Scanning. Check document every so often until it has finished loading. Do
116 | // nothing until arrives, then call main init. Pass any new elements
117 | // found on each scan to be bound
118 |
119 | var minmax_SCANDELAY= 500;
120 |
121 | function minmax_scan() {
122 | var el;
123 | for (var i= 0; i #mq-test-1 { width: 42px; }',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b
2 |
3 | 响应式
4 |
6 |
7 |
8 |
9 | com.aptana.ide.core.unifiedBuilder
10 |
11 |
12 |
13 |
14 |
15 | com.aptana.projects.webnature
16 |
17 |
18 |
19 | 1502074537428
20 | 26
22 |
23 | org.eclipse.ui.ide.multiFilter
24 | 1.0-name-matches-false-false-node_modules
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/响应式/css/demo.css:
--------------------------------------------------------------------------------
1 | * { margin: 0; padding: 0; box-sizing: border-box;-webkit-box-sizing: border-box}
2 | li { list-style: none}
3 | img { vertical-align: top}
4 | a { cursor: pointer}
5 | /**/
6 | header { height: 50px; position: fixed; top: 0; left: 0;
7 | width: 100%;background-color:#333;
8 | background-color:rgba(0,0,0,0.5) ;
9 | display: -webkit-box;
10 | display: -webkit-flex;
11 | display: flex;
12 | justify-content: space-between;
13 | line-height: 50px;
14 | color: #fff;
15 | }
16 |
17 | .menu { display: none; width: 100px; cursor: pointer; text-align: center}
18 | h1 { margin-left: 50px;overflow:hidden;flex-shrink: 0;width: 150px;}
19 | .logo { width: 100%; height: 50px; float:left; background: url("../images/logo.png") center no-repeat;
20 | font-size: 60px; line-height: 99999px; text-indent: 9999px; background-size: 100% auto }
21 | header nav { }
22 | header nav ul { display: flex; width:500px; justify-content: space-around;}
23 | header nav li { }
24 | .login { background-color: transparent; border: none; outline: none; color: #fff;
25 | cursor: pointer; width: 60px; flex-shrink: 0;}
26 | /**/
27 |
28 | /*大广告*/
29 | .banner { width: 100%; height: 250px; background: url("../images/top-bg.png") center top no-repeat #222;
30 | background-size: cover; }
31 |
32 | /*小广告*/
33 | .wrap { padding: 10px; display: flex; justify-content: space-between;}
34 | .focus-pic { width:49%; }
35 | .wrap img { width: 100%; height: auto}
36 | .side-pic { width:49%; display: flex; justify-content: space-between;}
37 | .pic-item { width:49%;}
38 |
39 | /*商品*/
40 | .product-list {display: flex; justify-content: space-around; flex-wrap: wrap}
41 | .product-list li { width: 23%; margin: 5px 0 10px; padding: 5px; box-shadow: 0 0 5px rgba(0,0,0,.7)}
42 | .product-list .pic { width: 100%}
43 | .product-list .pic img { width: 100%; height: auto;}
44 | .product-list p { line-height: 24px; font-size: 12px;}
45 | .product-list p:nth-of-type(2) { display: flex; justify-content: space-between; }
46 |
47 |
48 | @media screen and (max-width: 1024px){
49 | .product-list li { width: 31%;}
50 | }
51 |
52 |
53 | @media screen and (max-width: 768px){
54 | .product-list li { width: 45%;}
55 |
56 | .menu { display: block}
57 | h1 { margin-left: 0;overflow:hidden;}
58 | .logo {background-size: 80% auto }
59 |
60 | header nav { position: absolute; display: none; left: 0; top: 50px; width: 100%;
61 | background-color: rgba(0,0,0,.6) }
62 | header nav ul { display: block;width: 100%; text-align: center; }
63 | header nav li { border-top: 1px solid rgba(255,255,255,.3) }
64 |
65 |
66 |
67 | .wrap { padding: 10px; display: flex; justify-content: space-between; flex-wrap: wrap}
68 | .focus-pic { width:100%; }
69 | .side-pic { width:100%; margin-top: 10px;}
70 |
71 | }
72 |
73 |
74 | @media screen and (max-width:450px){
75 | .product-list li { width: 90%;}
76 | .menu { display: block}
77 |
78 | h1 { margin-left: 0;overflow:hidden;}
79 | .logo {background-size: 80% auto }
80 |
81 | header nav { position: absolute; display: none; left: 0; top: 50px; width: 100%; background-color: rgba(0,0,0,.6) }
82 | header nav ul { display: block;width: 100%; text-align: center; }
83 | header nav li { border-top: 1px solid rgba(255,255,255,.3) }
84 |
85 |
86 |
87 | .wrap { padding: 10px; display: flex; justify-content: space-between; flex-wrap: wrap}
88 | .focus-pic { width:100%; }
89 | .side-pic { width:100%; margin-top: 10px;}
90 |
91 | }
92 |
--------------------------------------------------------------------------------
/响应式/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
12 |
13 |
14 |
15 |
16 | 文章
17 | 素材
18 | 活动
19 | 素材
20 | 活动
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 |
52 |
53 |
54 | 迷你微型摄影展
55 |
56 | 2016-12-12
57 | 作者：tom
58 |
59 |
60 |
61 |
62 | 迷你微型摄影展
63 |
64 | 2016-12-12
65 | 作者：tom
66 |
67 |
68 |
69 |
70 | 迷你微型摄影展
71 |
72 | 2016-12-12
73 | 作者：tom
74 |
75 |
76 |
77 |
78 | 迷你微型摄影展
79 |
80 | 2016-12-12
81 | 作者：tom
82 |
83 |
84 |
85 |
86 | 迷你微型摄影展
87 |
88 | 2016-12-12
89 | 作者：tom
90 |
91 |
92 |
93 |
94 | 迷你微型摄影展
95 |
96 | 2016-12-12
97 | 作者：tom
98 |
99 |
100 |
101 |
102 | 迷你微型摄影展
103 |
104 | 2016-12-12
105 | 作者：tom
106 |
107 |
108 |
109 |
110 |
111 |
112 |
134 |
135 |
--------------------------------------------------------------------------------
/响应式/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/1.jpg
--------------------------------------------------------------------------------
/响应式/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/1.png
--------------------------------------------------------------------------------
/响应式/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/2.jpg
--------------------------------------------------------------------------------
/响应式/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/2.png
--------------------------------------------------------------------------------
/响应式/images/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/3.jpg
--------------------------------------------------------------------------------
/响应式/images/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/4.jpg
--------------------------------------------------------------------------------
/响应式/images/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/5.jpg
--------------------------------------------------------------------------------
/响应式/images/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/6.jpg
--------------------------------------------------------------------------------
/响应式/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/logo.png
--------------------------------------------------------------------------------
/响应式/images/swiper1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/swiper1.jpeg
--------------------------------------------------------------------------------
/响应式/images/top-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/响应式/images/top-bg.png
--------------------------------------------------------------------------------
/多列布局.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 多列布局｜column-span
6 |
49 |
50 |
51 |
52 |
金融时报：微软能否拯救Windows 8？
53 |
网易科技讯 5月8日消息，据国外媒体报道，Windows 8上市以来遭到业界与用户的各种诟病，销售量也不乐观。虽然微软已经意识到问题的严重性，但是鲍尔默能否力挽狂澜，还不得而知。今天金融时报撰文分析Windows 8与微软所遇到的困境，并展望了他们的未来，以下是文章主要内容：
54 |
微软能否拯救Windows 8？
55 |
这个问题关乎世界上最大的软件公司的未来以及其首席执行官史蒂夫·鲍尔默（Steve Ballmer）的职业生涯。微软为了保持其在PC领域的领先地位而推出的操作系统并没有得到用户的认可。
56 |
不过，看起来微软已经意识到问题的严重性。一个标志性动作就是，本周早些时候，微软宣布在今年年底之前发布Windows8的更新版本，代号为“Blue”。这是微软第一次打破了按年发布的传统，增加软件版本发布的频率，但跟竞争对手苹果和谷歌的软件更新发布频率还有不小差距。不过不管怎样这都说明微软已经开始采取行动，应对更激烈的竞争。
57 |
设计融合PC和平板电脑的Win8已经遭到了业界各种严厉的批评。纽约高科技研究公司Envisioneering的分析师Richard Doherty表示，“坐在Win8前面会让人感觉这操作系统蠢毙了，早期使用反馈研究表明人们广泛表示对win8不满。”Win8结合了传统PC界面和平板触摸屏界面的设计理念也遭人诟病，一些评论认为微软过于雄心勃勃，以至于在两款平台上都没有做好。
58 |
不过微软现在已经准备承认该软件确实给PC用户带来了不便：PC用户面对Win8时，需要经历一个十分陡峭的“学习曲线”。同时，微软也在做出改变，旨在提高Win8的可用性。虽然没有确凿证据，但微软受到了来自PC用户不小的压力。PC用户的希望是，当他们打开自己的PC时，是熟悉的Windows桌面，而不是被强制使用“丰富多彩”的微软瓷砖。同时，PC用户也一直希望微软把“开始”按钮弄回来。长期以来这一直是PC用户最熟悉的导航工具。
59 |
这些反馈表明，很多用户还没有准备好使用Windows的触摸屏操作系统，而是继续把Windows当作PC时代的产品。微软本周也承认Win8的成功将不仅仅需要用户界面的变化。Win8的另一个问题是价格。不过微软目前正在推动硬件厂商生产尺寸更小，成本更低的平板。这样的话，Win8平板的价格可能迅速下降到400美元左右，并向300美元看齐。
60 |
不过值得微软庆幸的是至少目前Win8没有遇到Vista的软件质量问题。许多企业用户因为Vista的各种弊病，直接跳过该版本，直接从早期的XP升级到Windows 7。约三分之二的企业用户目前已经升级到Windows 7。不过他们目前又开始了另一次观望，已决定是否要做新的升级。如果企业用户决定跳过Win8，那么微软将错过追赶苹果和谷歌的重要机会。
61 |
拉勾网
27 |
28 |
29 |
--------------------------------------------------------------------------------
/移动端布局的3种方法/rem-11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/移动端布局的3种方法/rem-11.png
--------------------------------------------------------------------------------
/移动端布局的3种方法/taobao.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 淘宝网
33 | 加大了科技水电费
34 |
35 |
36 |
--------------------------------------------------------------------------------
/移动端布局的3种方法/wangyi.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 网易网
33 | 加大了科技水电费
34 |
35 |
36 |
--------------------------------------------------------------------------------
/移动端布局的3种方法/屏幕分辨率.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/移动端布局的3种方法/屏幕分辨率.png
--------------------------------------------------------------------------------
/移动端布局的3种方法/移动端布局.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PinBoLei/Elastic-box-and-mobile-terminal/6aa0f642da4fe76a3cf11b5b4a6cb229cfa830a4/移动端布局的3种方法/移动端布局.jpg
--------------------------------------------------------------------------------
98 |
105 |
106 |
118 |
119 |
126 |
132 |
141 |
161 |
182 |
19 |
20 | 
21 |
22 | ## 二、弹性盒模型
23 |
24 | Flexbox布局（Flexible Box）模块(目前处于W3C工作草案)旨在提供一个更佳有效的布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态的。因此得其名"flex"。
45 | ### 2）flex-direction：创建方轴，从而定义Flex项目在Flex容器中放置的方向。
46 | Flexbox是一种单方向的布局概念。认为Flex项目主要排列方式要么是水平排列，要么是垂直列排列
47 | 
48 | ```Css
49 | .container {
50 | flex-direction: row | row-reverse | column | column-reverse;
51 | }
52 | ```
53 | ### 3）flex-wrap：默认情况之下，Flex项目都尽可能在一行显示。你可以根据flex-wrap的属性值来改变，让Flex项目多行显示。方向在这也扮演了一个重要角度，决定新的一行堆放方向。
54 | ```Css
55 | .container {
56 | flex-wrap: nowrap | wrap | wrap-reverse;
57 | }
58 | ```
59 | 
60 | ### 4）flex-flow(适用于flex容器元素)：
61 |
62 | 这是`flex-direction`和`flex-wrap`两个属性的缩写。两个属性决定了伸缩容器的主轴与侧轴。默认值是`row nowrap（中间用空格隔开）`。
73 |
74 | 
75 |
76 | ### 6）align-items：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
77 | ```Css
78 | align-items： flex-start | flex-end | center | baseline(项目位于容器的基线上) | stretch(默认值。);
79 | ```
80 | 伸缩项目可以在伸缩容器的当前行的侧轴上进行对齐，这类似于justify-content属性，但是是另一个方向。align-items可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式。
81 | 
82 | 
83 | ### 7）align-content：
84 | ```Css
85 | align-content：flex-start |flex-end|center|space-between|space-around | stretch
86 | ```
87 | 当伸缩容器的侧轴还有多余空间时，align-content属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的justify-content属性类似。请注意本属性在只有一行的伸缩容器上没有效果。
88 | 
89 |
90 | 
91 |
92 | ## 四、Flex项目属性(添加在子元素上的)
93 |
94 | ### 1）order：
98 |
99 | 
100 |
101 | ### 2）flex-grow：number该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
102 | 该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。如果所有Flex项目的flex-grow设置为1时，表示Flex容器中的Flex项目具有相等的尺寸。如果你给其中一个Flex项目设置flex-grow的值为2，那么这个Flex项目的尺寸将是其他Flex项目两倍（其他Flex项目的flex-grow值为1）。`注意：flex-grow取负值将失效。`
103 | 
104 |
105 | ### 3）flex-shrink：
108 | ### 4）flex-basis:
112 |
113 | ##5）flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
114 | ##### 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
115 | flex是flex-grow，flex-shrink和flex-basis三个属性的缩写。第二个和第三个参数(flex-shrink和flex-basis)是可选值。其默认值是0 1 auto。
116 | ```
117 | 如果缩写「flex: 1」, 则其计算值为「1 1 0%」
118 |
119 | 如果缩写「flex: auto」, 则其计算值为「1 1 auto」
120 |
121 | 如果「flex: none」, 则其计算值为「0 0 auto」
122 |
123 | 如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值
124 |
125 | ```
126 | 
127 |
128 | 
129 | ### 6）align-self：auto | flex-start | flex-end | center | baseline | stretch
130 | 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
131 | ###### 注意：float，clear和vertical-align属性在Flex项目中无效。
132 | 
133 |
134 | 
135 |
136 | ## 五、媒体查询的概念和应用
137 |
138 | ### 1）媒体查询的引用方法
139 | 在实际中媒体类型有近10中之多，实际常用的也就那么几种。不同的媒体类型引用方法也是有很多的，常见的媒体类型的引用主要有：link标签、xml方式、@import和css3新增的@import几种。
140 | #### 1、 link方法：
141 | link方法引入类型其实就是在标签引入样式的时候，通过link标签中的media属性来制定不同的媒体类型，这种方式引入媒体类型时常跟着引用的样式文件走。如：
142 | ```Html
143 |
144 |
145 | ```
146 | #### 2、 @media方式
147 | @media是css3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体查询，它和@import有点类似，也是具有2中方式
148 |
149 | A：在样式文件中引入媒体类型：
150 | ```Css
151 | @media screen{ 选择器{ 你的样式代码 } }
152 | ```
153 | B：使用@media 引入媒体类型的方式是在head标签中的style引入
154 | ```Html
155 |
156 |
159 |
160 | ```
161 | ### 2）常用Media query设备特性
162 | 
163 |
164 | ## 六、Responsive web design 响应式设计布局概念
165 |
166 | ### 1）Responsive 设计特点
167 | Responsive 网页设计不但要考虑其元素布局的秩序，还要做到“有求必应”，因此需要满足三个条件。
168 | ```
169 | 1、网站必须建立灵活的网格基础；
170 |
171 | 2、引用到网站的图片必须是可伸缩的；
172 |
173 | 3、不同的显示风格，需要在Media Query上设置不同的样式
174 | ```
175 | ###### 注意：缺少任何一个功能，就不能称为是合格的Responsive 网页设计
176 | ### 2）Responsive 中的术语
177 | #### 1、流体网格
178 | 流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位
179 | 来控制网格大小，这种网格系统最大的好处就是让网格大小随时根据屏幕尺寸做出相对应的比例缩放。
180 | #### 2、弹性图片
181 | 弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是
208 | ### 3）Responsive 布局技巧
209 | ```
210 | 1.尽量少用无关紧要的div
211 |
212 | 2.不要使用内联元素(inline)
213 |
214 | 3.尽量少用js或flash
215 |
216 | 4.丢去没用的绝对定位和浮动样式
217 |
218 | 5.屏弃任何冗余结构和不使用100%设置
219 | ```
220 | 那么有哪些设置能帮助Responsive确定更好的布局呢？
221 | ```
222 | 1.使用HTML5 Doctype和相关指南
223 |
224 | 2.重置好你的样式（reset.css）
225 |
226 | 3.一个简单的有语义的核心布局
227 |
228 | 4.给重要的网页元素使用简单的技巧，比如导航菜单之类元素
229 | ```
230 | ### 4）Meta 标签定义
231 | 为了让智能手机根据媒体查询匹配对应的样式，特意添加了一个特殊的meta标签。主要作用就是让智能手机浏览网页时能进行优化，并且可以自定义可视区域的尺寸和缩放级别。
44 | 
76 | 
190 | 
36 | 
40 | 
44 | 