最近在看一些关于CSS3方面的知识，主要是平时看到网页中有很多用CSS3实现的很炫的效果，所以就打算系统的学习一下。在网上找到很多的文章，但都没有一个好的整理性，比较凌乱。昨天看到w3cplus网站中关于CSS3的一些文章，觉得讲解的比较细，所以就决定以此作为学习的模板，一步步开始。
平时上下班在地铁上经常是拿着手机看小说新闻之类的，考虑到在手机端直接访问这些网页肯定会耗费很大的流量，所以最好是将这些文章下载下来放在手机里看，比如保存成图片或pdf当然是最好的选择。
之前曾在园子里看到某前端高手通过js将博客园中的文章提取并利用chrome的打印功能，将网页直接保存成pdf文档，以此为灵感，就自己也来实现一下这个功能。
先给出一下找到的这段js代码：
javascript:var el = $('.container'); $("*").not(el.find('*')).hide(); el.parents().andSelf().css({ width: 476, padding: 0, margin: 0, border: 'none', float: 'none', position: 'static' }).show().find('img').css({ maxWidth: 470, height: 'auto' }); $('body').css({ background: '#fff', zoom: 1.1 }); 因为本人对前端不是很熟悉，所以也是一点点的尝试着来实现，下面给出实现的过程，也是为了在此做一个简单的记录：
那要怎样来使用这段代码呢？
只要我们将上面的js代码段（目前是 第三版发布版），保存成chrome浏览器的书签，在w3cplus网站的文章页面中点击一下，就能提取出文章中主要的内容部分。然后通过快捷键Ctrl+P 调出打印窗口，推荐边框选项设置为“无”，取消勾选“背景图形”，然后点击“保存” 即可（也可根据个人喜好自定）。
现在，将导出的pdf文档传到手机里，就ok啦！
2015-2-13更新：
今天对上面的那段代码又进行了一下修改，增加了一些内容：完整代码如下：
javascript: (function($) { var el = $('#page>.container'); var bd = $('body'); bd.find('#header').remove(); bd.find('#branding').remove(); bd.find('#footer-col').remove(); bd.find('#footer').remove(); $('html').find('script').remove(); $('body *').not($('#page').find('*')).hide(); $('#page').show(); el.find('[class="block block-block"]').remove(); el.find('[id="BAIDU_DUP_wrapper_u1490106_0"]').remove();//去除百度联盟广告 el.find('[id="node_footer"]').remove();//去除底部的上一篇、下一篇提示及分享的图标 el.find('#sidebar-second').remove(); el.find('.main-wrap').css({ margin: 0 }); el.find('.page-inner').css({ padding: '10px 0' }); el.find('pre').css({ 'word-wrap': 'break-word', 'overflow': 'hidden' });//页面中如果有较长的代码会被遮盖，这里使其自动折行；虽然这样处理后看上去不是很美观，但至少保证完整性 el.find('pre, pre code').css({ border: '1px solid #F5062B' }); $('body').css({ padding: 0, zoom: 1.2, background: '#fff' }); $('#breadcrumb').prepend(document.title + ' ' + window.location.href);})(jQuery); 主要的修改内容如上面代码中的注释：
- 有些页面中会有百度联盟的推广广告，看上去非常反感，直接去掉；
- 去除了页面底部的上一篇、下一篇提示及分享到的图标；
- 页面中较长的代码段会超出页面而被遮盖，这里通过css来使其自动折行；
如果还有其他修改的可以自行增加，这段代码也很简单，很容易理解。
附上用Chrome打印时的配置： 这里我选择的是A3纸张大小 分辨率72下，对应像素为：1191*842px 浏览器宽度1100px .
