1.前言 做项目就难免会开发交互效果或者特效，而我最近开发的项目一直在使用vue，开发技术栈方面，理所当然就使用了vue+css3开发，过程中发现使用vue+css3开发特效，和javascript/jquery+css3的思维方式不一样，但是比javascript/jquery+css3简单一点点。今天就分享三个简单的小实例，希望能起到拓展思维的作用，让大家明白vue+css3应该怎样开发交互效果！如果大家有什么好的建议，或者觉得我哪里写错了，欢迎指出！ 1.文章上面的代...
写在前面： 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后，又一篇关于vue-cli脚手架配置相关的文章，因为有些文章步骤不够清晰，当时我引入JQuery、bootstrap的时候颇费了一番功夫，所以本文的步骤会尽量详细一点。引入bootstrap1. 下载所需要的bootstrap文件。将要使用的bootstrap文件放入src目录下的assets文件夹中。2. 在入口文件src/main.js中引入bootstrapimport ./assets/bootstrap-3.3.7-dist/css/bootstra...
前端开发在近一两年发展的非常快，JavaScript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一 些前端开发中的共性问题，但是实现又不尽相同。通常一般的前端加载js文件都是这样 : <script type="text/javascript" src="js/js1.js"></script> <script type="text/javascript" src="js/js2.js"></script> <script type="text/javascript" src="js/js3.js"></script> <script type="text/ja...
详解Angular-cli生成组件修改css成less或sass的实例 使用cli命令生成组件: ng generate component 组件名 生成出来的组件文件有：html / ts / css / spec.ts问题我是一个less重度患者怎么可能再去写css呢。 于是我就在想使用cli生成组件的时候能直接生成出来的是less文件而不是css文件； 修改angular-cli.json文件： apps "styles": ["styles.less"] "defaults": "styleExt": "less",这样就能用组件命令生成的时候替换css文件成les...
博主最近研究vue+webpack的时候想引入css文件死活引入不出来，在webpack-simple那里却能引得出来，十分的纳闷，然后细心的调试了一下，原来这webpack和webpack-simple两个东西引入css文件有点区别。 首先说一下如何在webpack中引入css文件吧。博主的webpack是最新版本，不知1.0版本的是如何，所以下面说的是2.0以后的版本。首先在命令行中新建一个vue项目，如何新建请看我之前发的一篇博文，因为在webpack中，本身就有一个css-load...
?最近在项目中使用了一下webpack，所以这里打算对目前了解的使用方法做一个小小的总结 为什么是webpack1.webpack一下自己就了，这绝对是一个重要的原因。2.然后我之前项目中都是通过requireJS，通过AMD来做到模块化开发。webpak不仅支持打包，而且支持AMD 和 CommonJS方式来做模块化开发，所以打算尝试一下webpack来实现模块化。 3.我的需求简单，适合新上手webpack，只需要生成上线目录，实现模块化，压缩代码等等 webpack实战 we...
这篇文章只写了如何把CSS打包成一个CSS文件，没有讲解如何打包成多个CSS文件，经简友提点，这里添加上了 打包成多个CSS文件的方法。 瞎扯 webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中.但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中 一、extract-text-webpack-plugin 使用方法 这个操作很简单的，只需要一个插件就好了，就...
webpack打包vue项目的时候默认会把vue里的css打包到页面上。 webpack.config.js里的plugins加上以下配置 new webpack.LoaderOptionsPlugin({ test:/\.vue$/, options: { vue: { loaders: { css: ExtractTextPlugin.extract({ fallback:vue-style-loader, use:css-loader, publicPath:"../" }), } } } ) 这样可以把css提取到公共style里。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
详解微信小程序 通过控制CSS实现view隐藏与显示 实现效果图：视图代码，使用变量控制隐藏类名<scroll-view scroll-y="true" ><view class="user_freeback"> <view class="txt"><text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码，以便管理员给你答复。</text></view></view> <view class="section weui-media-box weui-media-box_appmsg"> <view class="section__title">希望回访:</view> <view class=form-grou...
前端开发之CSS原理详解从事Web前端开发的人都与CSS打交道很多，有的人也许不知道CSS是怎么去工作的，写出来的CSS浏览器是怎么样去解析的呢？当这个成为我们提高CSS水平的一个瓶颈时，是否应该多了解一下呢？一、浏览器的发展与CSS网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页， HTTP 容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1，这个协议在 RFC2616 中被完整定义。HTTP/1.1 有其一...
微信小程序 利用css实现遮罩效果实例详解 实现效果图：如图所示，使用css实现小程序的遮罩效果，代码如下js文件代码：//index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码：.b1{position:fixed;width:100%;height:100%;top:0px;background:rgba(0,0,0,0.4);overflow: hidden;} .t_w{p...
首先把模板代码上上来: <!DOCTYPE html> <html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /><!--判断IE9 用来支持HTML5 html5shiv.min.js-没有那个元素，就创建那个元素respond.min.js支持响应式布局的--><!--[if lt IE 9]> <script sr...
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条（文字下面有横线）等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。 接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...
一、使用js操作css属性的写法 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如：obj.style.margin，obj.style.width，obj.style.left，obj.style.position 2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。 如：obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等 3、js操作css float属性的特殊写法 因为 float 是javascript的保留...
css() 方法设置或返回被选元素的一个或多个样式属性。 设置 CSS 属性 如需设置指定的 CSS 属性，请使用如下语法： 代码如下:css("propertyname","value"); 下面的例子将为所有匹配元素设置 background-color 值： 实例 代码如下:$("p").css("background-color","yellow"); 设置多个 CSS 属性 如需设置多个 CSS 属性，请使用如下语法： 代码如下:css({"propertyname":"value","propertyname":"value",...}); 下面的例子将为所...