css接纳器 有通配符接受器书写格式:*+{声名块} 并集选用器/组合采取器
书写格式;成分或类或id+“”+成分或类或id+“,”+成分或类或id{评释块}
列:h1,h2,h3{color:red;} 等级次序选取器 : 子集选取器:
格式:父级成分名称+”>”+子级成分名称+{申明块} 例:div>p{color:red;}
后代接纳器: 格式:祖先元素名称+空格+后代成分名称+{表明块} 例:div
p{color:red;} 兄第选用器: 格式: A成分名称+”+”+B成分名称+{注明块}
例:div+P{color:red;} 注:选用A成分后的B元素,AB之间无法有任何成分.
通用选取器: 格式:同级成分A+”~”+同级成分B+{证明块} 例:div~p{color:red;}
注:表示选拔与A成分同品级的持有B成分(B的职责是在A前边卡塔尔。 伪类选取器
动态伪类选用器未访问 (把暗许值改为深灰); a:link{color:black;}
鼠标悬停 a:hover{color:pink;} 鼠标点击时 a:active{color:green;} 点击后
a:visited{color:精彩纷呈;};
注:hover是能够用于多个要素身上的,但此外八个只好用于全数一点点击效率的成分上。
a:focus{color:颜色;}
多用来输入框或链接(注:IE7早先不扶助:focus注;IE6早前不扶植:hover
:active) 以上5个的各样必要: A:link,visited,focus,hover,active
B:visited,link,focus,hover,active 构造伪类选拔器
格式:成分名称+”:nth-child(n卡塔尔国”+{声明块}
例:section:nth-child(2卡塔尔{color:deeppink;}
表示当选html里的第贰个section成分,文字设置为deeppink 选中第2个格式:成分名称+”:first-child”+{注解块} 例:p:first-child{color:red;}
选中最终二个 格式:成分名称+”:last-child”+{注明块}
例:p:last-child{color:red;} 选中奇数项
格式:元素名称+”:nth-child(odd卡塔尔国”+{注脚块}
例:section:nth-child(odd卡塔尔{color:red;} 选中偶数项
格式:成分名称+”:nth-child(even卡塔尔(英语:State of Qatar)”+{申明块}
例:section:nth-child(even卡塔尔{color:red;} 伪成分采用器 成分后边加内容
格式:成分名称+”:after”+{content:”要增添的剧情”;}
例:i:after{content:”姓名”;} 成分后边加内容
格式:成分名称+”:before”+{content:”要丰裕的剧情”;}
例:i:before{content:”姓名”;} 成分第后生可畏行添加样式
格式:成分名称+”:first-line”+{注明块} 例:p:first-line{color:red;}
成分首个字母或第2个汉字 格式:成分名称+”:first-letter”+{评释块}
例:p:first-letter{color:red;}
注:为掌握决宽容性,伪成分采纳器,提出打七个冒号

只是特别不幸的是我们以此类型是要选用大家最欣赏(很烦)的浏览器IE。全数要想使IE能够在线读取pdf,作者就精通三种艺术第大器晚成种下载Acrobat
Reader插件,第二就是选取js库了。

第11章  用CSS举办结构186 

 本人实现不分页版:

即使分页很好用,可是确不必然使用具备的场合,举个例子本人哪怕想叁遍性展开全体页面然后滚动查看跟读word似的,如何是好,有措施,当然是得以实现不分页喽,哈哈。

分页好通晓啊:依照页数读取然后把读取的内容放到画布上就好了,既然我们明白分页的法规,那么大家微微改变一下就是不分页了吗。

不分页:我们整整读出来放到页面不就好了吗,不难的话是以此样,不过实际思路是=》大家先拿走到持有页数,然后遍历的把每后生可畏页像分页一下内置画布上显得,然后在遍历相同数量画布来对号入座每页的内容,最终展现出来。

好了大概的笔触已经知晓了上面就是撸代码:

抑或不忘记记援引js文件:

 <script src="~/Content/js/PDFShow/padjs/build/pdf.js"></script>

页面构造就能够那样子了:

   <div style="width:100%;height:100%;background:#404040">
        <div id="pdf-container" style=" width:1000px;margin: 0 auto;">
        </div>
    </div>

下一场开端化控件吧:

图片 1图片 2

  <script>
        //引入pdf.js之后
        //
        var url = '../pdfTest.pdf';
        PDFJS.workerSrc = '../../Content/js/PDFShow/padjs/build/pdf.worker.js';

        window.onload = function () {

            //创建canvas方法
            function createPdfContainer(id, className) {
                var pdfContainer = document.getElementById('pdf-container');
                var canvasNew = document.createElement('canvas');
                canvasNew.id = id;
                canvasNew.className = className;
                pdfContainer.appendChild(canvasNew);
            };

            //渲染pdf
            function renderPDF(pdf, i, id) {
                pdf.getPage(i).then(function (page) {
                    //默认设置文档的显示大小
                    var scale = 1.5;
                    var viewport = page.getViewport(scale);

                    //
                    //  准备用于渲染的 canvas 元素
                    //

                    var canvas = document.getElementById(id);
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    //
                    // 将 PDF 页面渲染到 canvas 上下文中
                    //
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            };
            //创建和pdf页数等同的canvas数
            function createSeriesCanvas(num, template) {
                var id = '';
                for (var j = 1; j <= num; j++) {
                    id = template + j;
                    createPdfContainer(id, 'pdfClass');
                }
            }
            //读取pdf文件,并加载到页面中
            function loadPDF(fileURL) {
                PDFJS.getDocument(fileURL).then(function (pdf) {
                    //用 promise 获取页面
                    var id = '';
                    var idTemplate = 'cw-pdf-';
                    var pageNum = pdf.numPages;
                    //根据页码创建画布
                    createSeriesCanvas(pageNum, idTemplate);
                    //将pdf渲染到画布上去
                    for (var i = 1; i <= pageNum; i++) {
                        id = idTemplate + i;
                        renderPDF(pdf, i, id);
                    }
                });
            }
            //启动
            loadPDF('../pdfTest.pdf');
        };
    </script>

View Code

最终上一下成效显示截图:

图片 3

 

第3章  基本HTML结构27 

选拔官方示例:

应用官方示例其实正是应用pdfjs已经写好的viewer.html页面,例子:http://mozilla.github.io/pdf.js/web/viewer.html做的效果与利益相比完备。

简简单单的来讲一下呢,很几个人恐怕下载之后直接张开会报错,其实那是因为现身了七个难题:第一个是从未公文,第贰个是掌握写文件不过存在跨域。就能够发生如下错误:

图片 4

并发那一个主题材料其实也清闲,只要大家引用到品种后就不会产出了。然后是大家在运用的地点展开那几个页面况兼增加文件就可以:

  window.location.href = "../../Content/js/PDFShow/padjs/web/viewer.html?file=pdfTest.pdf";

成效显示:

图片 5

第12章  样式表——从活动设备到台式机222 

 自个儿实现分页版:

咱俩和好完结的话就没有必要web文件夹下的事物。你就能够去除了。

和煦定义实现提起来也是很简短的,官方三春经给了数不明朝码示例了。废话笔者就不说了。笔者就上一下自个儿的代码吧。

第生机勃勃引进pdf.js文件到页面:

    <script src="~/Content/js/PDFShow/padjs/build/pdf.js"></script>

引入pdf.js之后:

图片 6图片 7

 //引入pdf.js之后
        var url = '../pdfTest.pdf';
        PDFJS.workerSrc = '../../Content/js/PDFShow/padjs/build/pdf.worker.js';
        //定义变量
        var pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 1,
            canvas = document.getElementById('the-canvas'),
            ctx = canvas.getContext('2d');

        function renderPage(num) {
            pageRendering = true;
            pdfDoc.getPage(num).then(function (page) {
                //设置页面大小
                var viewport = page.getViewport(1);
                console.log(viewport.width);
                var desiredWidth = "1000";
                var scale = desiredWidth / viewport.width;
                var scaledViewport = page.getViewport(scale);
                //var viewport = page.getViewport(scale);
                canvas.height = scaledViewport.height;
                canvas.width = scaledViewport.width;
                //设置背景颜色(无效)
                canvas.style.backgroundColor = "red";
                //进行文件读取加载
                var renderContext = {
                    canvasContext: ctx,
                    viewport: scaledViewport
                };
                var renderTask = page.render(renderContext);

                renderTask.promise.then(function () {
                    pageRendering = false;
                    if (pageNumPending !== null) {
                        // New page rendering is pending
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                });
            });
            //显示总页数
            document.getElementById('page_num').textContent = pageNum;
        }
                        //翻页方法
        function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }
        function onPrevPage() {
            if (pageNum <= 1) {
                return;
            }
            pageNum--;
            queueRenderPage(pageNum);
        }
        //上一页监听
        document.getElementById('prev').addEventListener('click', onPrevPage);

        function onNextPage() {
            if (pageNum >= pdfDoc.numPages) {
                return;
            }
            pageNum++;
            queueRenderPage(pageNum);
        }
        //下一页监听
        document.getElementById('next').addEventListener('click', onNextPage);

        PDFJS.getDocument(url).then(function (pdfDoc_) {
            pdfDoc = pdfDoc_;
            document.getElementById('page_count').textContent = pdfDoc.numPages;

            renderPage(pageNum);
        });

View Code

相应html代码:

<body style="background:#404040">
    <div>
        <button id="prev">上一页</button>
        <button id="next">下一页</button>

        Page:  / 
    </div>

    <div style="width:100%;height:100%;background:#404040">
        <div style=" width:1000px;margin: 0 auto;">
            <canvas id="the-canvas"></canvas>
        </div>
    </div>
</body>

成效体现:

图片 8

HTML5与CSS3幼功教程(第7版)试读不独有介绍了文件、图像、链接、列表、表格、表单、多媒体等网页成分,也介绍了怎么着为网页设计构造、布局,增添动态效果、格式化等花样,此外还论及调节和测量试验和发表、聚合和引发访问等。书中详尽疏解了摄像、音频及此外新添特色,从零最初教会读者创造渐进巩固的普适性网址。书中提供了汪洋代码示例并附着代码实现的荧屏截图,配套网站上列出了完全的身体力行代码及越来越多实例。 须要的情大家方可下载试试啊!

有一些人很惊叹,在线展开pdf文书档案浏览器不是帮衬呢。是的你说的都是现代浏览器,比方Google,360,edg等。

第1章  网页的组织块1 

介绍pdf.js

pdf.js是三个开源的js库。

官网: 

源码地址:

第10章  文本的格式化162 

天记录三个js库:pdf.js。首借使贯彻在线展开pdf成效。因为品种要求需求能在线查看pdf文书档案,所以就研商了须臾间那几个控件。

第2章  管理网页文件17 

 使用:

选取pdf.js有二种格局:

  • 第黄金年代种接受官方给写好的演示,简单来说就是上边提到的下载下来的web文件夹。
  • 其次种正是齐心协力调用API自身写方法完结,相对于第黄金时代种若是和煦要的法力不是繁多依然要好写。亦不是很复杂相当轻巧实现。官方给的代码太多纠正维护太费力。

第6章  链接110 

下载并解压

我们在http://mozilla.github.io/pdf.js/getting\_started/\#download入选版本后下载后解压会生成多个文件夹:

图片 9

那三个文件夹主题文件就是build文件下的js文件,web文件是官方给写好的卷入示例,你你可采取选择依然不选择。

├── LICENSE
├── build/
│   ├── pdf.js                             - 显示层
│   └── pdf.worker.js                      - 核心层
└── web/
    ├── cmaps/                             - 字符映射(由核心要求)
    ├── compressed.tracemonkey-pldi-09.pdf - 测试 pdf
    ├── debugger.js                        - 有帮助的PDF调试功能
    ├── images/                            - 观看者和注释图标的图像
    ├── l10n.js                            - 汉化
    ├── locale/                            - 翻译文件
    ├── viewer.css                         - viewer 页面样式
    ├── viewer.html                        - viewer 页面
    └── viewer.js                          - viewer js

第14章  使用CSS3张开抓好251 

第21章  揭橥网址346 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注