CSS综合案例4
CSS综合案例4
1. 综合案例
我们来做一个静态的轮播图。
2. 分析思路
- 首先需要加载一张背景图进去
- 需要4个小圆点，设置样式，并用定位和平移调整位置
- 添加两个箭头，也是需要用定位和位移进行调整位置
3. 代码演示
html文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>静态轮播图</title><link rel="stylesheet" href="./style.css" /></head><body><div class="box"><img src="./R-C.jpg" alt="穿越火线" /><div class="arrow1"><p><</p></div><div class="arrow2"><p>></p></div><div class="Carousel"></div><div class="wrapper"><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div></div></div></body>
</html>css文件
* {box-sizing: border-box;
}
.box {width: 1024px;height: 729px;position: absolute;left: 50%;top: 50%;/*translateX x轴位移，单位百分比或者px */transform: translate(-50%, -50%);
}.arrow1 {width: 30px;height: 40px;background-color: #3e3f43;border-radius: 0 70% 60% 0;position: absolute;top: 50%;transform: translateY(-50%);opacity: 0.5;cursor: pointer;
}
.arrow2 {width: 30px;height: 40px;background-color: #3e3f43;border-radius: 70% 0 0 60%;position: absolute;top: 50%;left: 994px;transform: translateY(-50%);opacity: 0.5;cursor: pointer;
}.arrow1 > p {position: absolute;left: 6px;top: -13px;font-size: 20px;color: #fff;
}
.arrow2 > p {position: absolute;left: 9px;top: -13px;font-size: 20px;color: #fff;
}
.Carousel {position: absolute;left: 50%;bottom: 20px;transform: translateX(-50%);width: 120px;height: 20px;border: 1px solid #ccc;background-color: #fff;border-radius: 20px;display: flex;align-items: center;justify-content: space-around;opacity: 0.1;
}.point {left: 50%;bottom: 20px;transform: translateX(-50%);width: 10px;height: 10px;background-color: #fafafa;border-radius: 50%;cursor: pointer;
}
.wrapper {position: absolute;left: 50%;bottom: 20px;transform: translateX(-50%);width: 120px;height: 20px;border-radius: 20px;display: flex;align-items: center;justify-content: space-around;
}.point:hover {background-color: #f55719;
}相关文章：
CSS综合案例4
CSS综合案例4 1. 综合案例 我们来做一个静态的轮播图。 2. 分析思路 首先需要加载一张背景图进去需要4个小圆点，设置样式，并用定位和平移调整位置添加两个箭头，也是需要用定位和位移进行调整位置 3. 代码演示 html文件 <!DOCTYPE htm…...
WifiConfigStore初始化读取-Android13
WifiConfigStore初始化读取 1、StoreData创建并注册2、WifiConfigStore读取2.1 文件读取流程2.2 时序图2.3 日志 1、StoreData创建并注册 packages/modules/Wifi/service/java/com/android/server/wifi/WifiConfigManager.java mWifiConfigStore.registerStoreData(mNetworkL…...
【Spring源码解读！底层原理进阶】【下】探寻Spring内部：BeanFactory和ApplicationContext实现原理揭秘✨
🎉🎉欢迎光临🎉🎉 🏅我是苏泽，一位对技术充满热情的探索者和分享者。🚀🚀 🌟特别推荐给大家我的最新专栏《Spring 狂野之旅：底层原理高级进阶》 🚀…...
从零开始手写mmo游戏从框架到爆炸（六）— 消息处理工厂
就好像门牌号一样，我们需要把消息路由到对应的楼栋和楼层，总不能像菜鸟一样让大家都来自己找数据吧。 首先这里我们参考了rabbitmq中的topic与tag模型，topic对应类，tag对应方法。 新增一个模块，专门记录路由eternity-…...
Go基础学习笔记-知识点
学习笔记记录了我在学习官方文档过程中记的要点，可以参考学习。 go build *.go 文件 编译 go run *.go 执行 go mod init 生成依赖管理文件 gofmt -w *.go 格式换名称的大小写用来控制方法的可见域主方法及包命名规范 package main //注意package的命名࿰…...
jvm几个常见面试题整理
1. Full GC触发机制有如下5种情况。 (1)调用System.gc()时，系统建议执行Full GC，但是不必然执行。(2)老年代空间不足。(3)方法区空间不足。(4)老年代的最大可用连续空间小于历次晋升到老年代对象的平均大小就会进行Full GC。(5)由Eden区、S0(From)区向S…...
ReentrantLock 和 公平锁
ReentrantLock 和 公平锁 一、基本介绍 ReentrantLock(重入锁) 是一个独占式锁，具有和synchronize的监视器锁基本相同的行为和语意。但和synchronized相比，它更加的灵活、强大、增加了轮询、超时、中断等高级功能以及可以创建公平和非公平锁。Reentran…...
使用Postman做API自动化测试
Postman最基本的功能用来重放请求，并且配合良好的response格式化工具。 高级点的用法可以使用Postman生成各个语言的脚本，还可以抓包，认证，传输文件。 仅仅做到这些还不能够满足一个系统的开发，或者说过于琐碎&#…...
入门指南｜Chat GPT 的兴起：它如何改变数字营销格局？
随着数字营销的不断发展，支持数字营销的技术也在不断发展。OpenAI 的 ChatGPT 是一项备受关注的突破性工具。凭借其先进的自然语言处理能力，ChatGPT 已被证明是全球营销人员的宝贵资产。在这份入门指南中，我们将探讨Chat GPT对数字营销专家及…...
【C#】.net core 6.0 创建默认Web应用，以及默认结构讲解，适合初学者
欢迎来到《小5讲堂》 大家好，我是全栈小5。 这是《C#》系列文章，每篇文章将以博主理解的角度展开讲解， 特别是针对知识点的概念进行叙说，大部分文章将会对这些概念进行实际例子验证，以此达到加深对知识点的理解和掌握。…...
Linux中的numactl命令指南
假设我们想控制线程如何被分配到处理器核心，或者选择我们想分配数据的位置，那么numactl命令就适合此类任务。在这篇文章中，我们讨论了如何使用numactl命令执行此类操作。 目录： 介绍语法命令总结参考文献 简介 现代处理器采用…...
AD域国产替代方案，助力某金融企业麒麟信创电脑实现“真替真用”
近期收到不少企业客户反馈采购的信创PC电脑用不起来，影响信创改造的进度。例如，某金融企业积极响应国产化信创替代战略，购置了一批麒麟操作系统电脑。分发使用中发现了如下问题： • 当前麒麟操作系统电脑无法做到统一身份认证&…...
抽象springBoot报错
Failed to configure a DataSource: url attribute is not specified and no embedded datasource could be configured. 中文翻译：无法配置DataSource：未指定“url”属性，并且无法配置嵌入数据源。 DataSource 翻译：数据源 得…...
Linux的打包压缩与解压缩---tar、xz、zip、unzip
最近突然用到了许久不用的压缩解压缩命令，真的陌生， 哈哈，记录一下，后续就不用搜索了。 tar的打包 tar -cvf 压缩有的文件名称 需要压缩的文件或文件夹tar -cvf virtualbox.tar virtualbox/ tar -zcvf virtualbox.tar virtualbo…...
在angular12中proxy.conf.json中配置详解
一、proxy.conf.json文件的目录 二、proxy.conf.json文件中的配置 "/xxx/api": {"target": "地址/api","secure": false,"logLevel": "debug","changeOrigin": true,"pathRewrite": {"…...
PyTorch 中音频信号处理库torchaudio的详细介绍
torchaudio 是 PyTorch 深度学习框架的一部分，是 PyTorch 中处理音频信号的库，专门用于处理和分析音频数据。它提供了丰富的音频信号处理工具、特征提取功能以及与深度学习模型结合的接口，使得在 PyTorch 中进行音频相关的机器学习和深度学习…...
OpenAI研究揭示：ChatGPT对生物武器制造影响有限
### OpenAI研究揭示：ChatGPT对生物武器制造影响有限 在最近的一项引人注目的研究中，OpenAI探索了其旗舰人工智能产品GPT-4在辅助制造生物武器方面的潜力。尽管公众对人工智能可能带来的潜在风险表示担忧，但OpenAI的发现却意味着这种担忧可能…...
IntelliJ IDEA 2023.3发布，AI 助手出世，新特性杀麻了！！
目录 关键亮点 对 Java 21 功能的完全支持 调试器中的 Run to Cursor（运行到光标)嵌入选项 带有编辑操作的浮动工具栏 用户体验优化 Default（默认）工具窗口布局选项 默认颜色编码编辑器标签页 适用于 macOS 的新产品图标 Speed Sear…...
async 与 await（JavaScript）
目录捏 前言一、async二、await三、使用方法总结 前言 async / await 是 ES2017(ES8) 提出的基于 Promise 解决异步的最终方案。上一篇文章介绍了 回调地狱 与 Promise（JavaScript），因为 Promise 的编程模型依然充斥着大量的 then 方法&#…...
GPT-1, GPT-2, GPT-3, GPT-3.5, GPT-4论文内容解读
目录 1 ChatGPT概述1.1 what is chatGPT1.2 How does ChatGPT work1.3 The applications of ChatGPT1.3 The limitations of ChatGPT 2 算法原理2.1 GPT-12.1.1 Unsupervised pre-training2.1.2 Supervised fine-tuning2.1.3 语料2.1.4 分析 2.2 GPT-22.3 GPT-32.4 InstructGPT…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？
在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...
【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）
可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。 链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...
AWS vs 阿里云：功能、服务与性能对比指南
在云计算领域，Amazon Web Services (AWS) 和阿里云 (Alibaba Cloud) 是全球领先的提供商，各自在功能范围、服务生态系统、性能表现和适用场景上具有独特优势。基于提供的引用[1]-[5]，我将从功能、服务和性能三个方面进行结构化对比分析&#…...