css

JavaScript

利用gulp实现压缩的实例

51 0

1,下载安装node访问 ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪。 npm 会随着安装包一起安装,2,打开代码行node -v //查看node版本,如果显示版本号,则安装成功。npm -v   //查看npm版本,如果显示版本号,则安装成功。定位到自己项目文件处 例如:cd /Users/ydz/WebstormProjects/bucketMaster sudo npm install -g gulp // 下载安装gulpgulp -v //查看gul

JavaScript

Less与Sass框架如何使用?

56 0

一、Less语法  1.变量声明:    @变量名:变量值; 11 @newHeight:20px;  2.调用变量:121 .box {2 width: @newHeight;3 height: @newHeight; 4 }  3.多重继承(Mixins):调用已有的类作为自己成员11 .box1 {2 .box;3 }  4.带参数函数:11 .newBox(@newWidth) {2 height: @newWidth;3 }4 .box2 {5 .n

CSS3 Flexbox该怎么使用?
JavaScript

CSS3 Flexbox该怎么使用?

74 0

文章来源:一、前言Flexbox 是一个 CSS3 的盒子模型 ( box model ),顾名思义它就是一个灵活的盒子 ( Flexible Box ),为什麽最近这个属性才红起来呢?最主要也是因为 CSS3 的规范终于普及 ( 或 IE 终于败亡 ),加上行动装置的发展促成了响应式布局兴起,自适应长宽弹性相当大的 Flexbox 就趁势而起了。第一步要来看 Flexbox 的盒子模型,根据 W3C 文章所描述,flex 的盒子模型如下图所呈现,与一般的盒子模型不同的地方,在于 Flexbox 的盒子模

JavaScript

css书写顺序需要注意哪些?

93 0

一、css顺序  首先声明,浏览器读取css的方式是从上到下的。我们一般书写css只要元素具备这些属性就会达到我们预期的效果,但是这会给以后的维护和浏览器的渲染效率带来一定的影响,那么该怎么书写css的顺序呢?有没有一定的规范呢?  首先我们知道css的属性按特性分为几类;  1.规定元素特性,如display、position、float,这些属性会决定他的排版方式  2.规定元素的空间占据,如line-height、margin、padding、width、height等,这些属性会决定元素的大小和位

css动画制作――CSS animate
JavaScript

css动画制作――CSS animate

225 0

熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果。今天特别推荐一个在线CSS插件功能――cssanimate,这个最大的特色就是以图形界面方式让你轻易实现漂亮的CSS3动画效果,下面一起看看这个在线工具的介绍。CSS3动画制作工具界面介绍Timeline(时间轴)Timeline是引导动画的重要区域,就像制作逐帧动画一样,可以调整每帧的内容。用户调整完毕后,直接点击左下角的播放按钮即可看到效果。视区视区就是CSS3动画预览和调整区域,所见即所得,很

JavaScript

用css3实现打点效果实例讲解

130 0

基于box-shadow实现的打点效果理论上,box-shadow可以实现任意的图形效果,自然我们可以利用box-shadow生成我们的点效果,然后通过animation控制不同时间点点的数目就可以实现点点点... loading效果了~1. 渐进兼容支持CSS3 animation动画的浏览器显示的就是打点动画效果;对于不支持的浏览器,IE7/IE8显示的是真实的字符..., IE9浏览器虽然也是CSS3生成,但是是静态的,没有动画效果;此乃渐进兼容。2. 实现原理首先HTML非常简单,就是一个标签一个

html5+CSS如何控制Table内外边框和颜色以及大小的图文教程
JavaScript

html5+CSS如何控制Table内外边框和颜色以及大小的图文教程

661 0

在默认的情况下,我们的CSS将Table的边框清除掉了,下面与大家分享下CSS控制Table内外边框、颜色、大小的样式,想学习的朋友可以参考下其实按照常理来说,现在的网站应该早已经抛弃什么表格了,现在肯定是p+CSS当道嘛!不过客户的网站在添加内容的时候始终不满意那些边框效果:要么没有,要么很粗。看得出来,这位客户是位完美主义者。在默认的情况下,我们的CSS将Table的边框清除掉了,是没有的,看到的效果是这样的。无边框Table为了给,表格加一个边框,我在CSS里面写了这样一句:1.table{bord

利用CSS3进行弹性布局时内容对齐的方法详解
JavaScript

利用CSS3进行弹性布局时内容对齐的方法详解

289 0

这篇文章主要介绍了CSS3弹性布局内容对齐(justify-content)属性使用详解,具有一定的参考价值,有兴趣的可以了解一下内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐。注意:弹性布局中有两个基本术语main axis和cross axis,一般情况下,我们可以把它们各自看作是屏幕上的行向和列向(但是严格讲,这和