分类
- 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 物理像素