这两天学习了Vue.js ，正好了解了如何引入外部文件的方法，而且很重要，所以，今天添加一点小笔记。例子中css文件采用bootstrap.css，js文件采用jQuery，less文件用less.less(自定义文件) 步骤一：安装webpack cnpm install webpack -g步骤二：在src/assets下面新建css、js、less、fonts文件夹，并放入对应文件。 将bootstrap.css放入css目录下，bootstrap.min.js放入js文件下，fonts字体放入fonts目录下 步骤三：安装js依赖 cnpm ...
发现问题 最近在使用 Webpack 打包 css 文件时，发现了一个问题，发现打包后的 z-index 值跟源文件 z-index 不一致。 如下图，左侧是源文件，右侧是打包后的文件：即使加上 !important，经过 OptimizeCssAssetsPlugin 调用 cssProcessor cssnano 处理之后也是 z-index: 2。 因此，很可能是 cssnano 进行了重新计算（cssnano 称为 rebase），而且这种计算是不够准确的。因为打包后的文件有两处 z-index，这里是第二处，所以此处 z-i...
前段时间看了React Native,但是感觉在安卓反面的开发并不成熟.有较多功能有待完善,而且自己在实际运用的过程中在一些模块上遇到了不晓得阻力,又苦于网上没有找到那么多资源.于是打算先放一段时间,还是回过头来看ReactJs吧. React颠覆了html的传统思维,代码基本都写在<script type="text/babel"></script>标签里面.我开发的时候采用的是IDEA,当然也可以使用atom或者webstor.使用IDEA时,需要在settings里面的Language & Framework设...
今天做帮一个师姐做网页遇到一个这样的要求： 鼠标不移动进表格，表格透明度不变。 鼠标移动进表格，hover到的单元格透明度不变，没hover到的单元格透明度改变。 先贴我已经实现好的效果，一开始，表格透明度不变。当我鼠标移动到第二排第三个单元格，其他单元格降低透明度。解决方法 一开始，我用的是CSS实现方法,是下面这样 #table td{opacity:0.5; } #table td:hover{opacity:1; }不过这样一开始进去的时候表格透明度就是0.5，看...
本文实例讲述了JavaScript使用链式方法封装jQuery中CSS()方法。分享给大家供大家参考，具体如下： 主要思路就是：返回this对象，将所获取的操作元素放入一个数组中。在原型中添加拓展方法 <html> <head><title></title> </head> <body><div id="one">aa</div> </body> <script type="text/javascript"> //封装类似于JQuery的连缀 /* 思路：一个操作后再返回本来的对象this，将获取的元素放入一个数组内部。通过原型添加方法; 为了能...
本文实例讲述了JS实现css hover操作的方法。分享给大家供大家参考，具体如下： hover我们可以用css的方式写，当然，也可以用js的方式写 <html> <head><title>js的下拉菜单效果</title><style type="text/css">*{padding:0px;margin:0px;}ul li{list-style: none;}a{text-decoration: none}.header{height: 45px;background-color:#FBFBFB;border-bottom: 1px solid #C7C7C7;}.header-center{width: 1000px;height: 100%;margin: 0 ...
javascript 动态生成css代码的两种方法 有时候我们需要利用js来动态生成页面上style标签中的css代码，方法很直接，就是直接创建一个style元素，然后设置style元素里面的css代码，最后把它插入到head元素中。但有些兼容性问题我们需要解决。首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可，而在IE中则需要利用style元素的styleSheet.cssText来解决。还需要注意的就是在有些版本IE中...
需要了解的知识： 1、nodejs的安装与命令行使用 2、nodejs安装应用 3、grunt的初步了解 本文已假定读者已经熟悉以上知识。 好，我们继续： 任务1：将src目录下的所有zepto及插件合并，并压缩。 --src/ajax.jsassets.jscallbacks.jsdata.jsdeferred.jsdetect.jsevent.jsform.jsfx.jsfx_methods.jsgesture.jsie.jsios3.jsselector.jsstack.jstouch.jszepto.js目录结构： dist/ node_modules/ src/ Gruntfile.js package.json package...
设置css样式的多种方法总结，jquery<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style></style> </head> <body><ul><li>兄弟多个1</li><li>兄弟多个2</li><li>兄弟多个3</li><li>兄弟多个4</li><li>兄弟多个5</li><li>兄弟多个6</li><li>兄弟多个7</li><li>兄弟多个8</li><li>兄弟多个9</li></ul><ul id="ul"><li>兄弟多个1</li><li>兄弟多个2</li><li>兄弟多个3</li><li>兄弟多个4<...
一、方法引用来源和应用 此动态加载css方法 loadCss，剥离自Sea.js，并做了进一步的优化（优化代码后续会进行分析）。 因为公司项目需要用到懒加载来提高网站加载速度，所以将非首屏渲染必需的css文件进行动态加载操作。 二、优化后的完整代码/* * @function 动态加载css文件 * @param {string} options.url -- css资源路径 * @param {function} options.callback -- 加载后回调函数 * @param {string} options.id -- link标签id *...
Bootstrap中CSS的使用方法，供大家参考，具体内容如下 1、GitHub上这样介绍 bootstrap： ? 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 ? 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。 ? 自定义JQuery插件，完整的类库，基于Less等。2、bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引...
有时我们不需要某个css属性时，想删除它，但有没有removeCss方法，怎么办呢？ 可以使用如下方法解决 $(选择器).css(css属性,); 即将css属性值赋值为空，页面中就不会显示该css属性了。 如：$(.div1).css(opacity,); 以上这篇Jquery删除css属性的简单方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。 实现图片预加载可以使用css、JavaScript、Ajax三种方法。下面分别介绍这些方法的实现。 使用CSS...
用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有-号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style[text-align] = 100px; element.style.height = 100px;2. 直接设置属性（只能用于某些属性，相关样式会自动识别） element.setAttribute(height, 100); element.setAttribute(height, 100px);3. 设置style的属性 element.setA...
前言 CSS3的出现让浏览器的表现更加的丰富多彩，表现冲击最大的就是动画了，在日常书写动画的时候，很有必要去事先判断浏览器是否支持，尤其是在写CSS3动画库的时候。比如transition的animation-play-state，就只有部分浏览器支持。 下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性： 第一种：javascript比较常用下面这个代码： var support_css3 = (function() {var div = document.createElement(div),vendors = Ms O M...