码迷,mamicode.com
首页 > Web开发 > 详细

初入web知识点(七)

时间:2016-09-25 20:24:50      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

◆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>

初入web知识点(七)

标签:

原文地址:http://www.cnblogs.com/plainsailing/p/5878669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!