为您找到搜索结果：1786个
scss 用法 及 es6 用法讲解
scss用法的准备工作，下载考拉编译工具 且目录的名字一定不能出现中文，哪里都不能出现中文，否则就会报错 es6用法 let和const let 声明变量的方式 在{}代码块里面才有效；且在相同的代码块，不能声明两个相同的变量名，一旦出了这个{}代码块，此变量无效 const 声明常量的方式 声明完毕后，我们不能轻易的更改声明的常量，（但不代表我们不能更改，只是更改，还不如不用他声明） 字符串介绍： 传统的字符串拼接的方式，麻烦且容易出错，所以我们的es6提供了一种新的字符串拼接的方式`` 虽然这种写法，确实要比传统的写法高明了许多，但是还是有很多想吐槽的点； 这种写法在字符串里面并不支持js语法了，也就是我们并不能进行for循环和条件判断，使得我们又不得不为此做出很多的处理 但是，比起传统的写法高明了很多，例如，我们使用字符串拼接的话，显得美观又漂亮 用法：我们使用英文下的反引号来代替我们之前的双引或单引``（键盘tab上面的键） 案例：leta="world"; ...
sass scss less 的编译工具 koala
使用koala时注意事项： 1.目录中一定不能出现中文，否则就会报错 2.文件中如果出现中文（！注释也算） 开头一定要加 @charset"utf-8"; 否则就会出现无法编译的情况； 网上给的解决方案用不了，可能时下载的版本问题： 进入Koala安装目录，例如：C:ProgramFiles(x86)Koalaubygemsgemssass-3.4.9libsass 找到engine.rb文件，在该文件中找到最后一个require元素，在该元素之后添加以下代码即可。 Encoding.default_external=Encoding.find('utf-8') 网上的还有一种解决方案： 卸载ruby重新安装 网上的方法试了，没有效果，可能是版本为题：我的版本上面没有sass-3.4.9这个文件； 所以，我还是老实的用了比较笨的方法；...
如何让css与js分离
在webpack我们如何让css与js分离； 我们需要安装插件：extract-text-webpack-plugin 1.用：npm下载插件 npminstallextract-text-webpack-plugin--save-dev 2.在官网上查看用法：https://www.npmjs.com/ less的配置，解析 我们需要的插件：less less-loader 1.用：npm下载插件 npminstalllessless-loader 2.在官网上查看用法 但是需要我们注意的一个点：如图 自动化：对代码起到监控的作用 ...
webpack 自动运行，及打包 img css json 的操作 npm插件的使用方法
没有指令操作的属性生产环境，有指令操作的属于开发环境 webpack：输入指令后，便会自动开启一个浏览器 需要插件：open-browser-webpack-plugin 生产环境 想使用node.js中path的方法， varpath=require("path") 路径操作 path.resolve() 方法将路径变成绝对路径， 参数（__dirname,"./目录"）， 意思为把当前目录放在哪个目录下 在自动启动服务器的时候，webpack-dev-server会把当前项目当根目录 想指定根目录，并改端口； 我们在webpack.config.js 在属性 devServer:{ contentBase:"" //根目录 port:"" //端口 proxy:"" //代理服务器 } 想引入图片cssjson等等怎么办； 图片主要针对的背景图片，因为css的打包的，所以，传统的引入背景的方法无效，所以我们需要将图片打包 json文件： require("json文件")...
移动端轮播完整版css3加原生写法
<!doctypehtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><scriptsrc="rem插件.js"></script><style>*{margin:0;padding:0;}html{font-size:100px;overflow-x:hidden;}body{font-size:14px;}div,ul,li,img{margin:0;padding:0;}.box{width:100%;height:1.17rem;}.clear...
css3爆炸轮播效果
<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>爆炸效果轮播</title><style>*{margin:0;padding:0;}ul,ol{list-style:none;}.slid{width:300px;height:200px;margin:200pxauto;position:relative;-webkit-perspective:1500px;transform-style:preserve-3d;}.slid.box{width:300px;height:200px;}.slid.boxdiv{width:300px;height:200px;position:absolute;display:none;}.slid.boxdiv:nth-of-type(1){display:block;}.slid.boxdivimg{width:300px;height:200px;}.slid#btn1{wi...
心形陀螺案例css3
<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>Title</title><style>body{background:#000;}.box{width:300px;height:300px;margin:200pxauto;-webkit-perspective:1500px;position:relative;}.div{width:150px;height:250px;position:absolute;transform-style:preserve-3d;animation:name2slinearinfinite;transform:rotateY(0deg);}@-webkit-keyframesname{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}.div>div{width:140px;height:240px;posi...
圆周运动的css3特效案例
<!doctypehtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>圆周运动的css3特效</title><style>.box{width:300px;height:300px;margin:200pxauto;position:relative;-webkit-perspective:1500px;}.div{width:300px;height:300px;position:absolute;transform-style:preserve-3d;animation:name8slinearinfinite;transform:rotateX(0deg)rotateY(0deg);}@-webkit-keyframesname{from{transform:rotateX(0deg)rotateY(0deg);}to{transform:rotateX(360deg)rotateY(360deg);}}.div>div{widt...
css3的各种属性的讲解
1.渐变（gradients） 水平渐变：lineargradient 语法：background:linear-gradient(direction,color1,color2); direction介绍： 1.这个参数可以省略，默认方向从上到下； 2.这个阐述如果不省略，写方向的起始值：top（从上到下）left（从左到右） bottom（从下到上） right（从右到左） 3.如果这个参数不省略，这个属性前面需要加前缀 或者to终点 4.对角渐变：linear-gradient(lefttop,red,blue); 5.角度deg0代表从下到上，90deg代表从左到右， linear-gradient(180deg,red,blue) 类似于罗盘：画图 6.渐变过程：background:linear-gradient(red0%,blue20%,orange60%); 0%在0%处代...
无缝轮播的案例 及css3无缝轮播案例
无缝轮播的案例： <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>无缝轮播</title> <style> *{ margin:0; padding:0; } div{ width:1000px; height:200px; position:relative; top:20px; left:100px; border:red5pxsolid; overflow:hidden; } ul{ width:2000px; height:200px; list-style:none; position:absolute; top:0; left:-1020px...
3d图像坐标轴及css3属性的讲解
3d立体坐标轴 如有不知道各种插件的怎么办？ 网上查，百度 1.css选择器： 1.id 2.class 3.标签 4.子代 5.后代 6.交集 7.并级 8.通配符 9.结构 10.伪类 11.属性 12.相邻 13.兄弟 2.浏览器的内核 谷歌的内核：webkit Firefox（火狐）的内核：Gecko ie的内核：Trident opera（欧朋）的内核：presto 国内浏览器的内核：webkit 注意：css3并不是所有的浏览器都兼容 3.针对同一样式（css3）在不同浏览器的兼容，需要在样式的属性前加上他的内核前缀 谷歌的前缀：-webkit-transition opera(欧朋)的前缀：-o-transition 火狐（Firefox）的前缀：-moz-transition ie的前缀：-ms-transition; 4.css3中的过渡属性：（transition） 过渡属性的注意事项：时间要加单位； 过渡的属性有四个： 属性名称（tra...
jQuery的html和css
jQuery每次返回的都是当前的集合对象； 每个方法用的时候都会把他的元素对象返回，他每次返回的都是最近的那个元素； 1.addclass() 备选元素添加一个类名 2.removeclass() 移除被选元素的类名 3.after() 在被选元素的后面插入内容（html,jquery,css） 4.before() 在被选元素的前面插入内容 5.append() 在被选元素的结尾处插入内容 5-1：appendto() 功能一样，写法不一样，内容写在前面 6.prepend() 在被选元素的开头处插入内容 7.attr() 既可以设置又可以返回 7-1.prop() 设置和返回被选元素的属性 同attr() 8.css() 被选元素设置或返回一个或多个css样式属性 9.height() 设置或返回被选元素高的3种写法； 10.width() 设置或返回被选元素的宽度； 11.html() 设置或返回被选元素的内容； 11-1.text() 只能插入文本 12.insertBefore() 在被选元素前面插入html...
《PHP, MySQL, Javascript和CSS》读书随手记----MySQL篇
要求结尾分号如果在命令输入期间想要终止其运行,不要Ctrl-C.要输入c,并按回车键.sql命令和关键字不区分大小写.表名在windows中不区分大小写,但是在linux和osx中区分 创建一个数据库CREATEDATABASEpublication创建用户GRANTPRIVILEGESONdatabase.objectTO'username'@'hostname'IDENTIFIEDBY'password' 添加自增型ID列ALTERTABLEclassicsADDidINTUNSIGNEDNOTNULLAUTO_INCREMENTKEY 删除列ALTERTABLEclassicsDROPpages; 删除表DROPTABLEclassics; 添加新列ALTERTABLEclassicsADDpagesSMALLINTUNSIGNED 添加索引ALTERTABLEclassicsADDINDEX(author(20));ALTERTABLEclassicsADDINDEX(title(20));ALTERTABLEclas...
《PHP, MySQL, Javascript和CSS》读书随手记----php篇
1.基础注释://或/**/$标示变量语句末尾加分号数组:$oxo=array(array('x','','o'),array('p','x',''),array('','x','p'));echo$oxo[1][2]常量:之前不能用$符号,只能用define函数定义2.对象复制clone操作符$obj2=clone$obj1;3.类类的构造方法:__construct()析构方法:__destruct()静态方法:static 调用User::static_function()4.include_once和require_once. 尽量使用xxx_once,防止多次定义同名的常量或函数报错include_once存在的问题是,PHP只会试图导入被请求的文件,即便文件没有被找到程序依旧会继续执行.5.术语:当创建一个程序使用对象时,需要设计一个数据和代码的结合体,称为类.任何这个类创建出来的新对象称为该类的一个实例(或事件).和对象有关的数据称为属性,对象使用的函数称为方法.在定义一个类时,要提供属性的名字以及相应方法的代码..使用继承,新的类会拥有继...
CSS常见布局问题整理
实现div的水平居中和垂直居中多元素水平居中实现栅格化布局实现效果: 这大概是最经典的一个题目了,所以放在第一个.方法有好多,一一列来主要思路其实就是使用position,相对父元素做绝对定位(设置百分比[由父元素宽高调节子元素大小]/设置margin和相对位置(确定宽高))使用flex属性使用tranfrom做相对位移的调节1) 只适用:宽高已定设置position:absolute(父元素记得设置:relative),然后top和left设置50%,50%,再设置margin-left=宽/2,margin-top:宽/2.div1{width:500px;height:500px;border:1pxsolidblack;position:relative;/*很重要,不能忘*/}.div2{background:yellow;width:300px;height:200px;margin-left:-150px;margin-top:-100px;top:50%;left:50%;position:absolute;2)只适用:固定宽高;如果宽高随意,想靠内...