免责声明：本文仅做分享！
目录
定位
相对定位
绝对定位
定位居中
固定定位
堆叠层级 z-index
定位-小结
CSS 精灵
京东案例
字体图标
下载字体
使用字体
上传矢量图
CSS 修饰属性
垂直对齐方式 vertical-align
过渡 transition
透明度 opacity
光标类型 cursor
轮播图
定位、CSS 高级技巧、修饰属性
定位
灵活改变盒子的位置。
相对定位
position: relative
1. 改变位置的参照物是 自己原来的位置
2. 不脱标，占位 （自己挪走，别人也占不了）
3. 标签显示模式特点 不变
绝对定位
position: absolute
子级绝对定位，父级相对定位。
（子级无论怎么改变，都会显示在父级里面）
1. 脱标，不占位
2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置
3. 显示模式特点改变：宽高生效（具备了行内块的特点）
定位居中
实现步骤：
1. 绝对定位
2. 水平、垂直边偏移为 50%
3. 子级向左、上移动自身尺寸的一半
• 左、上的外边距为 --- 尺寸的一半
• transform: translate(-50%, -50%)
img {position: absolute;left: 50%;top: 50%;/* margin-left: -265px;margin-top: -127px; *//* 50% 就是自己宽高的一半 */transform: translate(-50%, -50%);}-->在浏览器中间显示。
固定定位
position: fixed
--无论怎么滚动，都不动！
1. 脱标，不占位
2. 参照物：浏览器窗口
3. 显示模式特点 具备行内块特点
堆叠层级 z-index
按照标签书写顺序，后来者居上. 改变元素显示顺序。
z-index:
值 --> 整数数字（默认值为0，取值越大，层级越高）
定位-小结
子绝 父相
CSS 精灵
CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。
把网页中一些背景图片整合到一张图片文件中，再 background-position 精确的定位出背景图片的位置。
---减少服务器被请求次数，减轻服务器的压力，提高页面加载速度！！！
（多张图片整合到一张图片时，用到哪个图片就定位显示。）
实现步骤：
1. 创建盒子，盒子尺寸与小图尺寸相同
2. 设置盒子背景图为精灵图
3. 添加 background-position 属性，改变背景图位置
3.1 使用 PxCook 测量小图片左上角坐标
3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）
京东案例
<!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;box-sizing: border-box;}li {list-style: none;}.service {margin: 100px auto;width: 1190px;height: 42px;/* background-color: pink; */}.service ul {display: flex;}.service li {display: flex;padding-left: 40px;width: 297px;height: 42px;/* background-color: skyblue; */}.service li h5 {margin-right: 10px;width: 36px;height: 42px;/* background-color: pink; */background: url(./images/sprite.png) 0 -192px;}.service li:nth-child(2) h5 {background-position: -41px -192px;}.service li:nth-child(3) h5 {background-position: -82px -192px;}.service li:nth-child(4) h5 {background-position: -123px -192px;}.service li p {font-size: 18px;color: #444;font-weight: 700;line-height: 42px;}</style>
</head><body><div class="service"><ul><li><h5></h5><p>品类齐全，轻松购物</p></li><li><h5></h5><p>多仓直发，极速配送</p></li><li><h5></h5><p>正品行货，精致服务</p></li><li><h5></h5><p>天天低价，畅选无忧</p></li></ul></div>
</body></html>字体图标
字体图标：展示的是图标，本质是字体。
作用：在网页中添加简单的、颜色单一的小图标。
优点：
Ø 灵活性：灵活地修改样式，例如：尺寸、颜色等
Ø 轻量级：体积小、渲染快、降低服务器请求次数
Ø 兼容性：几乎兼容所有主流浏览器
Ø 使用方便：先下载再使用
下载字体
iconfont 图标库：https://www.iconfont.cn/
iconfont-阿里巴巴矢量图标库
---加入购物车，下载到本地
使用字体
1. 引入字体样式表（iconfont.css）
2. 标签使用字体图标类名：
1. iconfont：字体图标基本样式（字体名，字体大小等等）
2. icon-xxx：图标对应的类名
上传矢量图
项目特有的图标上传到 iconfont 图标库，生成字体。
.svg
--上传后，以后直接下载使用就可以了。
CSS 修饰属性
垂直对齐方式 vertical-align
vertical-align
（图像和文字不齐）
---》文字都有一个基线要对齐。
过渡 transition
可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡的属性 花费时间 (s)
提示：
• 过渡的属性可以是具体的 CSS 属性
• 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
• transition 设置给元素本身
透明度 opacity
设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0 – 1
• 0：完全透明（元素不可见）
• 1：不透明
• 0-1之间小数：半透明
光标类型 cursor
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
属性值
轮播图
无js版
<!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>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}/* banner */.banner {position: relative;margin: 100px auto;width: 564px;height: 315px;/* background-color: pink; */overflow: hidden;}/* 图片 */.banner img {width: 564px;border-radius: 12px;vertical-align: middle;}.banner ul {display: flex;}/* 箭头 */.banner .prev,.banner .next {/* 隐藏 */display: none;position: absolute;top: 50%;transform: translateY(-50%);width: 20px;height: 30px;background-color: rgba(0, 0, 0, 0.3);text-decoration: none;color: #fff;line-height: 30px;}/* 鼠标滑到banner区域，箭头要显示 display:block */.banner:hover .prev,.banner:hover .next {display: block;}.banner .prev {left: 0;border-radius: 0 15px 15px 0;}.banner .next {right: 0;border-radius: 15px 0 0 15px;text-align: center;}/* 圆点 */.banner ol {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);height: 13px;background-color: rgba(255, 255, 255, 0.3);display: flex;border-radius: 10px;}.banner ol li {margin: 3px;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;cursor: pointer;}/* 橙色的li */.banner ol .active {background-color: #ff5000;}</style>
</head><body><div class="banner"><!-- 图: ul > li --><ul><li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li><li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li><li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li></ul><!-- 箭头 --><!-- 上一张 prev --><a href="#" class="prev"><i class="iconfont icon-zuoce"></i></a><!-- 下一张 next --><a href="#" class="next"><i class="iconfont icon-youce"></i></a><!-- 圆点 --><ol><li></li><li class="active"></li><li></li></ol></div>
</body></html>
