day07-CSS高级

01-定位

作用:灵活的改变盒子在网页中的位置

实现:

1.定位模式:position

2.边偏移:设置盒子的位置

  • left

  • right

  • top

  • bottom

相对定位

position: relative

特点:

  • 不脱标,占用自己原来位置

  • 显示模式特点保持不变

  • 设置边偏移则相对自己原来位置移动

div {position: relative;top: 100px;left: 200px;
}  

绝对定位

position: absolute

使用场景:子级绝对定位,父级相对定位(子绝父相

特点:

  • 脱标,不占位

  • 显示模式具备行内块特点

  • 设置边偏移则相对最近的已经定位的祖先元素改变位置

  • 如果祖先元素都未定位,则相对浏览器可视区改变位置

.father {position: relative;
}
​
.father span {position: absolute;top: 0;right: 0;
}

定位居中

实现步骤:

  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

场景:元素的位置在网页滚动时不会改变

特点:

  • 脱标,不占位

  • 显示模式具备行内块特点

  • 设置边偏移相对浏览器窗口改变位置

div {position: fixed;top: 0;right: 0;
​width: 500px;
}

堆叠层级z-index

默认效果:按照标签书写顺序,后来者居上

作用:设置定位元素的层级顺序,改变定位元素的显示顺序

属性名:z-index

属性值:整数数字(默认值为0,取值越大,层级越高)

.box1 {background-color: pink;/* 取值是整数,默认是0,取值越大显示顺序越靠上 */z-index: 1;
}
​
.box2 {background-color: skyblue;left: 100px;top: 100px;
​z-index: 2;
}

02-高级技巧

CSS精灵

CSS 精灵,也叫 CSS Sprites,是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中,再background-position 精确的定位出背景图片的位置。

优点:减少服务器被请求次数,减轻服务器的压力,提高页面加载速度

实现步骤:

  1. 创建盒子,盒子尺寸小图尺寸相同

  2. 设置盒子背景图为精灵图

  3. 添加 background-position 属性,改变背景图位置

3.1 使用 PxCook 测量小图片左上角坐标

3.2 取负数坐标为 background-position 属性值(向左上移动图片位置)

案例-京东服务

HTML结构
<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>
CSS样式
<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>

字体图标

字体图标:展示的是图标,本质是字体

作用:在网页中添加简单的、颜色单一的小图标

优点

  • 灵活性:灵活地修改样式,例如:尺寸、颜色等

  • 轻量级:体积小、渲染快、降低服务器请求次数

  • 兼容性:几乎兼容所有主流浏览器

  • 使用方便:先下载再使用

下载字体

iconfont 图标库:iconfont-阿里巴巴矢量图标库

登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标,加入购物车 → 购物车,添加至项目,确定 → 下载至本地

使用字体
  1. 引入字体样式表(iconfont.css)

  1. 标签使用字体图标类名

    • iconfont:字体图标基本样式(字体名,字体大小等等)

    • icon-xxx:图标对应的类名

上传矢量图

作用:项目特有的图标上传到 iconfont 图标库,生成字体

上传步骤:上传 → 上传图标 → 选择 svg 矢量图,打开 → 提交 → 系统审核

03-CSS修饰属性

垂直对齐方式

属性名:vertical-align

过渡

作用:可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名:transition(复合属性)

属性值:过渡的属性 花费时间 (s)

提示:

  • 过渡的属性可以是具体的 CSS 属性

  • 也可以为 all(两个状态属性值不同的所有属性,都产生过渡效果)

  • transition 设置给元素本身

img {width: 200px;height: 200px;transition: all 1s;
}
​
img:hover {width: 500px;height: 500px;
}

透明度opacity

作用:设置整个元素的透明度(包含背景和内容)

属性名:opacity

属性值:0 – 1

  • 0:完全透明(元素不可见)

  • 1:不透明

  • 0-1之间小数:半透明

光标类型cursor

作用:鼠标悬停在元素上时指针显示样式

属性名:cursor

04-综合案例-轮播图

图片效果

HTML结构
<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>
</div>
CSS样式
* {margin: 0;padding: 0;box-sizing: border-box;
}
​
li {list-style: none;
}
​
.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;
}

箭头

HTML结构
<!-- 箭头 -->
<!-- 上一张 prev -->
<a href="#" class="prev"><i class="iconfont icon-zuoce"></i>
</a>
<!-- 下一张 next -->
<a href="#" class="next"><i class="iconfont icon-youce"></i>
</a>
CSS样式
/* 箭头 */
.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;
}

圆点

HTML结构
<!-- 圆点 -->
<ol><li></li><li class="active"></li><li></li>
</ol>
CSS样式
/* 圆点 */
.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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/250368.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

跟着cherno手搓游戏引擎【14】封装opengl

本节先把代码粘上&#xff0c;后续会慢慢把注释都给加上&#xff0c;先看代码了解个大概&#xff08;待更新&#xff09; 前置&#xff1a; RendererAPI.h: #pragma once namespace YOTO {enum class RendererAPI {None 0,OpenGL1};class Renderer {public:inline static R…

(每日持续更新)jdk api之NotSerializableException基础、应用、实战

博主18年的互联网软件开发经验&#xff0c;从一名程序员小白逐步成为了一名架构师&#xff0c;我想通过平台将经验分享给大家&#xff0c;因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验&#xff0c;晚上进行用心精简、整理、总结、定稿&…

Flink 流式读取 Debezium CDC 数据写入 Hudi 表无法处理 -D / Delete 消息

问题场景是&#xff1a;使用 Kafka Connect 的 Debezium MySQL Source Connector 将 MySQL 的 CDC 数据 &#xff08;Avro 格式&#xff09;接入到 Kafka 之后&#xff0c;通过 Flink 读取并解析这些 CDC 数据&#xff0c;然后以流式方式写入到 Hudi 表中&#xff0c;测试中发现…

【爬虫专区】批量下载PDF (无反爬)

天命&#xff1a;只要没反爬&#xff0c;一切都简单 这次爬取的是绿盟的威胁情报的PDF 先看一下结构&#xff0c;很明显就是一个for循环渲染 burp抓包会发现第二次接口请求 接口请求一次就能获取到了所有的数据 然后一个循环批量下载数据即可&#xff0c;其实没啥难度的 imp…

如何安装MySQL

如何安装MySQL 前提条件下载MySQL在 Windows 上安装 MySQL验证 MySQL 安装 MySQL是当今工业界广泛使用的最流行的关系数据库管理软件之一。它通过各种存储引擎提供多用户访问支持。它得到了甲骨文公司的支持。在本节中&#xff0c;我们将学习如何为初学者下载和安装 MySQL。 前…

安卓相对布局RelativeLayout

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"150dp"><TextViewandroid…

在VM虚拟机搭建NFS服务器

NFS共享要求如下&#xff1a; &#xff08;1&#xff09;共享“/mnt/自已姓名的完整汉语拼音”目录&#xff0c;允许XXX网段的计算机访问该共享目录&#xff0c;可进行读写操作。&#xff08;说明&#xff1a;XXX网段&#xff0c;请根据你的规划&#xff0c;再具体指定&#xf…

完整的 HTTP 请求所经历的步骤及分布式事务解决方案

1. 对分布式事务的了解 分布式事务是企业集成中的一个技术难点&#xff0c;也是每一个分布式系统架构中都会涉及到的一个东西&#xff0c; 特别是在微服务架构中&#xff0c;几乎可以说是无法避免。 首先要搞清楚&#xff1a;ACID、CAP、BASE理论。 ACID 指数据库事务正确执行…

【C语言刷题系列】喝汽水问题

文章目录 一、文章简介 1.先买再换 1.1 代码逻辑&#xff1a; 1.2 完整代码 1.3 运行结果 1.4 根据方法一总结优化 2.边买边换 2.1 代码逻辑&#xff1a; 2.2 完整代码 2.3 运行结果 一、文章简介 本文所述专栏——C语言经典编程问题 C语言刷题_倔强的石头106的博客…

unity3d的海盗王白银城演示

这是一个外网上的下载的海盗王unity3d制作的白银城演示场景。 地图只含有白银城区&#xff0c;没有野外和怪物。 当然也没有服务器端的。 我对灯光、摄像头、天空背景等做过调整&#xff0c;使它显示起来比较鲜丽。 它的模型和贴图是直接拿了海盗的&#xff0c;没有做过优化调整…

【算法与数据结构】139、LeetCode单词拆分

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题可以看做一个动态规划问题。其中&#xff0c;字符串s是背包&#xff0c;而字典中的单词就是物品。…

指针的学习1

目录 什么是指针&#xff1f; 野指针 造成野指针的原因&#xff1a; 如何避免野指针&#xff1f; 内存和指针 如何理解编址&#xff1f; 指针变量和地址 取地址操作符& 指针变量和解引用操作符 指针变量 如何拆解指针类型&#xff1f; 指针变量的大小 指针变量…

麒麟系统—— openKylin 安装 Maven

麒麟系统—— openKylin 安装 Maven 一、准备工作1. 确保麒麟系统 openKylin 已经安装完毕。2. 确保 java 已经安装完毕 二、下载Maven三、解压 Maven 与环境配置解压配置环境变量验证 最终&#xff1a;介绍配置的其他参数使用 本文将分享如何在麒麟操作系统 openKylin 上安装…

【Spring源码分析】推断构造方法

推断构造方法源码解析 一、确认候选构造——AutowireAnnotationBeanPostProcessor#determineCandidateConstructors二、autowireConstructor 方法源码解析三、总结 阅读此需阅读下面这些博客先【Spring源码分析】Bean的元数据和一些Spring的工具【Spring源码分析】BeanFactory系…

【Java程序设计】【C00207】基于(JavaWeb+SSM)的宠物领养管理系统(论文+PPT)

基于&#xff08;JavaWebSSM&#xff09;的宠物领养管理系统&#xff08;论文PPT&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于ssm的宠物领养系统 本系统分为前台系统、管理员、收养者和寄养者4个功能模块。 前台系统&#xff1a;游客打开系统…

机器学习入门-----sklearn

机器学习基础了解 概念 机器学习是人工智能的一个实现途径 深度学习是机器学习的一个方法发展而来 定义:从数据中自动分析获得模型,并利用模型对特征数据【数据集:特征值+目标值构成】进行预测 算法 数据集的目标值是类别的话叫做分类问题;目标值是连续的数值的话叫做回…

FullStack之Django(1)开发环境配置

FullStack之Django(1)开发环境配置 author: Once Day date&#xff1a;2022年2月11日/2024年1月27日 漫漫长路&#xff0c;才刚刚开始… 全系列文档请查看专栏: FullStack开发_Once_day的博客-CSDN博客Django开发_Once_day的博客-CSDN博客 具体参考文档: The web framewor…

Docker中配置MySql环境

目录 一、简单安装 1. 首先从Docker Hub中拉取镜像 2. 启动尝试创建MySQL容器&#xff0c;并设置挂载卷。 3. 查看mysql8这个容器是否启动成功 4. 如果已经成功启动&#xff0c;进入容器中简单测试 4.1 进入容器 4.2 登录mysql中 4.3 进行简单添加查找测试 二、主从复…

C++函数分文件编写之VScode版

VScode实现函数的分文件编写 1.下载插件创建项目2.分文件编写内容3.修改主函数文件名 我在分享内容时经常用的软件是VScode&#xff0c;相信有些内存敏感或需要VScode便利性的小伙伴也是更愿意使用VScode。那么接下来我们就盘一盘怎样使用VScode实现分文件编写。 1.下载插件创建…

20240202在WIN10下使用fast whisper缺少cudnn_ops_infer64_8.dll

20240202在WIN10下使用fast whisper缺少cudnn_ops_infer64_8.dll 2024/2/2 10:48 https://blog.csdn.net/feinifi/article/details/132548556 Could not locate cudnn_ops_infer64_8.dll. Please make sure it is in your library path!解决办法 安装cuDNN c:\faster-whisper-…