前端学习(七)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盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
随机推荐
- Java compiler level does not match the version of the installed Java project facet错误
出现问题情景:从其他地方导入一个项目的时候报错:Java compiler level does not match the version of the installed Java project ...
- 利用Kubernetes(K8S)部署JAVA项目
一.jar包和war包区别 首先简单介绍一下jar包和war包区别,当时就没分清,导致部署总是傻傻分不清楚. jar包:jar包就是java的类进行编译生成的class文件就行打包的压缩包.里面是一些 ...
- Chocolatey Window系统下的软件管理工具
前言: 使用linux都喜欢使用yum ;apt-get来安装包,非常方便,那么windows也可以使用这样的方式. Chocolatey软件是Windows下的软件安装工具: 使用方法类似linux ...
- ivew-admin 点击预览图片
1. ivew-admin table { title: '产品图片', key: 'avatar1', align: 'center', render: (h, params) => { re ...
- Foobar 2000增加APE播放支持的方法
这里说明一下APE,它是一种常用的无损音乐的存储格式,通常会有将原始音乐光盘数字化后存储的APE文件搭配一个CUE文件使用.这个APE存储了音乐的原始数据,而CUE文件则是一个索引文件,用来标记音乐光 ...
- Android 编译笔记20191205
gradle下载很慢 解决问题的方法如下: 使用文件管理器 打开用户主目录 windows平台: c:\Users\用户名\.gradle macos平台: /Users/用户名/.gradle li ...
- BZOJ5205 [CodePlus 2018 3 月赛]白金元首与莫斯科
传送门 emm在雅礼集训的时候听到的一道题 上来就觉得是插头dp 最后果然是轮廓线状压233 我们简化一下题意. 有一个n*m的网格,每个格子是空地或障碍物,询问把每一个空地看成障碍物的情况下,用1* ...
- RFCN理解,不完整待补全
RFCN的核心是通过修改roi pooling的位置,来增加共享参数的层,减少运算时间: roi pooling位置的影响如下: 越靠近 Input - 对应 ROI-Wise 检测子网越深,准确度也 ...
- List Comprehension ()(二)
在list comprehension中加入if条件判断: >>> lines = [line.rstrip() for line in open('script2.py') if ...
- Ubuntu如何安装谷歌Chrome浏览器
这里提供一个Ubuntu安装谷歌浏览器的简单方法. 1. 下载谷歌浏览器安装包 wget https://dl.google.com/linux/direct/google-chrome-stable ...