标签:
◆LESS
基于CSS的一种扩展技术;引入了变量、混合、运算、函数;简化CSS的代码,降低维护成本;必须通过解析器(koloa).
***步骤***
①新建文件夹
②.html文件 .less文件
③启动koloa配置路径
④输入less文件 刷新koloa
⑤会自动生成一个.css的文件(在写的过程中不要关闭koloa软件)
⑥html引入的文件是koloa解析出来的CSS文件
◆**◆
①变量:@变量名:值 如 @名称自取: 5px soild red;
使用时 div{
border:@名称自取
}
②混合量:mixin
class类: .名称{声明}
id类 : #名称{声明}
以上的名称均可自己取
元素属性: 元素名称{声明}
它的名称不能自取 , 必须是元素
如:
.名字自取1{
width:200px;
height:300px;
}
#名字自取2{
font-size:30px;
}
使用时: div{
.名字自取1;
#名字自取2;
}
**是参数的混合集合:调用多个函数,值可变
.名称自取0(@名字自取1;@名字自取2){
width:@名字自取1;
height:@名字自取2;
}
使用时: div{
.名字自取0(width的值;height的值);
color:red
}
◆SASS
配置路径中不能出现中文字符 有两种后缀名 .sass 不用大括号和分号 .scss使用大括号和分号 推荐使用
变量 $ 变量名:值 (与LESS一样的用法,知识把@变成$了)
嵌套 ①选择器嵌套 必须满足上一层的条件才会触发
②属性嵌套
混合 声明: @mixin 名称{}
使用: @include名称;
◆BOOTSTRAP
960栅格式布局:
12列式 每格60px 间距20px 3 6 3版式 三格式布局 常用
16列式 每格40px 间距20px 3 3 6 4版式 四格式布局
24列式 每格30px 间距10px
32列式
container:容器
包含文件:CSS JS FONTS (免费图标)
**配置**
①<html lang="zh-CN"> </html> 支持html5文档
②<meta name="viewport" content="width=device-width, initial-scale=1.0"> 网页自适应
③<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-cale=1.0,user-scale=no"> 用户禁用缩放
④ <link rel="stylesheet" href="../css/bootstrap.min.css"> 引入bootstarp的CSS文件
⑤<meta http-ea-quir="x-ua-compatible",content=IE:edg"> 兼容IE浏览器 要兼容IE8还需要加入repond.js文件
⑥在body中加入JS文件
<script src="../js/jquery-1.11.2-min.js"></script>
<script src="../js/bootstrap.min.js"></script>
标签:
原文地址:http://www.cnblogs.com/plainsailing/p/5878669.html