分类

jquery
css3 html5
php+mysql+
angular.js
react.js
微信小程序
node.js 全栈开发

前段了解

云工程师后台代码数据存储检索计算

|

|网络
|

端工程师移动端 pc端口 pad 可穿戴 ATM 嵌入式 VR模拟现实 AR增强现实 ipone android

前端

响应式设计（一套代码，在不同的端有不同的呈现方式)

.a{
    color:red;
    box-shadow:10px;
    动起来：滑动轮播；
}

css3(一套新的给浏览器指定的规范)

响应式设计               @media
引入一些炫酷web字体     @font-face
不依赖js做动画            animation
让以前方正的DOM变形     transform
3D效果                    perspective
新的布局规范              display：flex

学习网址

https://nate-river.github.io/css3
https://nate-river.github.io/blog
https://nodejs.org

学习css3的工具

sass (node-sass是sass的一个编译工具)
sass是一种css预编译系统

-less -stylus -sass

安装node.hs.msi软件

下载安装node.js.msi 安装到c:
win+r 弹出窗口输入cmd 回车
node -v(验证node.js是否安装成功，要重启cmd)
npm install -g cnpm(安装软件cnpm)
cnpm -v
cnpm install -g node-sass(安装软件node-sass)
node-sass -v(验证node-sass是否安装成功)
创建一个index.scss
（F：哪个盘就是首字母大写）回车
在cmd中输入 cd 托入index.scss所在的文件夹
node-sass index.scss index.css
方向键上可以运行上次的命令

sass的监听命令：--watch可以随时监听scss文件的变化。

如：
sass --watch style.scss:../css/style.css
也可以这样
sass --style --watch style.scss:../css/style.css
②sass的文件有2种：.sass文件和.scss文件
.sass文件：缩进语法，不含符号{ }和；
.scss文件：和css语法相似

sass函数（适配手机）

$device-list:320px,365px,360px,412px,414px,750px;
html{
@each $device in $device-list{
@media screen and(min-width:#{$device}){
font-size:100 * ($device/750);
}
}
}

scss的用法：

一、定义变量与引用

$color: #f00;
$a-color: #ff0;
$b_color: #009;

.btn {
  width: 30px;
  height: 20px;
  color: $color;
  border-radius: 5px;
  border: none;
  display: inline-block;
}

二、嵌套css

伪类选择器嵌套需要注意
群组选择器的嵌套
同层相邻选择器
子元素 >
~ 同层全体组合选择器
.div {
color: #f8f8f8;
span {
display: block;
font-size: 14px;
}
a {
color: #ddd;
&:hover {
color: #f00;
}
}
h2,h3,h4 {
font-weight: normal;
}
}

三、注释方式

这个注释不会出现在css中，

//这是注释

这个注册会出现在css中

/* 这里是注释 */

四、混合器

混合器可以传递参数：
```
  @mixin rounded-corners($px) {
    -moz-border-radius: $px;
    -webkit-border-radius: $px;
    border-radius: $px;
  }

  .div {
    @include rounded-corners;
  }
```
五、继承

a {
display: block;
}
.disabled {
color: gray;
@extend a;
}

六、计算

计算的使用，主要用在写移动端自适应的时候

1、首先计算移动客户端屏幕宽度，将document的font-size设置为px

(function init(){
var fontSize = document.documentElement.clientWidth;
document.body.parentNode.style.fontSize = fontSize +'px';
})()
2、利用1rem为html的fontsize的大小

// 设计图是750px的话
$basePx:750;
@function pxCount($px){
@return $px/$basePx+rem;
}

.div {
width: pxCount(18);
}

rem em px区别
rem em 常见于自适应页面的尺寸，浏览器会根据页面转化成像素值；
1rem 为html中fontsize的值
em 它们是相对于使用em单位的元素的字体大小。由于继承的存在，em很多时候会显示成相对于父元素的大小。
px 物理像素

node，sass，less，的安装与使用，css混合器，继承，计算，rem,em,px区别

分类