1 字体图标
目标:使用字体图标技巧实现网页中简洁的图标效果
-
字体图标
- 字体图标展示的是图标,本质是字体。
- 处理简单的、颜色单一的图片
-
下载字体包:
- 登录(新浪微博) → 选择图标库 → 选择图标,加入购物车 → 购物车 → 添加至项目 → 下载至本地
<!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> <i class="iconfont icon-favorites-fill"> //引入具体选用图标的类名 </i> </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> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> * { margin: 0; padding: 0; } li { list-style: none; } a { color: #333; text-decoration: none; } .nav { width: 200px; margin: 50px auto; font-size: 12px; } .icon-cart-Empty-fill { color: #f40; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="#"> <span class="iconfont icon-cart-Empty-fill"></span> <span>购物车</span> <span class="iconfont icon-arrow-down"></span> </a> </li> </ul> </div> </body> </html>
2 平面转换
目标:使用transform属性实现元素的位移、旋转、缩放等效果
- 平面转换
- 改变盒子在平面内的形态(位移、旋转、缩放)
- 2D转换
- 平面转换属性
- transform
位移
目标:使用translate实现元素位移效果
- 语法
- transform: translate(水平移动距离, 垂直移动距离);
- 取值(正负均可)
- 像素单位数值
- 百分比(参照物为盒子自身尺寸)
- 注意:X轴正向为右,Y轴正向为下
- 技巧
- translate()如果只给出一个值, 表示x轴方向移动距离
- 单独设置某个方向的移动距离:translateX() & translateY()
<!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>
.father {
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
width: 200px;
height: 100px;
background-color: pink;
transition: all 1s; /* 延迟移动时间 */
}
.father:hover .son {
/* transform: translate(100px, 50px); */ /* 鼠标放上去后的移动位置 */
transform: translate(100%, 50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.1 位移-绝对定位居中
目标:使用translate快速实现绝对定位的元素居中效果
<!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>
.father {
position: relative;
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
position: absolute;
left: 50%;
top: 50%;
/* 绝对位置定位 */
/* margin-left: -100px;
margin-top: -50px; */
/* 基础写法 */
/* 进阶写法 */
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
3 案例
目标:使用translate实现元素位移效果
<!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: 1366px;
height: 600px;
margin: 0 auto;
background: url(./images/bg.jpg);
/* 超出范围之外的全部隐藏 */
overflow: hidden;
}
/* 行内样式,加宽,加高不生效 */
.box::before,
.box::after {
float: left;
content: '';
width: 50%;
height: 600px;
background-image: url(./images/fm.jpg);
transition: all 0.5s;
}
.box::after {
background-position: right 0;
}
/* 鼠标移入位置改变效果 */
.box:hover::before {
transform: translate(-100%,0);
}
.box:hover::after {
transform: translate(100%,0);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
4 旋转
目标:使用rotate实现元素旋转效果
- 语法
- transform: rotate(角度);
- 注意:角度单位是deg
- 技巧:取值正负均可
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转
<!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>
img {
width: 250px;
transition: all 0.5s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images//rotate.png" alt="">
</body>
</html>
转换原点:目标:使用transform-origin属性改变转换原点
-
语法
- 默认圆点是盒子中心点
- transform-origin: 原点水平位置 原点垂直位置;
-
取值
- 方位名词(left、top、right、bottom、center)(常用)
- 像素单位数值
- 百分比(参照盒子自身尺寸计算)
<!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> img { width: 250px; transition: all 0.5s; transform-origin: right bottom; /* 转换旋转圆心 */ border: 1px solid #000; } img:hover { transform: rotate(360deg); } </style> </head> <body> <img src="./images//rotate.png" alt=""> </body> </html>
5 多重转换
目标:使用transform复合属性实现多形态转换
-
多重转换技巧
transform: translate(600px) rotate(720deg);
<!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: 800px; height: 200px; border: 1px solid #000; } img { width: 200px; transition: all 8s; } .box:hover img { transform: translate(600px) rotate(720deg); } </style> </head> <body> <div class="box"> <img src="./images/tyre1.png" alt=""> </div> </body> </html>
6 缩放
目标:使用scale改变元素的尺寸
-
语法
-
transform: scale(x轴缩放倍数, y轴缩放倍数); (一般只写一个数字)
<!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: 300px; height: 210px; margin: 100px auto; background-color: pink; } .box img { width: 100%; transition: all 0.5s; } .box:hover img { /* transform: scale(1.2); */ /* 大于1表示放大,小于1表示缩小,等于1表示不放大不缩小 */ transform: scale(0.8); } </style> </head> <body> <div class="box"> <img src="./images/product.jpg" 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;
}
li {
list-style: none;
}
img {
width: 100%;
}
.box {
width: 249px;
height: 210px;
margin: 50px auto;
overflow: hidden;
transition: all 2s;
overflow: hidden;
}
.box p {
color: #3b3b3b;
padding: 10px 10px 0 10px;
}
.box .pic {
position: relative;
}
.box .pic::after {
position: absolute;
left: 50%;
top: 50%;
/* 第一种 */
/* margin-left: -29px;
margin-top: -29px; */
/* 第二种 不能单独出现,会被下面出现的层叠掉*/
/* transform: translate(-50%, -50%); */
content: '';
width: 58px;
height: 58px;
background-image: url(./images//play.png);
/* 大图 */
transform: translate(-50%, -50%) scale(5);
/* 看不见 */
opacity: 0;
transition: all .5s;
}
.box li:hover .pic::after {
/* 小图 */
transform: translate(-50%, -50%) scale(1);
/* 看得见 */
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<div class="pic"><img src="./images/party.jpeg" alt=""></div>
<p>【和平精英】“初火”音乐概念片:四圣觉醒......</p>
</li>
</ul>
</div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdOl5AFx-1650960101487)(https://gitee.com/silverljh/typora-two/raw/master/image/202204011631552.png)]
鼠标放上去
7 渐变
7.1 渐变背景
目标:使用background-image属性实现渐变背景效果
-
渐变是多个颜色逐渐变化的视觉效果
-
一般用于设置盒子的背景
<!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: 300px; height: 200px; /* background-image: linear-gradient( pink,green,blue ); */ background-image: linear-gradient( /* 全透明黑色类似于rgba(0,0,0,0) */ transparent, rgba(0,0,0,.6) ); } </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> .box { position: relative; } .box img { width: 300px; } .box .title { position: absolute; left: 15px; bottom: 20px; /* 层级 */ z-index: 2; width: 260px; color: #fff; font-size: 20px; font-weight: 700; } .box .mask { position: absolute; top: 0; left: 0; opacity: 0; width: 300px; height: 212px; background-image: linear-gradient( transparent, rgba(0,0,0,.6) ); transition: all .5s; } .box:hover .mask { opacity: 1; } </style> </head> <body> <div class="box"> <img src="./images/product.jpeg" alt=""> <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div> <!-- 渐变背景 mask --> <div class="mask"></div> </div> </body> </html>
鼠标放上去:
8 综合案例
<!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="./css/demo.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./images/product.jpeg" alt="">
</div>
<div class="txt">
<h4>产品</h4>
<h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
<p>
<span>了解更多</span>
<i class="iconfont icon-arrow-right"></i>
</p>
</div>
<!-- 添加渐变背景 -->
<div class="mask"></div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/huawei1.jpeg" alt="">
</div>
<div class="txt">
<h4>行业洞察</h4>
<h5>迈向智能世界2030</h5>
<p>
<span>了解更多</span>
<i class="iconfont icon-arrow-right"></i>
</p>
</div>
<!-- 添加渐变背景 -->
<div class="mask"></div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/huawei2.jpeg" alt="">
</div>
<div class="txt">
<h4>《ICT新视界》刊首语</h4>
<h5>笃行致远,共建具有获得感、幸福感、安全感的智慧城市</h5>
<p>
<span>了解更多</span>
<i class="iconfont icon-arrow-right"></i>
</p>
</div>
<!-- 添加渐变背景 -->
<div class="mask"></div>
</a>
</li>
</ul>
</div>
</body>
</html>
鼠标放上去
9 空间转换
空间转换
目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果
-
空间:是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。
-
空间转换也叫3D转换
-
属性:transform
-
语法
- transform: translate3d(x, y, z);
- transform: translateX(值);
- transform: translateY(值);
- transform: translateZ(值);
-
取值(正负均可)
- 像素单位数值
- 百分比
9.1 透视
目标:使用perspective属性实现透视效果
-
属性(添加给父级)
- perspective: 值;
- 取值:像素单位数值, 数值一般在800 – 1200。
- 透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
-
作用
- 空间转换时,为元素添加近大远小、近实远虚的视觉效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透视效果</title> <style> body { perspective: 1000px; /* perspective: 200px; */ /* perspective: 10000px; */ } .box { width: 200px; height: 200px; margin: 100px auto; background-color: pink; transition: all 0.5s; } .box:hover{ transform: translateZ(200px); /* transform: translateZ(-200px); */ } </style> </head> <body> <div class="box"></div> </body> </html>
9.2 空间旋转
目标:使用rotate实现元素空间旋转效果
-
语法
- transform: rotateZ(值);
- transform: rotateX(值);
- transform: rotateY(值);
<!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>空间旋转-Z轴</title> <style> .box { width: 300px; margin: 100px auto; perspective: 1000px; } img { width: 300px; transition: all 2s; } .box img:hover { transform: rotateY(360deg); //绕y轴旋转 transform: rotateX(360deg); //绕x轴旋转 transform: rotateZ(360deg); //绕z轴旋转 } </style> </head> <body> <div class="box"> <img src="./images/hero.jpeg" alt=""> </div> </body> </html>
目标:使用rotate实现元素空间旋转效果
- 拓展 (仅作为了解)
- rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
- x,y,z 取值为0-1之间的数字
9.3 立体呈现
目标: 使用transform-style: preserve-3d呈现立体图形
- 实现方法
- 添加 transform-style: preserve-3d;
- 使子元素处于真正的3d空间
- 呈现立体图形步骤
- 盒子父元素添加transform-style: preserve-3d;
- 按需求设置子盒子的位置(位移或旋转)
- 注意
- 空间内,转换元素都有自已独立的坐标轴,互不干扰
<!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>
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
/* background-color: pink; */
transition: all 2s;
transform-style: preserve-3d; /* 开启3d效果 */
}
.cube div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front {
background-color: orange;
/* 向我走近200px */
transform: translateZ(200px);
}
.back {
background-color: green;
}
/* cube hover 为了看空间感效果 */
.cube:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">前面</div>
<div class="back">后面</div>
</div>
</body>
</html>
9.4 3D导航
目标:使用立体呈现技巧实现3D导航效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D导航</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navs {
width: 300px;
height: 40px;
margin: 50px auto;
}
.navs li {
position: relative;
float: left;
width: 100px;
height: 40px;
line-height: 40px;
transition: all .5s;
transform-style: preserve-3d;
/* 旋转: 让大家在写代码的过程中看到立体盒子 */
/* transform: rotateX(-20deg) rotateY(30deg); */
/* 测试缩放效果 */
/* transform: scale3d(0.5, 1.1, 2); */
}
.navs li a {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: #fff;
}
.navs li a:first-child {
background-color: green;
transform: translateZ(20px);
}
.navs li a:last-child {
background-color: orange;
/* 躺平x轴旋转 立方体的顶部,位移z(确保看到这个盒子) */
transform: rotateX(90deg) translateZ(20px);
}
/* li:hover 立方体旋转 */
.navs li:hover {
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="navs">
<ul>
<li>
<a href="#">首页</a>
<a href="#">Index</a>
</li>
<li>
<a href="#">登录</a>
<a href="#">Login</a>
</li>
<li>
<a href="#">注册</a>
<a href="#">Register</a>
</li>
</ul>
</div>
</body>
</html>
hover
实现思路:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hnnsiyJi-1650960101494)(https://gitee.com/silverljh/typora-two/raw/master/image/202204061659768.png)]
10 动画
10.1 动画的实现步骤
目标:使用animation添加动画效果
实现步骤:
1)定义动画
2)使用动画
<!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: 200px;
height: 100px;
background-color: pink;
/* 使用动画 */
animation: change 2s;
}
/* 只能完成两个状态之间的变化 */
/* @keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
} */
/* 按照百分比定义动画 */
@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 200px;
height: 500px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
10.2 动画属性
10.2.1 目标:使用animation相关属性控制动画执行过程
注意:
-
动画名称和动画时长必须赋值
-
取值不分先后顺序
-
如果有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
<!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: 200px; height: 100px; background-color: pink; /* 使用动画 */ /* infinite表示无限循环 */ /* alternate表示起始过渡,反向过渡 */ /* backwards默认值 */ /* forwards停留在执行完毕的状态 */ animation: change 2s infinite alternate backwards forwards; } /* 只能完成两个状态之间的变化 */ /* @keyframes change { from { width: 200px; } to { width: 600px; } } */ /* 按照百分比定义动画 */ @keyframes change { 0% { width: 200px; } 50% { width: 500px; height: 300px; } 100% { width: 200px; height: 500px; } } </style> </head> <body> <div class="box"></div> </body> </html>
10.2.2 目标:使用steps实现逐帧动画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YE0pYOsw-1650960101497)(https://gitee.com/silverljh/typora-two/raw/master/image/202204071547438.png)]
- 逐帧动画:帧动画。开发中,一般配合精灵图实现动画效果。
- animation-timing-function: steps(N);
- 将动画过程等分成N份
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵动画</title>
<style>
.box {
/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background-image: url(./images/bg.png);
/* 12: 净零小图的个数 */
animation:
move 1s steps(12) infinite,
run 1s forwards; //目标:能够使用animation属性给一个元素添加多个动画效果
}
@keyframes move {
/* from {
background-position: 0 0;
} */
to {
/* 1680: 精灵图的宽度 */
background-position: -1680px 0;
}
}
/* 定义一个盒子移动的动画 800px */
@keyframes run {
/* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
/* from {
transform: translateX(0);
} */
to {
transform: translateX(800px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
11 综合案例
11.1 走马灯
目标:使用animation实现逐帧图片位移效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
width: 200px;
}
.box {
width: 600px;
height: 112px;
border: 5px solid #000;
margin: 100px auto;
overflow: hidden;
}
.box ul {
width: 2000px; /* 放下所有的图 */
animation: move 12s infinite linear;
}
.box li {
float: left;
}
/* 定义动画:位移, ul 左侧使用 x -1400 */
@keyframes move {
to {
transform: translateX(-1400px);
}
}
/* 用户鼠标移入box,动画暂停 */
.box:hover ul {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
<li><img src="./images/4.jpg" alt="" /></li>
<li><img src="./images/5.jpg" alt="" /></li>
<li><img src="./images/6.jpg" alt="" /></li>
<li><img src="./images/7.jpg" alt="" /></li>
<!-- 第567移动的时候,显示区域不能留白 -->
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
11.2 全民出游季
<!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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 云彩图片 -->
<div class="cloud">
<img src="./images/yun1.png" alt="">
<img src="./images/yun2.png" alt="">
<img src="./images/yun3.png" alt="">
</div>
<!-- 气球区域 -->
<div class="balloon">
<img src="./images/1.png" alt="">
<img src="./images/2.png" alt="">
<img src="./images/3.png" alt="">
<img src="./images/4.png" alt="">
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: url(./../images/f1_1.jpg) no-repeat center 0;
/* 缩放背景图 */
/* 图片等比例缩放, 当宽度或高度和盒子尺寸相等, 图片就不再缩放 */
/* background-size: contain; */
/* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */
background-size: cover;
}
/*
1. img 引入图片, 控制位置
2. 定义动画,使用动画
*/
.cloud img {
position: absolute;
left: 50%;
top: 0;
}
.cloud img:nth-child(1) {
margin-left: -300px;
top: 20px;
animation: 1s cloud infinite alternate linear;
}
.cloud img:nth-child(2) {
margin-left: 400px;
top: 100px;
animation: 1s cloud infinite alternate 1s linear;
}
.cloud img:nth-child(3) {
margin-left: -550px;
top: 200px;
animation: 1s cloud infinite alternate 0.5s linear;
}
/* 云彩动画 */
@keyframes cloud {
to {
transform: translate(20px);
}
}
.balloon img {
height: 120px;
position: absolute;
bottom: 30px;
margin-left: 50%;
}
.balloon img:nth-child(1) {
margin-left: 350px;
animation: balloon 1s infinite linear alternate;
}
.balloon img:nth-child(2) {
margin-left: 550px;
animation: balloon 1s infinite linear alternate 0.5s;
}
.balloon img:nth-child(3) {
margin-left: 750px;
animation: balloon 1s infinite linear alternate 1s;
}
.balloon img:nth-child(4) {
margin-left: 950px;
animation: balloon 1s infinite linear alternate 0.7s;
}
@keyframes balloon {
to {
transform: translateY(-20px);
}
}
12 移动端的特点
1)屏幕尺寸:指的是屏幕对角线的长度,一般用英寸来度量
2)分辨率
-
PC分辨率PC分辨率
- 1920 * 1080
- 1366 * 768
-
缩放150%
- (1920/150%)*(1080/150%)
-
总结
- 硬件分辨率(出厂设置)
- 缩放调节的分辨率(软件设置)
-
分辨率分类
- 物理分辨率是生产屏幕时就固定的,它是不可被改变的
- 逻辑分辨率是由软件(驱动)决定的
-
思考:制作网页参考物理分辨率还是逻辑分辨率?
- 逻辑分辨率
-
目标:了解移动端主流设备分辨率
-
视口:使用meta标签设置视口宽度,制作适配不同设备宽度的网页
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //viewport:视口 width=device-width:视口宽度 = 设备宽度 initial-scale=1.0:缩放1倍(不缩放)
-
二倍图:能够使用像素大厨软件测量二倍图中元素的尺寸
- 现阶段设计稿参考iPhone6/7/8,设备宽度375px产出设计稿。
- 二倍图设计稿尺寸:750px。
13 百分比布局
- 百分比布局, 也叫流式布局
- 效果: 宽度自适应,高度固定。(老式)
14 Flex布局
目标:以往布局存在问题:浮动的盒子脱标。解决办法:能够使用Flex布局模型灵活、快速的开发网页
14.1 Flex布局
- Flex布局/弹性布局:
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
14.2 Flex布局模型构成
-
作用
- 基于 Flex 精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
-
设置方式
- 父元素添加 display: flex,子元素可以自动的挤压或拉伸(确保是亲父级)
-
组成部分
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴 / 交叉轴
14.3 主轴对齐方式
在Flex布局模型中,调节主轴或侧轴的对齐方式来设置盒子之间的间距。
- 修改主轴对齐方式属性: justify-content
<!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 {
/* 视觉效果:子集一行排列/水平排列 */
/* 为什么水平排列:默认主轴在水平,弹性盒子都是沿着主轴排列 */
display: flex;
/* 居中效果 */
justify-content: center;
/* 间距出现在盒子之间 */
/* justify-content: space-between; */
/* 间距出现在两边及盒子之间,且间距相等 */
/* justify-content: space-evenly; */
/* 间距出现在两边及盒子之间,且中间大两边小。本质是:将间距加在子集的两侧 */
/* justify-content: space-around; */
height: 200px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
/* 居中效果 */
justify-content: center;
/* 间距出现在盒子之间 */
justify-content: space-between;
/* 间距出现在两边及盒子之间,且间距相等 */
justify-content: space-evenly;
/* 间距出现在两边及盒子之间,且中间大两边小。本质是:将间距加在子集的两侧 */
justify-content: space-around;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nXThSMp3-1650960101503)(https://gitee.com/silverljh/typora-two/raw/master/image/202204091705632.png)]
14.4 侧轴对齐方式
-
修改侧轴对齐方式属性:
- align-items(添加到弹性容器)
- align-self: 控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)
<!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 { /* 视觉效果:子集一行排列/水平排列 */ /* 为什么水平排列:默认主轴在水平,弹性盒子都是沿着主轴排列 */ display: flex; /* 居中效果 */ justify-content: center; /* 间距出现在盒子之间 */ justify-content: space-between; /* 间距出现在两边及盒子之间,且间距相等 */ justify-content: space-evenly; /* 间距出现在两边及盒子之间,且中间大两边小。本质是:将间距加在子集的两侧 */ justify-content: space-around; height: 200px; border: 1px solid #000; /* 中心对齐 */ align-items: center; /* 子集盒子没有高度时,将高度拉伸至铺满弹性盒子侧轴 */ align-items: stretch; } .box div { width: 100px; /* height: 100px; */ background-color: pink; } /* 单独设置某个弹性盒子的侧轴对齐方式 */ .box div:nth-child(2) { align-self: center; /* 控制子集中的某个盒子将其侧轴居中 */ height: 100px; /* center需要高度配合 */ } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
14.5 伸缩比
- 属性
- flex : 值;
- 取值分类
- 数值(整数)
- 注意 : 只占用父盒子剩余尺寸
<!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 {
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div {
height: 200px;
margin: 0 20px;
background-color: pink;
}
.box div:nth-child(1) {
width: 50px;
}
.box div:nth-child(2) {
flex: 4; /* 将父级剩余盒子分成5份,第二个盒子占4份 */
}
.box div:nth-child(3) {
flex: 1; /* 将父级剩余盒子分成5份,第三个盒子占一份 */
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
14.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>
<link rel="stylesheet" href="./lib/iconfont/iconfont.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/orders.css">
</head>
<body>
<!-- 主体内容:滑动查看 -->
<div class="main">
<!-- 用户信息 -->
<div class="pannel user_msg">
<div class="location">
<i class="iconfont icon-location"></i>
</div>
<div class="user">
<div class="top">
<h5>林丽</h5>
<p>18500667882</p>
</div>
<div class="bottom">
北京市 海淀区 中关村软件园 信息科技大厦1号
楼410#
</div>
</div>
<div class="more">
<i class="iconfont icon-more"></i>
</div>
</div>
<!-- 商品区域 -->
<div class="pannel goods">
<div class="pic">
<a href="#"><img src="./uploads/pic.png" alt=""></a>
</div>
<div class="info">
<h5>康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温…</h5>
<p>
<span>粉色</span>
<span>红外体温计</span>
</p>
<div class="price">
<span class="red">¥ <i>266</i> </span>
<span>¥299</span>
</div>
</div>
<div class="count">
<i class="iconfont icon-x"></i>
<span>1</span>
</div>
</div>
<!-- 其他信息 -->
<section class="pannel rest">
<div>
<h5>配送方式</h5>
<p>顺丰快递</p>
</div>
<div>
<h5>配送方式</h5>
<p>顺丰快递</p>
</div>
<div>
<h5>配送方式</h5>
<p>顺丰快递</p>
</div>
</section>
<!-- 汇总信息 -->
<div class="pannel sum">
<div>
<h5>商品总价</h5>
<p>¥299.00</p>
</div>
<div>
<h5>运费</h5>
<p>¥0.00</p>
</div>
<div>
<h5>折扣</h5>
<p class="red">-¥30.00</p>
</div>
</div>
</div>
<!-- 底部支付:固定定位 -->
<div class="pay">
<div class="left">
合计:<span>¥<i class="red">266.00</i></span>
</div>
<div class="right">
<a href="#">去支付</a>
</div>
</div>
</body>
</html>
14.7 主轴方向
- 主轴默认是水平方向, 侧轴默认是垂直方向
- 修改主轴方向属性: flex-direction
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ON0d3Zky-1650960101505)(https://gitee.com/silverljh/typora-two/raw/master/image/202204111630855.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>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box li {
display: flex;
/* 变化flex主轴方向 */
flex-direction: column;
/* 实现列居中(按照主轴方向确定水平和列,主轴方向为水平方向) */
justify-content: center;
/* 实现水平居中 */
align-items: center;
width: 80px;
height: 80px;
border: 1px solid #ccc;
}
.box img {
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="./images/media.png" alt="">
<span>媒体</span>
</li>
</ul>
</div>
</body>
</html>
14.8 弹性盒子换行
- 弹性盒子换行显示 : flex-wrap: wrap;
- 调整行对齐方式 :align-content
- 取值与justify-content基本相同
<!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 {
display: flex;
flex-wrap: wrap;
/* flex换行 */
align-content: center; /* 行对齐方式 */
align-content: space-between; /* 在列呈现跟 justify-content: space-between; 在行中一样的效果 */
height: 500px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
14.9 实战演练
<!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="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/center.css">
</head>
<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
<div class="wrapper">
<!-- 顶部导航 -->
<ul class="xtx_navs">
<li>
<a href="./login.html">请先登录</a>
</li>
<li>
<a href="./register.html">免费注册</a>
</li>
<li>
<a href="javascript:;">我的订单</a>
</li>
<li>
<a href="javascript:;">会员中心</a>
</li>
<li>
<a href="javascript:;">帮助中心</a>
</li>
<li>
<a href="javascript:;">在线客服</a>
</li>
<li>
<a href="javascript:;">
<i class="mobile sprites"></i> 手机版
</a>
</li>
</ul>
</div>
</div>
<!-- 头部 -->
<div class="xtx_header clearfix">
<div class="wrapper">
<!-- 网站Logo -->
<h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
<!-- 主导航 -->
<div class="xtx_navs">
<ul class="clearfix">
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">生鲜</a>
</li>
<li>
<a href="javascript:;">美食</a>
</li>
<li>
<a href="javascript:;">餐厨</a>
</li>
<li>
<a href="javascript:;">电器</a>
</li>
<li>
<a href="javascript:;">居家</a>
</li>
<li>
<a href="javascript:;">洗护</a>
</li>
<li>
<a href="javascript:;">孕婴</a>
</li>
<li>
<a href="javascript:;">服装</a>
</li>
</ul>
</div>
<!-- 站内搜索 -->
<div class="xtx_search clearfix">
<!-- 购物车 -->
<a href="javascript:;" class="xtx_search_cart sprites">
<i>2</i>
</a>
<!-- 搜索框 -->
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜">
</div>
</div>
</div>
</div>
<!-- 内容:待完成 -->
<div class="xtx_body">
<div class="wrapper ">
<!-- 侧边栏 -->
<div class="aside"></div>
<!-- 主体内容 -->
<div class="main">
<!-- 用户账户概览 -->
<div class="overview">
<div>
<a href="#">
<img src="./images//vip.png" alt="">
<p>会员中心</p>
</a>
<a href="#">
<img src="./images//vip.png" alt="">
<p>会员中心</p>
</a>
<a href="#">
<img src="./images//address.png" alt="">
<p>会员中心</p>
</a>
</div>
<div>
<a href="#">
<span>6</span>
<p>优惠券</p>
</a>
<a href="#">
<span>6</span>
<p>优惠券</p>
</a>
<a href="#">
<span>6</span>
<p>优惠券</p>
</a>
</div>
</div>
<!-- 订单 -->
<div class="pannel orders">
<div class="pannel_title">
<h4>我的订单</h4>
<a href="#">查看更多></a>
</div>
<div class="content">
<ul>
<li>
<div class="goods">
<div class="pic">
<a href="#"><img src="./uploads/order_goods_1.jpg" alt=""></a>
</div>
<div class="txt">
<h5>拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</h5>
<p>颜色:白色 尺码:M 数量:1</p>
</div>
</div>
<div class="status">2</div>
<div class="pay common">
<p class="red">¥99.00</p>
<p>(含运费:¥10.00元)</p>
<p>在线支付</p>
</div>
<div class="action common">
<a href="#">立即付款</a>
<a href="#">查看详情</a>
<a href="#">取消订单</a>
</div>
</li>
<li>
2
</li>
</ul>
</div>
</div>
<!-- 订单 -->
</div>
</div>
</div>
<!-- 内容 -->
<!-- 公共底部 -->
<div class="xtx_footer">
<div class="wrapper">
<!-- 联系我们 -->
<div class="contact clearfix">
<dl>
<dt>客户服务</dt>
<dd class="chat">在线客服</dd>
<dd class="feedback">问题反馈</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd class="weixin">公众号</dd>
<dd class="weibo">微博</dd>
</dl>
<dl>
<dt>下载APP</dt>
<dd class="qrcode">
<img src="./uploads/qrcode.jpg">
</dd>
<dd class="download">
<span>扫描二维码</span>
<span>立马下载APP</span>
<a href="javascript:;">下载页面</a>
</dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd class="hotline">
400-0000-000
<small>周一至周日 8:00-18:00</small>
</dd>
</dl>
</div>
</div>
<!-- 其它 -->
<div class="extra">
<div class="wrapper">
<!-- 口号 -->
<div class="slogan">
<a href="javascript:;" class="price">价格亲民</a>
<a href="javascript:;" class="express">物流快捷</a>
<a href="javascript:;" class="quality">品质新鲜</a>
</div>
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
</div>
</div>
</body>
</html>
.xtx_body {
padding: 30px 0 85px;
background-color: #f6f6f6;
}
.xtx_body .wrapper {
display: flex;
}
/* 侧边栏 */
.xtx_body .aside {
width: 227px;
min-height: 500px;
/* 最小高度500px */
margin-right: 18px;
background-color: pink;
}
/* 主体内容 */
.xtx_body .main {
flex: 1;
min-height: 500px;
/* background-color: blue; */
}
/* 用户账户概览 */
.overview {
display: flex;
height: 132px;
background-color: #fff;
padding: 20px 0;
margin-bottom: 18px;
}
.overview div {
/* 让a在一行显示 */
display: flex;
justify-content: space-evenly;
/* 各个地方距离相等 */
align-items: center;
flex: 1;
text-align: center;
}
.overview div:nth-child(1) {
border-right: 1px solid #f4f4f4;
}
.overview div a img {
width: 25px;
margin-bottom: 10px;
}
.overview div a:nth-child(3) img {
width: 18px;
}
.overview div span {
font-size: 25px;
color: #e05e30;
}
.overview div p {
font-size: 16px;
}
/* 订单 */
.pannel {
padding: 28px 20px;
margin-bottom: 20px;
background-color: #fff;
}
.pannel .pannel_title {
display: flex;
justify-content: space-between;
height: 45px;
border-bottom: 1px solid #f4f4f4;
}
.pannel .pannel_title h4 {
font-size: 22px;
color: #333;
font-weight: 400;
}
.pannel .pannel_title a {
margin-top: 8px;
font-size: 16px;
color: #999;
}
.orders li {
display: flex;
height: 137px;
margin-top: -1px;
margin-bottom: 20px;
border: 1px solid #f4f4f4;
}
.orders li:last-child {
margin-bottom: 0;
}
.orders li .goods {
display: flex;
align-items: center;
padding: 17px 0 14px 12px;
flex: 1;
margin-right: 120px;
}
.orders .goods .pic {
width: 107px;
height: 107px;
}
.orders .goods .txt {
flex: 1;
/* 省略文字 */
/* 为了溢出的时候显示省略号 */
width: 0;
}
.orders .goods .txt h5 {
text-overflow: ellipsis;
/* 文字溢出时用省略号表示 */
white-space: nowrap;
/* 强制文字在一行显示 */
overflow: hidden;
/* 不显示溢出文字 */
}
.orders li .status {
width: 120px;
}
.orders li .pay {
width: 200px;
border-left: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
}
.orders li .action {
width: 180px;
}
.orders li .common {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.orders li .action a:first-child {
width: 100px;
height: 30px;
background-color: #5eb69c;
border-radius: 2px;
margin-bottom: 10px;
color: #fff;
text-align: center;
line-height: 30px;
}
.red {
color: #9a2e1f;
}
15 移动适配rem
- rem : 目前多数企业在用的解决方案
- vw / vh:未来的解决方案
15.1 rem
- 网页效果
- 屏幕宽度不同,网页元素尺寸不同(等比缩放)
- px单位或百分比布局可以实现吗?
- px单位是绝对单位
- 百分比布局特点宽度自适应,高度固定
- 适配方案
- rem
- vw / vh
- rem单位
- 相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
1)rem体验
<!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>体验rem适配</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* width: 10px; */
width: 5rem;
height: 5rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./js/flexible.js"></script>
</body>
</html>
2)rem使用
<!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>rem基本使用</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 1rem = 20px 标签字号大小 */
html {
font-size: 20px;
}
.box {
width: 5rem;
height: 3rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
15.2 rem移动适配 - 媒体查询
-
媒体查询能够检测视口的宽度,然后编写差异化的 CSS 样式
-
当某个条件成立, 执行对应的CSS样式
-
写法
<!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> /* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */ @media (width:375px) { html { font-size: 40px; } } @media (width:320px) { html { font-size: 20px; } } </style> </head> <body> </body> </html>
15.3 rem移动适配
- 目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10
<!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>rem适配</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
@media (width:320px) {
html {
font-size: 32px;
}
}
@media (width:375px) {
html {
font-size: 37.5px;
}
}
@media (width:414px) {
html {
font-size: 41.4px;
}
}
/* 2. 书写盒子尺寸, 单位rem */
.box {
width: 5rem;
height: 3rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
15.4 rem适配原理
- rem单位尺寸
- 根据视口宽度,设置不同的HTML标签字号
- 书写代码,尺寸是rem单位
- 确定设计稿对应的设备的HTML标签字号
- 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)
- rem单位的尺寸
- N * 37.5 = 68 → N = 68 / 37.5
- rem单位的尺寸 = px单位数值 / 基准根字号
- 确定设计稿对应的设备的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>rem开发流程</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
/* 移动适配 */
/* 1. HTML标签加字号 1/10; 2. 写rem单位的尺寸 */
@media (width: 320px) {
html {
font-size: 32px;
}
}
@media (width:375px) {
html {
font-size: 37.5px;
}
}
@media (width: 414px) {
html {
font-size: 41.4px;
}
}
.box {
/* 68 * 29 */
/* width: 68px; */
/* 设计稿375, HTML 37.5 68/37.5 */
width: 1.813rem;
height: 0.773rem;
background-color: pink;
}
15.5 flexible
- flexible.js是手淘开发出的一个用来适配移动端的js框架。
- 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
<!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>rem开发流程</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="box"></div>
<script src="../js/flexible.js"></script>
</body>
</html>
.box {
/* 68 * 29 */
/* width: 68px; */
/* 设计稿375, HTML 37.5 68/37.5 */
width: 1.813rem;
height: 0.773rem;
background-color: pink;
}
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
15.6 Less语法
- Less是一个CSS预处理器, Less文件后缀是**.less**
- 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
- 注意:浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件。
.father {
color: red;
width: (68 / 37.5rem);
.son {
background-color: pink;
}
}
会自动转化为一个css文件
.father {
color: red;
width: 1.81333333rem;
}
.father .son {
background-color: pink;
}
15.7 编译插件
- Easy Less :
- vscode插件
- 作用:less文件保存自动生成css文件
15.8 Less语法
-
注释:
-
单行注释
- 语法:// 注释内容
- 快捷键:ctrl + /
-
-
块注释
- 语法:/* 注释内容 */
- 快捷键: shift + alt + A
- 语法:/* 注释内容 */
-
运算:
- 加、减、乘直接书写计算表达式
- 除法需要添加 小括号 或 .
- 注意:
- 表达式存在多个单位以第一个单位为准
less
.box {
width: 100 + 10px;
width: 100 - 20px;
width: 100 * 2px;
// 除法
// 68 > rem
width: (68 / 37.5rem);
// height: 29 ./ 37.5rem;
height: (29 / 37.5rem);
}
css
.box {
width: 110px;
width: 80px;
width: 200px;
width: 1.81333333rem;
height: 0.77333333rem;
}
- 嵌套:
- 作用:快速生成后代选择器。
- 注意:&不生成后代选择器,表示当前选择器,通常配合伪类或伪元素使用
less
.father {
width: 100px;
.son {
color: pink;
// & 表示当前选择器
&:hover {
color: green;
}
}
&:hover {
color: orange;
}
}
css
.father {
width: 100px;
}
.father .son {
color: pink;
}
.father .son:hover {
color: green;
}
.father:hover {
color: orange;
}
- 变量
- 方法二: 把颜色提前存储到一个容器,设置属性值为这个容器名
- 变量:存储数据,方便使用和修改。
- 语法:
- 定义变量:@变量名: 值;
- 使用变量:CSS属性:@变量名;
less
// 1. 定义. 2.使用
@colora:green; /* 封装的颜色集,起一个名称 */
.box {
color: @colora;
/* 盒子想要使用什么颜色,就在color中选取合适的封装颜色集名称 */
}
.father {
background-color: @colora;
}
.aa {
color: @colora;
}
css
/* 封装的颜色集,起一个名称 */
.box {
color: green;
/* 盒子想要使用什么颜色,就在color中选取合适的封装颜色集名称 */
}
.father {
background-color: green;
}
.aa {
color: green;
}
- 导入: @import “文件路径”;
less
@import './01-体验less.less';
@import './02-注释';
css
01内容
.father {
color: red;
width: 1.81333333rem;
}
.father .son {
background-color: pink;
}
02内容
/*
块注释
第二行
第三行
*/
15.9 使用Less语法导出CSS文件(配置生成css的位置)
- 方法一:
- 配置EasyLess插件, 实现所有Less有相同的导出路径
- 配置插件: 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码(注意,必须是双引号)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Wr8KtC8-1650960101513)(https://gitee.com/silverljh/typora-two/raw/master/image/202204181517339.png)]
{
"editor.minimap.enabled": false,
"workbench.iconTheme": "vscode-icons",
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"window.zoomLevel": 0,
"[css]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"files.autoSave": "afterDelay",
"less.compile": {
"out": "../css/" //配置部分
}
}
-
方法二:控制当前Less文件导出路径
- Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
// out: ./qqq/daqiu.css // out: ./abc/
思考:所有的Less文件都需要导出CSS文件吗?
-
禁止导出
-
在less文件第一行添加: // out: false
-
15.10 实战演练
<!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>FC游乐园</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./lib/iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 主体内容 -->
<div class="main">
<div class="banner">
<ul>
<li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
</ul>
</div>
<!-- 活动标题 -->
<div class="title">
<h4>乐园活动</h4>
</div>
<!-- 活动 -->
<section class="item">
<div class="pic">
<a href="#"><img src="./uploads/item_2.png" alt=""></a>
<!-- 收藏图标 -->
<i class="iconfont icon-shoucang1"></i>
<!-- 活动状态 -->
<div class="active off">进行中</div>
</div>
<div class="txt">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<p>免费</p>
</div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi"></i>
<span>200</span>人已报名
</p>
<p>
<i class="iconfont icon-shizhong"></i>
<span>本周六</span>开始
</p>
</div>
</div>
</section>
<section class="item">
<div class="pic">
<a href="#"><img src="./uploads/item_1.png" alt=""></a>
<!-- 收藏图标 -->
<i class="iconfont icon-shoucang1"></i>
<!-- 活动状态 -->
<div class="active off">进行中</div>
</div>
<div class="txt">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<p>免费</p>
</div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi"></i>
<span>200</span>人已报名
</p>
<p>
<i class="iconfont icon-shizhong"></i>
<span>本周六</span>开始
</p>
</div>
</div>
</section>
<section class="item">
<div class="pic">
<a href="#"><img src="./uploads/item_3.png" alt=""></a>
<!-- 收藏图标 -->
<i class="iconfont icon-shoucang1"></i>
<!-- 活动状态 -->
<div class="active off">进行中</div>
</div>
<div class="txt">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<p>免费</p>
</div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi"></i>
<span>200</span>人已报名
</p>
<p>
<i class="iconfont icon-shizhong"></i>
<span>本周六</span>开始
</p>
</div>
</div>
</section>
</div>
<!-- 主体内容 -->
<!-- 底部工具栏 -->
<footer>
<a href="#" class="content">
<i class="iconfont icon-index-copy"></i>
<p>首页</p>
</a>
<a href="#">
<i class="iconfont icon-youhuiquan"></i>
<p>首页</p>
</a>
<a href="#">
<i class="iconfont icon-iconfront-"></i>
<p>首页</p>
</a>
</footer>
<!-- 底部工具栏 -->
<script src="./js/flexible.js"></script>
</body>
</html>
@charset 'UTF-8';
body,
ul,
p,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-user-select: none;
user-select: none;
}
img {
display: block;
max-width: 100%;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif;
/* 1 */
line-height: 1.15;
/* 2 */
-ms-text-size-adjust: 100%;
/* 3 */
-webkit-text-size-adjust: 100%;
/* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
/* 变量:存储37.5rem */
body {
background-color: #f0f0f0;
}
.main {
padding-bottom: 1.33333333rem;
}
.main .banner {
height: 4.26666667rem;
}
.main .title {
height: 1.06666667rem;
padding-left: 0.4rem;
line-height: 1.06666667rem;
}
.main .title h4 {
font-size: 0.37333333rem;
color: #3C3C3C;
}
.main .item {
margin-bottom: 0.26666667rem;
}
.main .item .pic {
position: relative;
height: 4.26666667rem;
}
.main .item .pic i {
position: absolute;
top: 0.4rem;
right: 0.48rem;
font-size: 0.64rem;
color: #fff;
}
.main .item .pic .active {
position: absolute;
left: 0.4rem;
top: -0.10666667rem;
width: 1.81333333rem;
height: 0.77333333rem;
background-image: url(../images/status_active.png);
background-size: contain;
font-size: 0.32rem;
color: #fff;
line-height: 0.66666667rem;
text-align: center;
/* 设置灰色图片的样子 */
}
.main .item .pic .active.off {
background-image: url(../images/status_default.png);
}
.main .item .txt {
padding: 0.26666667rem 0.4rem;
background-color: #fff;
}
.main .item .txt .top {
display: flex;
justify-content: space-between;
}
.main .item .txt .top h5 {
width: 7.86666667rem;
font-size: 0.4rem;
color: #3C3C3C;
}
.main .item .txt .top p {
font-size: 0.4rem;
color: #FE6249;
}
.main .item .txt .bottom {
display: flex;
margin-top: 0.4rem;
}
.main .item .txt .bottom p {
margin-right: 0.4rem;
font-size: 0.29333333rem;
color: #B4B4B4;
}
.main .item .txt .bottom p i {
font-size: 0.21333333rem;
}
footer {
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
width: 100%;
/* 防止脱标 */
position: fixed;
left: 0;
bottom: 0;
height: 1.33333333rem;
background-color: #FECA49;
}
footer a {
color: #D78B09;
font-size: 0.29333333rem;
}
footer a .iconfont {
font-size: 0.64rem;
}
footer a.content {
color: #FEFEFE;
}
less
@import './base.less';
@import './normalize.less';
/* 变量:存储37.5rem */
@rootSize: 37.5rem;
body {
background-color: #f0f0f0;
}
//主体内容
.main {
padding-bottom: (50 / @rootSize);
//banner
.banner {
height: (160 / @rootSize);
}
//活动标题
.title {
height: (40 / @rootSize);
padding-left: (15 / @rootSize);
line-height: (40 / @rootSize);
h4 {
font-size: (14 / @rootSize);
color: #3C3C3C;
}
}
//活动
.item {
margin-bottom: (10 / @rootSize);
//图片区域
.pic {
position: relative;
height: (160 / @rootSize);
//收藏图标
i {
position: absolute;
top: (15 / @rootSize);
right: (18 / @rootSize);
font-size: (24 / @rootSize);
color: #fff;
}
//活动状态
.active {
position: absolute;
left: (15 / @rootSize);
top: (-4 / @rootSize);
width: (68 / @rootSize);
height: (29 / @rootSize);
background-image: url(./../images/status_active.png);
background-size: contain;
font-size: (12 / @rootSize);
color: #fff;
line-height: (25 / @rootSize);
text-align: center;
/* 设置灰色图片的样子 */
//active.off {} 交集选择器 必须是active类的同时应用了off类
&.off {
background-image: url(./../images/status_default.png);
}
}
}
//文字区域
.txt {
padding: (10 / @rootSize) (15 /@rootSize);
background-color: #fff;
.top {
display: flex;
justify-content: space-between;
h5 {
width: (295 / @rootSize);
font-size: (15 / @rootSize);
color: #3C3C3C;
}
p {
font-size: (15 / @rootSize);
color: #FE6249;
}
}
.bottom {
display: flex;
margin-top: (15 / @rootSize);
p {
margin-right: (15 / @rootSize);
font-size: (11 / @rootSize);
color: #B4B4B4;
i {
font-size: (8 / @rootSize);
}
}
}
}
}
}
//底部工具栏
footer {
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
a {
color: #D78B09;
font-size: (11 / @rootSize);
.iconfont {
font-size: (24 / @rootSize);
}
&.content {
color: #FEFEFE;
}
}
width: 100%;
/* 防止脱标 */
position: fixed;
left: 0;
bottom: 0;
height: (50 / @rootSize);
background-color: #FECA49;
}
16 移动适配vw/vh
16.1 vw / vh
- 相对单位
- 相对视口的尺寸计算结果
- vw:viewport width
- 1vw = 1/100视口宽度
- vh:viewport height
- 1vh = 1/100视口高度
16.2 vw适配原理
- vw单位尺寸
- 确定设计稿对应的vw尺寸 (1/100视口宽度)
- 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 (1/100 视口宽度)
- vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
- 确定设计稿对应的vw尺寸 (1/100视口宽度)
16.3 vh适配原理
- vh单位尺寸
- 确定设计稿对应的vh尺寸 (1/100视口高度)
- 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 (1/100 视口高度)
- vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )
- 确定设计稿对应的vh尺寸 (1/100视口高度)
思考:开发中,会不会vw和vh混用呢?
- 不会。
- vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变形。
<!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>体验vw和vh</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 1. vw = 1/100视口宽度 */
/* .box {
width: 50vw;
height: 30vw;
background-color: pink;
} */
/* 2.vh = 1/100视口高度 */
.box {
width: 50vh;
height: 30vh;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
16.4 实战演练
目标:实现在不同宽度设备中等比缩放的网页效果
<!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>B站</title>
<link rel="stylesheet" href="./fonts/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 头部区域 -->
<header>
<div class="top">
<div class="left">
<i class="iconfont Navbar_logo"></i>
</div>
<div class="right">
<a href="#">
<i class="iconfont ic_search_tab"></i>
</a>
<a href="#" class="login"><img src="./images/login.png" alt=""></a>
<a href="#" class="download"><img src="./images/download.png" alt=""></a>
</div>
</div>
<div class="bottom">
<div class="tab">
<ul>
<li><a href="#" class="current">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
<div class="more">
<a href="#">
<i class="iconfont general_pulldown_s"></i>
</a>
</div>
</div>
</header>
<!-- 视频 -->
<section class="video_content">
<div class="video_list">
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱,韩服最强王者组单杀集锦#19</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱,韩服最强王者组单杀集锦#19</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱,韩服最强王者组单杀集锦#19</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱,韩服最强王者组单杀集锦#19</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱,韩服最强王者组单杀集锦#19</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱,韩服最强王者组单杀集锦#19</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱,韩服最强王者组单杀集锦#19</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱,韩服最强王者组单杀集锦#19</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱,韩服最强王者组单杀集锦#19</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱,韩服最强王者组单杀集锦#19</div>
</a>
</div>
</section>
<!-- 按钮固定 -->
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
}
a {
color: #333;
text-decoration: none;
}
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
ul {
list-style: none;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
header {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 22.4vw;
background-color: #fff;
}
header .top {
display: flex;
justify-content: space-between;
align-items: center;
height: 11.73333333vw;
padding-left: 4.8vw;
padding-right: 5.86666667vw;
}
header .top .left .iconfont {
font-size: 7.46666667vw;
color: #fb7299;
}
header .top .right {
display: flex;
}
header .top .right .iconfont {
font-size: 5.86666667vw;
color: #ccc;
}
header .top .right .login {
width: 6.4vw;
height: 6.4vw;
margin-left: 6.4vw;
}
header .top .right .download {
width: 19.2vw;
height: 6.4vw;
margin-left: 6.4vw;
}
header .bottom {
display: flex;
justify-content: space-between;
height: 10.66666667vw;
border-bottom: 1px solid #eee;
}
header .bottom .more a {
display: block;
width: 10.66666667vw;
height: 10.66666667vw;
text-align: center;
line-height: 10.66666667vw;
color: #ccc;
}
header .bottom .more a .iconfont {
font-size: 5.86666667vw;
}
header .bottom .tab ul {
display: flex;
}
header .bottom .tab ul li {
padding: 0 4.26666667vw;
}
header .bottom .tab ul li a {
display: block;
line-height: 10.13333333vw;
font-size: 3.73333333vw;
height: 10.13333333vw;
}
header .bottom .tab ul li a.current {
color: #fb7299;
border-bottom: 2px solid #fb7299;
}
.video_content {
padding: 22.4vw 1.33333333vw 0;
}
.video_content .video_list {
display: flex;
flex-wrap: wrap;
}
.video_content .video_list a {
width: 50%;
padding: 2.13333333vw 1.33333333vw;
font-size: 3.2vw;
}
.video_content .video_list a .txt {
margin-top: 1.33333333vw;
}
.video_content .video_list a .pic {
position: relative;
}
.video_content .video_list a .pic .count {
color: #fff;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: 2.13333333vw;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.video_content .video_list a .pic .count i {
vertical-align: middle;
/* 改变图字进行对齐 */
}
17 响应式
17.1 媒体查询
17.1.1 基本语法
目标:能够根据设备宽度的变化,设置差异化样式
- 开发常用写法
- 媒体特性常用写法
- max-width
- min-width
- 媒体特性常用写法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fiokVera-1650960101517)(https://gitee.com/silverljh/typora-two/raw/master/image/202204231608989.png)]
17.1.2 书写顺序
- min-width(从小到大)
- max-width(从大到小)
<!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>
/*
视口宽度 >= 768px,网页背景色是 粉色
视口宽度 >= 992px,网页背景色是 绿色
视口宽度 >= 1200px,网页背景色是 skyblue
*/
/* css属性都有层叠性 */
/* @media (min-width: 1200px) {
body {
background-color: skyblue;
}
} */
@media (min-width: 768px) {
body {
background-color: pink;
}
}
@media (min-width: 992px) {
body {
background-color: green;
}
}
@media (min-width: 1200px) {
body {
background-color: skyblue;
}
}
</style>
</head>
<body>
</body>
</html>
17.1.3 基本语法
目标:能够根据设备宽度的变化,设置差异化样式
- 完整写法
17.1.4 关键词
- and
- only
- not
17.1.5 媒体类型
- 媒体是用来区分设备类型的,如屏幕设备、打印设备等,其中手机、电脑、平板都属于屏幕设备。
17.1.6 媒体特征
- 媒体特性主要用来描述媒体类型的具体特征,如当前屏幕的宽高、分辨率、横屏或竖屏等。
17.1.7 基本语法
- 外链式CSS引入
17.2 BootStrap
17.2.1 UI框架
目标:知道 UI框架的作用
- UI框架概念
- 将常见效果进行统一封装后形成的一套代码, 例如:BootStrap。
- 作用
- 基于框架开发,效率高,稳定性高。
17.2.2 BootStrap简介
- Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定HTML 结构及JavaScript,快速编写功能完善的网页及常见交互效果。
- 中文官网: https://www.bootcss.com/
17.2.3 BootStrap使用步骤
- 下载: https://www.bootcss.com/
- 首页 → BootStrap3中文文档 → 下载BootStrap
-
使用
-
使用步骤
-
引入: BootStrap提供的CSS代码
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
-
调用类:使用BootStrap提供的样式
-
-
container:响应式布局版心类
-
17.2.4 BootStrap栅格系统
- 栅格化是指将整个网页的宽度分成若干等份
- BootStrap3默认将网页分成12等份
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oKQ7XhGE-1650960101521)(https://gitee.com/silverljh/typora-two/raw/master/image/202204251601850.png)]
- .container是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
- .container-fluid也是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为 100%。
- 分别使用.row类名和 .col类名定义栅格布局的行和列。
注意: 1. container类自带间距15px;
2.row类自带间距-15px
<!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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<style>
div {
height: 50px;
background-color: pink;
margin-bottom: 50px;
}
</style>
</head>
<body>
<!-- 版心样式 -->
<div class="container">1</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>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<style>
div {
height: 50px;
background-color: pink;
margin-bottom: 50px;
}
</style>
</head>
<body>
<!-- 版心样式 左右自带15px的内边距-->
<div class="container">1</div>
<!-- row类的作用是抵消container带来的内边距,row有-15px的外边距 -->
<div class="container">
<div class="row">2</div>
</div>
<!-- 宽度100%:自带左右15px的内边距 -->
<div class="container-fluid">3</div>
</body>
</html>
17.3 全局样式
分类:
- 布局样式
- 内容美化样式
手册用法:
-
BootStrap预定义了大量类用来美化页面,掌握手册的查找方法是学习全局样式的重点。
-
网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类
1)全局CSS样式
布局类:表格
- table : 基本类名, 初始化表格默认样式
- table-bordered : 边框线
- table-striped : 隔行变色
- table-hover : 鼠标悬停效果
- table-responsive : 表格宽溢出滚动
<!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>全局CSS样式-表格</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<table class="table table-striped table-bordered table-hover table-responsive ">
<tr>
<th>数字1</th>
<th>数字2</th>
<th>数字3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
美化内容类:按钮
- btn : 基准样式
- btn-info; btn-success : 设置按钮背景色
- btn-block : 设置按钮为块元素
- btn-lg; btn-sm; btn-xs : 设置按钮大小
<!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>全局CSS样式-按钮</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-success btn-lg">成功</button>
<button class="btn btn-warning btn-sm">警告</button>
</body>
</html>
2)组件
组件
- BootStrap提供的常见功能,包含了HTML结构和CSS样式。
使用方法
- 引入BootStrap样式
- 复制结构,修改内容
Glyphicons字体图标
Glyphicons字体图标的使用步骤:
- HTML页面引入BootStrap样式文件
- 准备字体文件 (注意路径)
- 空标签调用对应类名
- glyphicon
- 图标类
<!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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-user"></i>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yEcpVJFQ-1650960101526)(https://gitee.com/silverljh/typora-two/raw/master/image/202204251655207.png)]
3)JavaScript插件
学习路径
- 了解插件
- 插件分类
- 插件使用
插件
-
BootStrap提供的常见效果, 包含了HTML结构,CSS样式与JavaScript
插件的使用步骤
- 引入BootStrap样式
- 引入js文件:jQuery.js + BootStrap.min.js
- 复制HTML结构, 并适当调整结构或内容
4)定制
- 定制步骤
- 导航菜单 → 定制
- 输入目标变量值
- 编译并下载,使用定制后的框架
17.4 实战演练
<!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="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 菜单区域 -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- banner -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./uploads/banner_1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./uploads/banner_2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./uploads/banner_3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./uploads/banner_4.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- 开源项目 -->
<div class="project">
<h3 class="h2">OpenSource/开源项目</h3>
<p>种类众多的开源项目,让你爱不释手</p>
<div class="container">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#">1</a></div>
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#">1</a></div>
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#">1</a></div>
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#">1</a></div>
</div>
</div>
<!-- -->
<script src="./lib/js/jquery.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
.carousel img {
height: 100% !important;
}
@media (max-width: 992px) {
.carousel .item {
height: 400px;
}
}
@media (max-width: 768px) {
.carousel .item {
height: 250px;
}
}
@media (min-width: 992px) {
.carousel .item {
height: 500px;
}
}
/* 菜单区域 */
.navbar-default {
background-color: transparent;
border: 0;
}
.navbar-default .navbar-nav a {
color: #fff !important;
}
/* 开源项目 */
.project {
padding-top: 30px;
text-align: center;
}
.project .container div {
margin-bottom: 10px;
}
.project .container div a {
display: block;
height: 200px;
background-color: green;
}
less
//banner
.carousel {
//如果视口宽度<768,图250
//如果视口宽度<992,图400
//如果视口宽度>992,图500
img {
height: 100% !important;
}
@media (max-width: 992px) {
.item {
height: 400px;
}
}
@media (max-width: 768px) {
.item {
height: 250px;
}
}
@media (min-width: 992px) {
.item {
height: 500px;
}
}
}
/* 菜单区域 */
.navbar-default {
background-color: transparent;
border: 0;
.navbar-nav {
a {
color: #fff !important;
}
}
}
/* 开源项目 */
.project {
padding-top: 30px;
text-align: center;
.container {
div {
// background-color: pink;
margin-bottom: 10px;
a {
display: block;
height: 200px;
background-color: green;
}
}
}
}