免责声明：本文仅做分享！
目录
定位
相对定位
绝对定位
定位居中
固定定位
堆叠层级 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>
