长春网站建设哪家公司好,网站项目方案,外包网站问些什么问题,网页建站总结报告html
head meta charsetUTF-8 / title空间转换/title
/head
body !-- 空间转换 空间#xff1a;是从坐标轴角度定义的X,Y,和Z三条坐标轴构成一个立体空间 Z轴位置与视线方向相同 空间转换也叫3D转…html
head meta charsetUTF-8 / title空间转换/title
/head
body !-- 空间转换 空间是从坐标轴角度定义的X,Y,和Z三条坐标轴构成一个立体空间 Z轴位置与视线方向相同 空间转换也叫3D转换 属性transform -- !-- 空间转换 -平移 属性 transformtranslate3d(x,y,z); transform: translateX(); transform: translateY(); transform: translateZ(); 取值正负均可 像素单位数值 百分比参照盒子自身尺寸计算结果 电脑是平面的默认情况下无法观察到 Z 轴平移的效果 -- !-- 视距perspective 作用指定了观察者与Z0平面的距离为元素添加透视效果 透视效果近大远小近实远虚 属性添加给父级取值范围800-1200 perspective视距; -- !-- 空间旋转 transform:rotateZ值; transform:rotateX (值); transform:rotateY (值); 左手法制根据旋转方向确定取值正负 左手握住旋转轴拇指指向正值方向其他四个手指弯曲方向为旋转轴正值方向 自定义旋转轴 rotate3dx,y,z:用来自定义旋转轴的位置及旋转的角度 x,y,z取值为0-1之间的数字 -- !-- 立体呈现 transform-style 作用设置元素的子元素是位于3D空间中还是平面中 属性名transform-style给父级加 属性值flat子级处于平面中 preserve-3d子级处于3D空间 注意每个面都有独立的坐标轴 --
/body
/html !DOCTYPE html
html
head meta charsetUTF-8 / titleless/title
/head
body !-- less是一个css与处理器文件后缀是.less使css具备一定的逻辑性计算能力
注意浏览器不识别less代码目前阶段网页要引入对应的css文件
cscode插件easy less保存less文件自动生成对应的css文件 -- !-- less-注释
单行注释
语法//注释内容
快捷键ctrl/
块注释
语法/*注释内容*/
快捷键shiftalta -- !-- less运算
加、减、乘、直接书写计算表达式
除法需要添加小括号或. -- !-- less - 嵌套
作用快速生成后代选择器
·father
colorred
.son
width200px
a
colorgreen
//表示的是当前选择器代码写到谁的大括号里面就表示谁不会生成后代选择器
应用配合hover伪类或nth-child结构伪类使用
hovercolorblue -- !-- less - 变量
概念容器存储数据
作用存储数据方便使用和修改
语法
定义变量变量名数据
使用变量css属性变量名 -- !-- less-导入
作用导入less公共样式文件
语法导入import“文件路径”
提示如果是less文件可以省略后缀
import‘./base.less’
import‘/common’ -- !-- less - 导出
写法在less文件的第一行添加//out存储url
提示文件夹名称后面添加/
//out./css/
指定文件夹
// out./index.css
生成对应的css
//out.mycss/index.css
在mycss文件中生成index.css 禁止导出
写法在文件第一行//outfalse -- /body
/html
