做页面常用的东西,写这里用的时候省点去找了。。。
html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。
respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
由于IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站,故这两种方案还是需要的,
下面是两个解决方法的cdn地址写法:
1 <!--[if lt IE 9]>(终极解决方案)快捷键 cc:ie6 2 3 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> 4 5 <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> 6 7 <![endif]—>
也有一种让ie8及以下支持css3媒体查询的css3-mediaqueries.js 像上面引入也可,但是会出现闪屏 不是特别推荐使用, 上面是最常用的
在这里可以查到bootstrap的其他CDN地址http://www.bootcdn.cn
normalize.css 在默认的HTML元素样式上提供了跨浏览器的高度一致性
particle.js 背景粒子插件
1 <!-- 页面代码 --> 2 <!DOCTYPE html> 3 <html> 4 5 <head> 6 <meta charset="utf-8" /> 7 <title>particles.js</title> 8 <style> 9 10 #particles-js { 11 /* 注意 必须要有背景,页面才能出来 */ 12 background-color: black; 13 } 14 </style> 15 16 17 </head> 18 19 <body> 20 <div id="particles-js"></div> 21 </body> 22 23 //JS代码 24 <script src="particles/particles.min.js"></script> 25 <script> 26 /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ 27 particlesJS('particles-js', { 28 "particles": { 29 "number": { 30 "value": 100, 31 "density": { 32 "enable": true, 33 "value_area": 800 34 } 35 }, 36 "color": { 37 "value": "#ffffff" 38 }, 39 "shape": { 40 "type": "circle", 41 "stroke": { 42 "width": 0, 43 "color": "#000000" 44 }, 45 "polygon": { 46 "nb_sides": 5 47 }, 48 "image": { 49 "src": "img/github.svg", 50 "width": 100, 51 "height": 100 52 } 53 }, 54 "opacity": { 55 "value": 0.5, 56 "random": false, 57 "anim": { 58 "enable": false, 59 "speed": 1, 60 "opacity_min": 0.1, 61 "sync": false 62 } 63 }, 64 "size": { 65 "value": 5, 66 "random": true, 67 "anim": { 68 "enable": false, 69 "speed": 40, 70 "size_min": 0.1, 71 "sync": false 72 } 73 }, 74 "line_linked": { 75 "enable": true, 76 "distance": 150, 77 "color": "#80c341", 78 "opacity": 0.4, 79 "width": 1 80 }, 81 "move": { 82 "enable": true, 83 "speed": 6, 84 "direction": "none", 85 "random": false, 86 "straight": false, 87 "out_mode": "out", 88 "attract": { 89 "enable": false, 90 "rotateX": 600, 91 "rotateY": 1200 92 } 93 } 94 }, 95 "interactivity": { 96 "detect_on": "canvas", 97 "events": { 98 "onhover": { 99 "enable": true, 100 "mode": ["repulse"] 101 }, 102 "onclick": { 103 "enable": true, 104 "mode": "push" 105 }, 106 "resize": true 107 }, 108 "modes": { 109 "grab": { 110 "distance": 400, 111 "line_linked": { 112 "opacity": 1 113 } 114 }, 115 "bubble": { 116 "distance": 400, 117 "size": 40, 118 "duration": 2, 119 "opacity": 8, 120 "speed": 3 121 }, 122 "repulse": { 123 "distance": 200 124 }, 125 "push": { 126 "particles_nb": 4 127 }, 128 "remove": { 129 "particles_nb": 2 130 } 131 } 132 }, 133 "retina_detect": true, 134 "config_demo": { 135 "hide_card": false, 136 "background_color": "#b61924", 137 "background_image": "", 138 "background_position": "50% 50%", 139 "background_repeat": "no-repeat", 140 "background_size": "cover" 141 } 142 }); 143 </script> 144 </html>
效果图 :