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