a.css

  1. html, body {
  2.     padding:;
  3.     margin: 0
  4. }
  5.  
  6. ol.menu {
  7.     width: 100%;
  8.     text-align: left;
  9.     padding: 0 !important;
  10.     list-style: none;
  11.     border: 0.1rem solid #ddd;
  12.     border-radius: 0.3rem;
  13.     margin-top: 2rem !important;
  14.     max-width: 40rem;
  15.     margin: 0 auto
  16. }
  17.  
  18. ol.menu li {
  19.     border-bottom: 0.1rem solid #ddd;
  20.     padding: 0.2rem 0.5rem
  21. }
  22.  
  23. ol.menu li.active {
  24.     background-color: #F7F7F7
  25. }
  26.  
  27. ol.menu a {
  28.     display: block
  29. }

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>测试</title>
  8.     <link rel="stylesheet" href="css/a.css">
  9. </head>
  10. <body>
  11. <main class="markdown-body">
  12.     <nav>
  13.         <ol class="menu">
  14.             <li class="">
  15.                 <a href="a.html">a页面</a>
  16.             </li>
  17.             <li class="">
  18.                 <a href="b.html">b页面</a>
  19.             </li>
  20.             <li class="">
  21.                 <a href="c.html">c页面</a>
  22.             </li>
  23.         </ol>
  24.     </nav>
  25.  
  26.     <div id="barba-wrapper">
  27.         <div class="barba-container homepage">
  28.             <p>首页的内容</p>
  29.         </div>
  30.     </div>
  31.  
  32. </main>
  33. <script>
  34.     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  35.         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  36.         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  37.     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  38.  
  39.     ga('create', 'UA-73202407-1', 'auto');
  40.     ga('send', 'pageview');
  41.  
  42. </script>
  43.  
  44. <script src="js/barba.min.js" type="text/javascript"></script>
  45. <script src="js/main.js" type="text/javascript"></script>
  46. </body>
  47. </html>

a.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>测试</title>
  8.     <link rel="stylesheet" href="css/a.css">
  9. </head>
  10. <body>
  11. <main class="markdown-body">
  12.     <nav>
  13.         <ol class="menu">
  14.             <li class="">
  15.                 <a href="a.html">a页面</a>
  16.             </li>
  17.             <li class="">
  18.                 <a href="b.html">b页面</a>
  19.             </li>
  20.             <li class="">
  21.                 <a href="c.html">c页面</a>
  22.             </li>
  23.         </ol>
  24.     </nav>
  25.  
  26.     <div id="barba-wrapper">
  27.         <div class="barba-container homepage">
  28.             <p>A 页面的内容</p>
  29.         </div>
  30.     </div>
  31. </main>
  32. <script>
  33.     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  34.         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  35.         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  36.     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  37.  
  38.     ga('create', 'UA-73202407-1', 'auto');
  39.     ga('send', 'pageview');
  40.  
  41. </script>
  42. <script src="js/barba.min.js" type="text/javascript"></script>
  43. <script src="js/main.js" type="text/javascript"></script>
  44. </body>
  45. </html>

barba 页面渲染的更多相关文章

  1. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  2. 【前端性能】高性能滚动 scroll 及页面渲染优化--转发

    本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...

  3. 高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  4. 加载 CSS 时不影响页面渲染

    转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的 ...

  5. 我是怎么发现并解决项目页面渲染效率问题的（IE调试工具探查器的使用）

    #我是怎么发现并解决项目页面渲染效率问题的(IE调试工具探查器的使用) ##背景 之前的项目中,有很多的登记页面,一般都有100-200甚至更加多的字段,而且还涉及到字典.日期及其他效果的显示,载入时 ...

  6. 前端高性能滚动 scroll 及页面渲染优化

    前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲 ...

  7. 微信小程序--ajax服务器交互及页面渲染

    网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这 ...

  8. 多进程浏览器、多线程页面渲染与js的单线程

    线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程 ...

  9. JS学习笔记：（一）浏览器页面渲染机制

    浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...

随机推荐

  1. 加载旋转框(loading spinner)

    目标是这样的 用到的组件 AlertDialog 和 ProgressBar 先创建一个 AlertDialog 的布局 <?xml version="1.0" encodi ...

  2. ionic打包apkFailed to execute shell command "input,keyevent,82"" on device: Error: adb: Command failed with exit code 137

    错误代码如下 BUILD SUCCESSFUL in 12s 46 actionable tasks: 1 executed, 45 up-to-date Built the following ap ...

  3. maven之package与install的区别

    mvn clean package 先看命令的执行过程 mvn clean install 同样先看执行过程 mvn clean package依次执行了clean.resources.compile ...

  4. Sqoop帮助文档

    1.列出MySql数据库中的所有数据库 $ sqoop list-databases --connect jdbc:mysql://192.168.254.105:3306/--username ro ...

  5. python基础集结号

    Python 号称是最接近人工智能的语言,因为它的动态便捷性和灵活的三方扩展,成就了它在人工智能领域的丰碑 走进Python,靠近人工智能 一.编程语言Python的基础 之 "浅入浅出&q ...

  6. 2016年JD工作遇到的问题：1-5，搭建环境和熟悉项目过程中的坑

    1.更新不需要权限的项目A,却提示没有权限. 先从Git上更新项目A的代码,提示没有权限. 然后从Git上更新其它项目B的代码,正常. 再更新项目A的代码,正常了. 奇葩问题! 2.Eclipse中, ...

  7. 用mapreduce读取hdfs数据到hbase上

    hdfs数据到hbase过程 将HDFS上的文件中的数据导入到hbase中 实现上面的需求也有两种办法,一种是自定义mr,一种是使用hbase提供好的import工具 hbase先创建好表   cre ...

  8. Python3全栈学习目录

    http://www.cnblogs.com/wupeiqi/articles/4938499.html 文辉整理: http://blog.51cto.com/9272317/1869914

  9. Cadence17.2下载ALTERA的FPGA封装库

    1. 在Cadence的安装目录里面找了下,发现都没有Altera的FPGA型号的函数库,下面的虽然是ALTERA,但是没有FPGA的器件封装 2. 去intel的官网看能不能下载到,INTEL网址, ...

  10. OSI七层模型加协议

    OSI七层网络模型 TCP/IP四层概念模型 对应网络协议 应用层(Application) 应用层 HTTP.TFTP, FTP, NFS, WAIS.SMTP 表示层(Presentation) ...