字体图标
优点
- 灵活 随时修改颜色和尺寸
- 轻量级 体积小
- 兼容性好
使用方式
-
Font-classs使用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> //引入iconfont <link rel="stylesheet" href="./iconfont/iconfont.css"> </head> <body> //添加class <span class="iconfont icon-add"></span> </body> </html>
-
购物车普通做法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>购物车</title> <link rel="stylesheet" href="./iconfont/iconfont.css" /> <style> a { display: block; width: 200px; height: 50px; box-shadow: 0px 2px 12px 2px rgb(0 0 0 / 30%); text-align: center; line-height: 50px; color: #333; text-decoration: none; } .icon1 { color: #ff4403; } </style> </head> <body> <a href="#"> <i class="iconfont icon-gouwucheman icon1"></i> 购物车 <i class="iconfont icon-jiantou9"></i> </a> </body> </html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uy3yhNAV-1652355105185)(移动web.assets/image-20220316140029943.png)]
-
购物车搭配伪元素做法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>购物车</title> <link rel="stylesheet" href="./iconfont/iconfont.css" /> <style> a { display: block; width: 200px; height: 50px; box-shadow: 0px 2px 12px 2px rgb(0 0 0 / 30%); text-align: center; line-height: 50px; color: #333; text-decoration: none; } a::before { /* 设置字体图标库 */ font-family: iconfont; content: "\e600"; color: #ff4403; margin-right: 4px; } a::after { /* 设置字体图标库 */ font-family: iconfont; content: "\e60b"; margin-left: 4px; } </style> </head> <body> <a href="#">购物车</a> </body> </html>
-
在线引入字体图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- 在线引入字体图标,注意前面要加http: --> <link rel="stylesheet" href="http://at.alicdn.com/t/font_2970681_7my4eaeshh7.css" /> </head> <body> <i class="iconfont icon-zhaoxiangji"></i> </body> </html>
平面转换
优点
- 改变盒子在平面的形态(位移,旋转,缩放)
- 2d转换
使用方式
-
实现元素位移效果
-
语法
transform: translate(水平移动距离, 垂直移动距离);
-
取值(正负均可)
像素单位数值,百分比(参照物为盒子自身尺寸),注意:X轴正向为右,Y轴正向为下
-
技巧
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离:translateX() || translateY()
-
-
实现元素旋转效果
-
语法
transform: rotate(角度);注意:角度单位是deg
-
技巧
取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转
-
-
改变转换原点
-
语法
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
-
取值
方位名词(left、top、right、bottom、center)
像素单位数值
百分比(参照盒子自身尺寸计算)
-
-
改变元素的尺寸
-
语法
transform: scale(x轴缩放倍数, y轴缩放倍数);
-
技巧
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放:transform: scale(缩放倍数);
-
案例
-
位移的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>位移-基本使用</title> <style> .box { width: 500px; height: 300px; margin: 100px auto; border: 4px solid #000; } .son1 { width: 200px; height: 100px; background-color: tomato; /* 过渡 */ transition: all 0.5s; } .son2 { width: 200px; height: 100px; background-color: #6cf; /* 过渡 */ transition: all 0.5s; } /* 鼠标移入到父盒子,son1改变位置 */ .box:hover .son1 { /* transform: translate(100px, 50px); */ /* 百分比单位:参照物就是盒子自身 */ /* transform: translate(50%, 50%); */ /* transform: translate(-50%, -50%); */ transform: translateX(100px); /* transform可以改变盒子的层级关系,提高盒子的层级 */ /* transform: translateY(100px); */ /* transform: translate(100px); */ } span { /* transform: translateX(100px); */ /* margin-left: 100px; */ } </style> </head> <body> <div class="box"> <div class="son1"></div> <div class="son2"></div> </div> <span>12345,上山打老虎</span> </body> </html>
-
对定位元素居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>绝对定位元素居中效果</title> <style> .father { position: relative; width: 500px; height: 300px; margin: 100px auto; border: 4px solid #6cf; } .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: tomato; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
-
双开门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 1366px; height: 600px; background: url(./images/bg.jpg); margin: 50px auto; overflow: hidden; } .box::before, .box::after { float: left; content: ""; width: 50%; height: 100%; background: url(./images/fm.jpg); /* 添加过渡:谁在变化,谁要过渡,就给谁添加 */ transition: 1s; } .box::after { /* 背景位置,后面的方位名词,谁大就相对于谁 */ background-position: right; } .box:hover::before { transform: translateX(-100%); } .box:hover::after { transform: translateX(100%); } </style> </head> <body> <div class="box"></div> </body> </html>
-
旋转效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>旋转效果</title> <style> img { width: 250px; /* 过渡 */ transition: 2s; } img:hover { /* 顺时针旋转 360deg */ transform: rotate(360deg); /* 逆顺时针旋转 360deg */ /* transform: rotate(-360deg); */ } </style> </head> <body> <img src="./images/rotate.png" alt="" /> </body> </html>
-
转换原点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>转换原点</title> <style> img { display: block; width: 250px; border: 1px solid #000; margin: 200px auto; transition: all 3s; /* 旋转原点改变 */ transform-origin: right top; /* transform-origin: -100px -100px; */ /* transform-origin: -50% -50%; */ } img:hover { transform: rotate(360deg); } </style> </head> <body> <img src="./images/rotate.png" alt="" /> </body> </html>
-
多重转换效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>多重转换</title> <style> .box { width: 800px; height: 200px; border: 1px solid #000; margin: 200px auto; } img { width: 200px; transition: all 2s; } .box:hover img { /* 旋转会改变坐标轴向 如果平移和旋转一起设置,要先写平移,再写旋转 */ transform: translate(600px) rotate(360deg); } </style> </head> <body> <div class="box"> <img src="./images/tyre1.png" alt="" /> </div> </body> </html>
-
和平精英缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 250px;
height: 200px;
border: 1px solid #000;
margin: 100px;
line-height: 1.5;
overflow: hidden;
}
.pic img {
width: 100%;
}
.pic {
position: relative;
}
.pic::after {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(5);
content: "";
width: 58px;
height: 58px;
background: url(./images/play.png);
opacity: 0;
transition: 1s;
}
.box:hover .pic::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<!--单标签没有伪元素,img除外,当图标加载失败的时候,伪元素才会显示 -->
<img src="./images/party.png" alt="" />
</div>
<p>【和平精英】“初火”音乐概念片:四圣觉醒......</p>
</div>
</body>
</html>
渐变
优点
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
使用方式
-
实现渐变背景效果
-
语法
background-image: Linear-gradient(颜色1,颜色2)
-
取值范例
background-image: Linear-gradient(transpparent,rgba(0,0,0,.6))
-
案例
-
渐变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>渐变背景</title> <style> .box { width: 300px; height: 200px; border: 2px solid orange; /* 背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....); 参数1: 方位:默认的方位从上到下 1.方位名词:to right,to right bottom 2.角度deg:直接写度数即可,不用再加to 参数2:颜色1; 参数3:颜色2;..... */ /* background-image: linear-gradient(to right, #59c173, #a17fe0, #5d26c1); */ background-image: linear-gradient(45deg, #59c173, #a17fe0, #5d26c1); } </style> </head> <body> <div class="box"></div> </body> </html>
-
产品展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { position: relative; width: 350px; height: 247px; line-height: 1.5; margin: 100px; } .box .title { position: absolute; left: 0; bottom: 0; color: #fff; padding: 20px; z-index: 3; } .box h5 { font-weight: 400; } /* 当鼠标移入盒子的时候,出现一个遮罩层,并且遮罩层的背景颜色是渐变的 */ .box::after { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); opacity: 0; transition: 0.5s; } .box:hover::after { opacity: 1; } </style> </head> <body> <div class="box"> <img src="./images/pic.png" alt="" /> <div class="title"> <h5>智能体</h5> <h4>打造行业智能体,共建全场景智慧</h4> </div> </div> </body> </html>
空间转换
优点
实现元素在空间内的位移、旋转、缩放等效果
- 空间:是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。
- 空间转换也叫3D转换
- 属性:transform
使用方式
- 使用translate实现元素空间位移效果
- 语法
- transform: translate3d(x, y, z);
- transform: translateX(值);
- transform: translateY(值);
- transform: translateZ(值);
- 取值(正负均可)
- 像素单位数值
- 百分比
- 语法
- :使用perspective属性实现透视效果
- 属性(添加给父级)
- perspective: 值;
- 取值:像素单位数值, 数值一般在800 – 1200。
- 透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
- 作用
- 空间转换时,为元素添加近大远小、近实远虚的视觉效果
- 属性(添加给父级)
- 使用rotate实现元素空间旋转效果
- 语法
- transform: rotateZ(值);
- transform: rotateX(值);
- transform: rotateY(值);
- 扩展
- rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
- x,y,z 取值为0-1之间的数字
- 语法
- 使用transform-style: preserve-3d呈现立体图形
- 实现方法
- 添加 transform-style: preserve-3d;
- 使子元素处于真正的3d空间
- 呈现立体图形步骤
- 盒子父元素添加transform-style: preserve-3d;
- 按需求设置子盒子的位置(位移或旋转)
- 注意
- 空间内,转换元素都有自已独立的坐标轴,互不干扰
- 实现方法
案列
-
空间位移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>01-空间位移.html</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } div { width: 200px; height: 200px; background-color: aqua; margin: 200px auto; /* 设置在x轴方向上移动 */ /* transform: translateX(-300px); */ /* 设置在y轴方向上移动 */ /* transform: translateY(-300px); */ /* 设置在z轴上移动 */ /* 记起来z轴方向 正方向 屏幕指向外面 */ /* 默认情况下 不可能让div 飘出屏幕外面!! 默认情况下 看不到 z轴上的变化 */ transform: translateZ(500px); } </style> </head> <body> <div>空间位移</div> </body> </html>
-
透视效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>01-空间位移.html</title> <style> /* 视距 设置 人的眼睛到被观察物体之前的距离 如何去使用 1 代码规范 要给被观察的物体的父元素使用!! */ * { margin: 0; padding: 0; box-sizing: border-box; } body { /* 视距 一般随意的设置1000 */ perspective: 1000px; } div { width: 200px; height: 200px; background-color: aqua; /* transform: translateZ(500px); */ /* 两行代码是等价的!! */ transform: translateX(100px) translateY(100px) translateZ(100px); transform: translate3d(100px, 100px, 100px); } </style> </head> <body> <div>空间位移</div> </body> </html> <!-- 当我们想要看见元素 在 z轴上的变化的时候 需要给被观察的物体添加 视距 1000px -->
-
空间旋转-X轴
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>04-空间旋转-X轴.html</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #666; text-align: center; padding-top: 300px; /* 元素近大远小 效果 视距 p 视距属性 要给被观察的元素添加 */ perspective: 1000px; } img { transform: rotateX(0deg); transition: 2s; } img:hover { transform: rotateX(360deg); } </style> </head> <body> <img src="./images/pk1.png" alt="" /> </body> </html>
-
沿着多条对称轴旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>05-空间旋转-Y轴</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #666; text-align: center; padding-top: 300px; perspective: 1000px; } img { /* 沿着任意的方向做方向 */ /* transform: rotate3d(x,y,z,角度); */ /* 矢量 两个点 可以确定方向还有长度! */ /* transform: rotate3d(x坐标,y坐标,z坐标,角度); */ /* transform: rotate3d(1, 1, 0, 30deg); */ /* transform: rotate3d(2, 1, 0, 30deg); */ transform: rotate3d(1, 1, 1, 30deg); } </style> </head> <body> <img src="./images/pk1.png" alt="" /> </body> </html>
-
立方体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>07-立方体.html</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { perspective: 1000px; } .box { /* css3 3d层面 挺 酷炫 新的技术 浏览器 遗留下来的bug 对待!! */ opacity: 0.9; width: 200px; height: 200px; position: relative; margin: 100px auto; /* 开启立体空间 */ transform-style: preserve-3d; /* 任意轴 旋转 */ /* transform: translateZ(300px) rotate3d(1, 1, 1, 60deg); */ /* transform: translateZ(0px); */ transition: 2s; } .box:hover { transform: rotateX(-90deg); } .box div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* opacity: 0.8; */ } .front { background-color: salmon; /* z轴 正 移动 +100 */ transform: translateZ(100px); } .back { /* z轴 负 移动 -100 */ transform: translateZ(-100px); background-color: seagreen; } .left { transform: translateX(-100px) rotateY(90deg); background-color: lawngreen; } .right { transform: translateX(100px) rotateY(90deg); background-color: yellow; } .up { background-color: aqua; transform: translateY(-100px) rotateX(90deg); } .bottom { transform: translateY(100px) rotateX(90deg); background-color: purple; } </style> </head> <body> <div class="box"> <div class="front">前</div> <div class="back">后</div> <div class="left">左</div> <div class="right">右</div> <div class="up">上</div> <div class="bottom">下</div> </div> </body> </html> <!-- 1 静态结构 1 定一个父盒子 box 包装着6个小 平面 (立方体 有6个面) 2 写6个面 1 先使用定位 来重叠在一起 (方便后面一个一个的调整他们的位置 构造立方体 ) 2 使用 空间变换来实现 立方体!! 1 前: z轴 正 移动 +100 2 后: z轴 负 移动 -100 3 左: x轴 负 移动 -100 y轴 旋转 90deg 4 右: x轴 正 移动 100 y轴 旋转 90deg 5 上: y轴 负 移动 -100 x轴 旋转 90deg 6 下: y轴 正 移动 100 x轴 旋转 90deg 3 提前检查一下 有效果 1 给box 开启立体空间效果-立体呈现 3d呈现 2 给box 旋转 4 同学做一件事 1 拿到老师的代码的模版 也实现到 老师现在的案例的进度 即可 -->
-
3D导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>08-3D导航.html</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .box { width: 300px; height: 40px; margin: 200px auto; } a { float: left; width: 100px; height: 40px; color: #fff; text-decoration: none; position: relative; transform-style: preserve-3d; transition: 1s; } a:hover { transform: rotateX(-90deg); } a div { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .up { background-color: orange; transform: translateY(-20px) rotateX(90deg); } .front { background-color: green; transform: translateZ(20px); } </style> </head> <body> <div class="box"> <a href="#"> <div class="up">上</div> <div class="front">前</div> </a> <a href="#"> <div class="up">上</div> <div class="front">前</div> </a> <a href="#"> <div class="up">上</div> <div class="front">前</div> </a> </div> </body> </html> <!-- 立方体 1 控制多个面先定位 重叠在一起 2 3d变换 构造立方体 1 上: y轴的负方向 移动高度的一半 沿着x轴渲染90deg 2 前: z轴的正方向 移动高度的一半 3 a标签开启 3d 立体空间 4 a标签鼠标移入 让a标签 沿什么轴 旋转 x 轴 -->
动画
作用
- 实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)
定义动画
-
<style> @keyframes 动画名称 { from {} to {} } </style>
-
<style> @keyframes 动画名称 { 0% {} 50%{} 100%{} } </style>
使用动画
- animation: 动画名称 动画花费时间;
animation相关属性
属性 | 作用 | 取值 |
---|---|---|
animation-name | 动画名称 | |
animation-duration | 动画时长 | |
animation-delay | 延迟时间 | |
animation-fill-mode | 动画执行完毕时状态 | forwards:最后一帧状态,backwards:第一帧状态 |
animation-timing-function | 速度曲线 | steps(数字):逐帧动画 Linear:匀速 |
animation-iteration-count | 重复次数 | infinite为无限循环 |
animation-direction | 动画执行方向 | alternate为反向(配合infinite可以来回播放) |
animation-play-state | 暂停动画 | paused为暂停,通常配合:hover使用 |
flex布局
用法
- 设置父盒子属性display:flex
- 父项可以设置主轴对齐方式(justify-content)
- 子项左对齐 flex-start
- 右对齐 flex-end
- 居中对齐 center
- 先两侧对齐,间隔存放 space-between
- 间隔存放 - 两侧空间小于中间 space-around
- 绝对平均 space-evenly
- 父项设置换行属性(flex-wrap)
- nowrap 不换行 默认
- wrap 换行
- 父项设置侧轴单行元素对齐方式(align-items)
- center 居中
- flex-start 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
- baseline 元素位于容器的基线上。
- stretch 默认值。元素被拉伸以适应容器。
- 父项设置侧轴多行元素对齐方式(align-content)
- 取值与justify-content一样
- 父项设置主轴方向(flex-direction)
- row 默认值 左到右
- row-reverse 右到左
- column 上到下(常用)
- column-reverse 下到上
- 子项相关属性
- flex 设置 子项占父项宽度(高度)的比例
- align-self 设置子项自己 在侧轴上的对齐方式
- flex-start
- flex-end
- center
子元素的变化
- 不再区分行内,行内块,块级元素,全部都可以设置宽度和高
- 子项默认的宽度由内容撑开,默认的高度等于父高
- 使用float没有效果
- 默认情况下,子项总宽度大于父项的宽度时,不会换行,只会压缩子项的宽度
REM
是什么?
- rem大小相对于页面根标签的字体大小
- 不要去研究rem小于12的情况
如何使用?
- 下载插件px to rem & rpx
- 去到vscode的设置中添加代码
- “cssrem.rootFontSize”:37.5 // 1rem = 设计稿的宽度 / 10
- 引用淘宝开发的flexible.js
Less
是什么?
- 通过变量声明来控制css
怎么用?
-
下载插件 easy less
-
创建less文件
-
在less文件内编写代码,保存后通过插件会自动生成css文件
-
语法
@+任意名称(有语义的英文)
@color: yellow; div { color: @color; border: 1px solid @color; }
-
less的样式计算
div { width: 100px + 200px; width: 300px -200px; height:100px * 3; height: (300px / 3); //除法要加括号 }
-
less的mixin语法
- 作用:提取公共样式
//定义一个mixin .aaaa() { //存放公共样式 background-image: url(1.png); background-size: 100%; background-repeat: no-repeat; } div { .aaaa(); background-position: -300px 30px; } a { .aaaa(); background-position: -400px 60px; }
-
函数式用法
.aaaa(@a,@b) { background-image: url(1.png); background-size: 100%; background-repeat: no-repeat; background-position: @a @b; } div { .aaaa(-300px,30px); }
-
嵌套的伪元素语法
div { height: 200px; background-color: skyblue; //& ----->连接符,不加生成的伪元素代码会有空格,造成语法错误 &::before{ content: "less实现的伪元素"; } }
-
嵌套
- 语法按照html的结构即可
div { height: 200px; background-color: skyblue; p {} > p {}//子代选择器 特指亲儿子,不改变孙子的样式 span {} a { img {} } }
媒体查询
是什么?
- 解决响应式布局需求
响应式布局
- 不同的屏幕宽度使用不同的css
如何使用?
//屏幕宽度为400px时改变Body颜色
@media(width:400px){
body{
background-color: yellow;
}
}
-
推荐写法
@media screen and (width:400px){ body{ background-color: yellow; } }
媒体查询-指定区间
-
屏幕宽度小于100px
@media screen and (max-width:100px){ body{ background-color: red; } }
-
屏幕宽度大于500px
@media screen and (min-width:500px){ body{ background-color: green; } }
-
屏幕宽度大于300px小于500px
@media screen and (min-width:300px) and (max-width:500px){ body{ background-color: yellow; } }
BootStrap
是什么?
- 响应式布局框架
栅格式布局
-
屏幕种类
种类 宽度 名称 大屏幕 >1200px lg 中等屏幕 992-1200 md 小屏幕 768-992 sm 极小屏幕 <768 xs
引用方式
-
引入样式文件
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" />
-
引入jquery.js
<script src="./lib/jquery.js"></script>
-
引入 bootstrap.js
<script src="./lib/bootstrap/js/bootstrap.js"></script>
使用方式
-
先写版心(写在父盒子)
- container(居中)
- container-fluid(全屏居中)
-
写行 .row
-
写栅格
- 分析当前要在什么屏幕下
- 每一列占几份
-
示例
<div class="container"> <div class="row"> <div class="col-lg-6">1</div> <div class="col-lg-6">2</div> </div> </div>
:400px){
body{
background-color: yellow;
}
}
## 媒体查询-指定区间
- 屏幕宽度小于100px
```css
@media screen and (max-width:100px){
body{
background-color: red;
}
}
-
屏幕宽度大于500px
@media screen and (min-width:500px){ body{ background-color: green; } }
-
屏幕宽度大于300px小于500px
@media screen and (min-width:300px) and (max-width:500px){ body{ background-color: yellow; } }
BootStrap
是什么?
- 响应式布局框架
栅格式布局
-
屏幕种类
种类 宽度 名称 大屏幕 >1200px lg 中等屏幕 992-1200 md 小屏幕 768-992 sm 极小屏幕 <768 xs
引用方式
-
引入样式文件
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" />
-
引入jquery.js
<script src="./lib/jquery.js"></script>
-
引入 bootstrap.js
<script src="./lib/bootstrap/js/bootstrap.js"></script>
使用方式
-
先写版心(写在父盒子)
- container(居中)
- container-fluid(全屏居中)
-
写行 .row
-
写栅格
- 分析当前要在什么屏幕下
- 每一列占几份
-
示例
<div class="container"> <div class="row"> <div class="col-lg-6">1</div> <div class="col-lg-6">2</div> </div> </div>