分类

• 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软件

1. 下载安装node.js.msi 安装到c:
2. win+r 弹出窗口输入cmd 回车

3. node -v(验证node.js是否安装成功，要重启cmd)

4. npm install -g cnpm(安装软件cnpm)

5. cnpm -v

6. cnpm install -g node-sass(安装软件node-sass)

7. node-sass -v(验证node-sass是否安装成功)

8. 创建一个index.scss
   （F：哪个盘就是首字母大写）回车
9. 在cmd中输入 cd 托入index.scss所在的文件夹
10. node-sass index.scss index.css

11. 方向键上可以运行上次的命令

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区别

原文：https://www.cnblogs.com/liuxuhui/p/12157281.html