当前位置： 首页 > news >正文

CSS综合案例4

news 2025/9/13 22:49:09

CSS综合案例4

1. 综合案例

我们来做一个静态的轮播图。

image-20240204165511757

2. 分析思路

  1. 首先需要加载一张背景图进去
  2. 需要4个小圆点，设置样式，并用定位和平移调整位置
  3. 添加两个箭头，也是需要用定位和位移进行调整位置

image-20240204165851160

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个小圆点&#xff0c;设置样式&#xff0c;并用定位和平移调整位置添加两个箭头&#xff0c;也是需要用定位和位移进行调整位置 3. 代码演示 html文件 <!DOCTYPE htm…...

编程日记 2024/2/8 20:17:10

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…...

编程日记 2024/2/8 20:16:10

【Spring源码解读！底层原理进阶】【下】探寻Spring内部：BeanFactory和ApplicationContext实现原理揭秘✨

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《Spring 狂野之旅&#xff1a;底层原理高级进阶》 &#x1f680…...

编程日记 2024/2/8 20:15:09

从零开始手写mmo游戏从框架到爆炸（六）— 消息处理工厂

就好像门牌号一样&#xff0c;我们需要把消息路由到对应的楼栋和楼层&#xff0c;总不能像菜鸟一样让大家都来自己找数据吧。 首先这里我们参考了rabbitmq中的topic与tag模型&#xff0c;topic对应类&#xff0c;tag对应方法。 新增一个模块&#xff0c;专门记录路由eternity-…...

编程日记 2024/2/8 20:11:05

Go基础学习笔记-知识点

学习笔记记录了我在学习官方文档过程中记的要点&#xff0c;可以参考学习。 go build *.go 文件 编译 go run *.go 执行 go mod init 生成依赖管理文件 gofmt -w *.go 格式换名称的大小写用来控制方法的可见域主方法及包命名规范 package main //注意package的命名&#xff0…...

编程日记 2024/2/8 20:04:59

jvm几个常见面试题整理

1. Full GC触发机制有如下5种情况。 (1)调用System.gc()时&#xff0c;系统建议执行Full GC&#xff0c;但是不必然执行。(2)老年代空间不足。(3)方法区空间不足。(4)老年代的最大可用连续空间小于历次晋升到老年代对象的平均大小就会进行Full GC。(5)由Eden区、S0(From)区向S…...

编程日记 2024/2/8 20:03:58

ReentrantLock 和 公平锁

ReentrantLock 和 公平锁 一、基本介绍 ReentrantLock(重入锁) 是一个独占式锁&#xff0c;具有和synchronize的监视器锁基本相同的行为和语意。但和synchronized相比&#xff0c;它更加的灵活、强大、增加了轮询、超时、中断等高级功能以及可以创建公平和非公平锁。Reentran…...

编程日记 2024/2/8 20:01:57

使用Postman做API自动化测试

Postman最基本的功能用来重放请求&#xff0c;并且配合良好的response格式化工具。 高级点的用法可以使用Postman生成各个语言的脚本&#xff0c;还可以抓包&#xff0c;认证&#xff0c;传输文件。 仅仅做到这些还不能够满足一个系统的开发&#xff0c;或者说过于琐碎&#…...

编程日记 2024/2/8 19:58:54

入门指南｜Chat GPT 的兴起：它如何改变数字营销格局？

随着数字营销的不断发展&#xff0c;支持数字营销的技术也在不断发展。OpenAI 的 ChatGPT 是一项备受关注的突破性工具。凭借其先进的自然语言处理能力&#xff0c;ChatGPT 已被证明是全球营销人员的宝贵资产。在这份入门指南中&#xff0c;我们将探讨Chat GPT对数字营销专家及…...

编程日记 2024/2/8 19:56:52

【C#】.net core 6.0 创建默认Web应用，以及默认结构讲解，适合初学者

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《C#》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握。…...

编程日记 2024/2/8 19:55:51

Linux中的numactl命令指南

假设我们想控制线程如何被分配到处理器核心&#xff0c;或者选择我们想分配数据的位置&#xff0c;那么numactl命令就适合此类任务。在这篇文章中&#xff0c;我们讨论了如何使用numactl命令执行此类操作。 目录&#xff1a; 介绍语法命令总结参考文献 简介 现代处理器采用…...

编程日记 2024/2/8 19:51:47

AD域国产替代方案，助力某金融企业麒麟信创电脑实现“真替真用”

近期收到不少企业客户反馈采购的信创PC电脑用不起来&#xff0c;影响信创改造的进度。例如&#xff0c;某金融企业积极响应国产化信创替代战略&#xff0c;购置了一批麒麟操作系统电脑。分发使用中发现了如下问题&#xff1a; • 当前麒麟操作系统电脑无法做到统一身份认证&…...

编程日记 2024/2/8 19:50:46

抽象springBoot报错

Failed to configure a DataSource: url attribute is not specified and no embedded datasource could be configured. 中文翻译&#xff1a;无法配置DataSource&#xff1a;未指定“url”属性&#xff0c;并且无法配置嵌入数据源。 DataSource 翻译&#xff1a;数据源 得…...

编程日记 2024/2/8 19:49:44

Linux的打包压缩与解压缩---tar、xz、zip、unzip

最近突然用到了许久不用的压缩解压缩命令&#xff0c;真的陌生&#xff0c; 哈哈&#xff0c;记录一下&#xff0c;后续就不用搜索了。 tar的打包 tar -cvf 压缩有的文件名称 需要压缩的文件或文件夹tar -cvf virtualbox.tar virtualbox/ tar -zcvf virtualbox.tar virtualbo…...

编程日记 2024/2/8 19:48:43

在angular12中proxy.conf.json中配置详解

一、proxy.conf.json文件的目录 二、proxy.conf.json文件中的配置 "/xxx/api": {"target": "地址/api","secure": false,"logLevel": "debug","changeOrigin": true,"pathRewrite": {"…...

编程日记 2024/2/8 19:47:43

PyTorch 中音频信号处理库torchaudio的详细介绍

torchaudio 是 PyTorch 深度学习框架的一部分&#xff0c;是 PyTorch 中处理音频信号的库&#xff0c;专门用于处理和分析音频数据。它提供了丰富的音频信号处理工具、特征提取功能以及与深度学习模型结合的接口&#xff0c;使得在 PyTorch 中进行音频相关的机器学习和深度学习…...

编程日记 2024/2/8 19:46:41

OpenAI研究揭示：ChatGPT对生物武器制造影响有限

### OpenAI研究揭示&#xff1a;ChatGPT对生物武器制造影响有限 在最近的一项引人注目的研究中&#xff0c;OpenAI探索了其旗舰人工智能产品GPT-4在辅助制造生物武器方面的潜力。尽管公众对人工智能可能带来的潜在风险表示担忧&#xff0c;但OpenAI的发现却意味着这种担忧可能…...

编程日记 2024/2/8 19:44:39

IntelliJ IDEA 2023.3发布，AI 助手出世，新特性杀麻了！！

目录 关键亮点 对 Java 21 功能的完全支持 调试器中的 Run to Cursor&#xff08;运行到光标)嵌入选项 带有编辑操作的浮动工具栏 用户体验优化 Default&#xff08;默认&#xff09;工具窗口布局选项 默认颜色编码编辑器标签页 适用于 macOS 的新产品图标 Speed Sear…...

编程日记 2024/2/8 19:41:36

async 与 await（JavaScript）

目录捏 前言一、async二、await三、使用方法总结 前言 async / await 是 ES2017(ES8) 提出的基于 Promise 解决异步的最终方案。上一篇文章介绍了 回调地狱 与 Promise&#xff08;JavaScript&#xff09;&#xff0c;因为 Promise 的编程模型依然充斥着大量的 then 方法&#…...

编程日记 2024/2/8 19:40:35

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…...

编程日记 2024/2/8 19:35:29

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/9/13 13:08:55

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/8/22 5:05:10

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/8/21 20:18:45

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/8/25 20:08:49

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/8/23 22:05:50

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/9/13 8:23:57

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/9/13 17:40:32

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/9/6 19:16:38