前端学习(七)less(笔记)
less---处理器:koala_2.0.4_portable
属于css预处理语言,可以让你的css语言更有逻辑性!
编译css的!
准备工作:
1.项目:
js
css
img
less
2.less:
a1.less
3.把项目拖到编译软件里
点击绿色按钮:在css文件夹里会编译出一个a1.css
4.开始写页面
1.新建index.html
2.在index.HTML里面引入编译出来的a1.css
3.在index.HTML里面写标签,在a1.less里面写样式!
4.在a1.less里面写less方法的样式
---------------------------------------------------
less方法:
1.样式值变量!
变量:名字
例子:
@w:300px;
@b:3px;
@back:#000;
@da:dashed;
div{width:@w; height:100px; border:@b @da @back;}
p{width:@w;height:200px; background:@back;border:@b solid red;}
2.运算!
例子:
@w:300px;
@b:3px;
@back:#000;
@da:dashed;
.box1{width:@w+300px; height:100px-50px; border:@b @da @back;}
p{width:@w;height:200px+@w; background:@back;border:@b solid red;}
.box2{width:@w/3; height:100px*5; border:@b @da @back;}
3.嵌套:
最好嵌套4层!
html:
<div class="box">
<div class="t-box">
<ul>
<li>
<div class="box1">
<p>
<a href></a>
</p>
</div>
</li>
</ul>
</div>
</div>
less:
.box{
width:100px;
t-box{
width:100px;
ul{
height:100px;
li{
width:100px;
}
}
}
}
.box ul li{
.box1{
width:300px;
p{
width:200px;
a{
font-szie:100px;
}
}
}
}
4.伪类:
css:
a{color:red}
a:hover{color:blue};
less:
a{
color:red;
&:hover{
color:green;
}
}
----------------------------
css:
.clearfix:after{display:block; content:'';clear:both}
.clearfix{zoom:1};
less:
.clearfix{
zoom:1;
&:after{
display:block;
content:'';
clear:both;
}
}
====================================================
5.定义一个选择器
例子:
.text{----定义一个class选择器
line-height:100px;
text-align:center;
}
div{
width:100px;
height:100px;
border:2px solid red;
.text;---调用上面的选择器
}
p{
width:100px;
height:100px;
border:2px solid blue;
.text;---调用上面的选择器
}
---------------------------------------------
6.定义选择器加传参:
例子:
.text(@num){
line-height:@num;
text-align:center;
}
div{
width:100px;
height:100px;
border:2px solid red;
.text(100px);
}
p{
width:100px;
height:200px;
border:2px solid blue;
.text(200px);
}
------------------------------------------
7.有默认值的传参!
.text(@num:100px){
line-height:@num;
text-align:center;
}
.box1{
width:100px;
height:100px;
border:2px solid red;
.text();
}
.box2{
width:100px;
height:100px;
border:2px solid red;
.text();
}
.box3{
width:100px;
height:100px;
border:2px solid red;
.text();
}
.box4{
width:100px;
height:400px;
border:2px solid red;
.text(400px);
}
p{
width:100px;
height:200px;
border:2px solid blue;
.text(200px);
}
8.多个传参
前端学习(七)less(笔记)的更多相关文章
- web前端学习之旅笔记01--HTML
web前端学习之旅笔记01--HTML HTML最容易上手,但也易忘,实际开发中有时需要查阅官方文档,小伙伴们别忘了哟! HTML 教程 (w3school.com.cn) HTML是网页的骨架负责页 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 前端学习:学习笔记(HTML部分)
前端学习:学习笔记(HTML部分) HTML学习总结(图解) HTML简介 1.HTML是什么? 超文本标记语言 超文本:文字/图片/音频/视频.... 标记/标签 2.HTML的用途? 是用来编写静 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 前端学习 第七弹: Javascript实现图片的延迟加载
前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img src="" x-src="/acsascas ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
随机推荐
- 十、设计模式之代理(Proxy)模式
什么是代理模式 代理模式是对象的结构模式,为其他对象提供一种对象以控制对这个对象的访问. 代理模式的结构图如下:(源自大话设计模式) Subject:定义了RealSubject和Proxy的公共 ...
- Tomcat 配置错误界面
Tomcat发生错误时跳转到错误页面 注意 :5.0下操作需要删除掉注释语句,不然报错,原因未知 一.修改 tomcat 的配置文件 修改 tomcat 的配置文件,当页面发生错误时跳转到指定的页面, ...
- 简易的Master-Worker框架
Master-Worker模式是一种使用多线程进行数据处理的结构,多个worker进程协作处理用户请求,master进程负责维护worker进程,并整合最终处理结果 主要参与者 Worker:用于实际 ...
- tensorflow报错
libcublas.so.9.0: cannot open shared object file: No such file or directory 输入命令: sudo ldconfig/usr/ ...
- JAXB中的@XmlRootElement注解详解
@Retention(value=RUNTIME) @Target(value=TYPE) public @interface XmlRootElement @Inherited @Retention ...
- java中的成员变量、类变量,成员方法、类方法 属性和方法区别
成员变量:包括实例变量和类变量,用static修饰的是类变量,不用static修饰的是实例变量,所有类的成员变量可以通过this来引用. 类变量:静态域,静态字段,或叫静态变量,它属于该类所有实例共有 ...
- Code First 延迟装入特性
使用ORM框架,基本上都会添加“延迟装入”的特性支持,当使用Entity Framwork 的objectContext与DbContext操作数据时,默认都使用“延迟装入”,也就是当我们在应用程序里 ...
- TIM4定时器功能设置
一.初始化过程 /*********************************************************************** 利用TIM4定时器作为计时,每个0.1 ...
- JS基础入门篇(三十六)—面向对象( 三 )
1.class class es6 中 为 关键字用来声明 一个 类 1.只能通过new调用 2.不存在变量提升 3.多个方法之间直接书写,不需要,隔开 4.类的方法是直接定义在类的原型上的 5.定义 ...
- struts2 paramsPrepareParamsStack拦截器简化代码(源码分析)
目录 一.在讲 paramsPrepareParamsStack 之前,先看一个增删改查的例子. 1. Dao.java准备数据和提供增删改查 2. Employee.java 为model 3. E ...