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

【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

news 2026/3/29 1:04:06

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Banner 轮播</title><style>/* 取消浏览器或者其它标签的默认的内外边距 */* {margin: 0;padding: 0;}/* 取消列表样式 主要是取消列表的小圆点 */li {list-style: none;}/* 设置图片自适应 */img {width: 100%;}.banner {/* 子绝父相 : 整个父容器需要设置相对定位 内部的子元素使用绝对定位任意摆放 */position: relative;/* 父容器内存尺寸 图片 846x472 需要设置 img 标签图片内容宽度为 100% 自适应 */width: 423px;height: 236px;/* 设置背景 */background-color: pink;/* 上下设置 100 像素边距 左右水平居中 */margin: 100px auto;/* 设置圆角  */border-radius: 20px;/* 超出圆角部分的内容直接隐藏 */overflow: hidden;}/* 并集选择器 将左右按钮中相同的样式提取出来进行设置代码重构 */.left,.right {/* 使用绝对定位 在 相对定位的父容器中任意放置元素 */position: absolute;/* 垂直居中 *//* 首先 走到父容器高度一般 */top: 50%;/* 然后 向上走自己高度的一半 */margin-top: -15px;/*绝对定位的盒子 无须转换，直接给大小就好了*/width: 20px;height: 30px;/* 垂直居中 - 行高 = 高度 */line-height: 30px;/* 半透明黑色背景 */background: rgba(0, 0, 0, .2);/* 取消链接的下划线 */text-decoration: none;/* 设置白色 */color: #fff;}/* 设置向左翻页按钮的样式 绝对定位位置 和 圆角状态样式  */.left {left: 0;/* 复合写法设置圆角矩形 : 左上角 右上角 右下角 左下角 */border-radius: 0 15px 15px 0;}/* 设置向右翻页按钮样式 主要是 绝对定位位置 和 圆角状态样式 */.right {/* 绝对定位右侧 */right: 0;/* 文本右对齐 */text-align: right;/* 复合写法设置圆角矩形 : 左上角 右上角 右下角 左下角 */border-radius: 15px 0 0 15px;}/* 按钮移动后的样式 背景颜色加深一倍 */.left:hover,.right:hover {background: rgba(0, 0, 0, .4);}/* 底部小圆点容器 */.circles {/* 在 相对定位 父容器中 使用 绝对定位 任意摆放 */position: absolute;/* 设置底部小圆点容器居中 *//* 首先 走到父容器宽度的一半 */left: 50%;/* 然后 向左走自己的一半宽度 */margin-left: -35px;/* 绝对定位 下边偏移 15 像素 距离底部 15 像素 */bottom: 15px;/* 设置小圆点父容器的尺寸 */width: 70px;height: 13px;/* 设置小圆点背景 半透明白色 */background: rgba(255, 255, 255, 0.3);/* 四个角都设置 7 像素的圆角 */border-radius: 7px;}/* 设置单个小圆点样式 */.circles li {/* 设置浮动样式  */float: left;/* 小圆点宽高都是 8 像素 设置 50% 或者 4 像素 圆角就可以变为正园 */width: 8px;height: 8px;/* 小圆点默认白色 */background-color: #fff;/* 小圆点分开 */margin: 3px;/* 设置四个方向的圆角为 50% 使得正方形变为圆形 */border-radius: 50%;}/* 被选中的小圆点样式此处注意选择器的优先级 */.circles .current {/* 被选中的 */background-color: #ff5000;}</style>
</head>
<body><div class="banner"><!-- 向左翻页按钮 --><a href="#" class="left"> < </a><!-- 向右翻页按钮 --><a href="#" class="right"> > </a><!-- Banner 图片 --><img src="banner_image.png" alt=""><!-- 底部的小圆点 --><ul class="circles"><li></li><!-- 当前选择的小圆点 --><li class="current"></li><li></li><li></li><li></li></ul></div>
</body>
</html>

 

相关文章：

【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

代码示例 : <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Banner 轮播</title><style>/* 取消浏览器或者其它标签的默认的内外边距 */* {margin: 0;padding: 0;}/* 取消列表样式 主要是…...

编程日记 2023/8/28 23:18:00

leetcode做题笔记111. 二叉树的最小深度

给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明&#xff1a;叶子节点是指没有子节点的节点。 思路一&#xff1a;递归 int minDepth(struct TreeNode* root){if(!root)return 0;int leftminDepth(root->le…...

编程日记 2023/8/28 23:16:59

ubuntu安装Google Chrome 浏览器和ChromeDriver

要在Ubuntu上安装Google Chrome浏览器和ChromeDriver&#xff0c;可以按照以下步骤操作&#xff1a; 1. 安装Google Chrome 浏览器 下载Google Chrome 的最新版本。 wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb使用dpkg安装下载的deb包。…...

编程日记 2023/8/28 23:15:57

猫头虎博主赠书一期：《Kubernetes原生微服务开发》

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/8/28 23:14:55

QtC++ 设计模式（四）——策略模式

策略模式 序言理解源码 序言 还是参考的菜鸟教程&#xff0c;会C的还是看C的方式来得舒服。 . 理解 使用符合UML规范的便于理解和回忆&#xff0c;接口其实就是普通的基类 . 源码 strategy.h /// 策略 class Strategy { public:virtual ~Strategy();/*** brief 计算* p…...

编程日记 2023/8/28 23:13:54

LVS集群和分布式概念

LVS 一.集群和分布式概念 1.1 集群 在计算机领域&#xff0c;集群早在 1960 年就出现&#xff0c;随着互联网和计算机相关技术的发展&#xff0c;现在 集群这一技术已经在各大互联网公司普及。 1.1.1 集群概念 计算机集群指一组通过计算机网络连接的计算机&#xff0c;它们…...

编程日记 2023/8/28 23:12:53

javafx应用程序线程异常Exception in thread “JavaFx Application Thread“

前几天用javafx做小桌面应用程序出现了一个问题&#xff1a; 反复检查&#xff0c;最终确定报错的原因是UI刷新频率过快导致的 javafx提供了Platform.runLater用于解决该问题&#xff1a; Platform.runLater(new Runnable() {Overridepublic void run(){//用Platform.runLate…...

编程日记 2023/8/28 23:11:53

大漠插件7.2336

工具名称:大漠插件7.2336 更新时间2023-08-28更新内容/v7.23361. YOLO综合工具标记逻辑优化. 更加的方便2. YOLO综合工具增加了默认类. 对于多个同类可以不用每次都进行选择.3. YOLO综合工具增加可以对模型的输入大小进行修改4. YOLO的dmx格式变更.新老版本不混用. 新的dmx格式…...

编程日记 2023/8/28 23:10:51

5年测试，面试结束后被HR发朋友圈怼了..（心塞）

前一阵子向朋友诉苦&#xff0c;我在参加字节跳动面试的时候被面试官怼得哑口无言&#xff0c;场面让我一度十分尴尬。 印象最深的就是下面几个问题&#xff1a; 根据你以前的工作经验和学习到的测试技术&#xff0c;说说你对质量保证的理解&#xff1f; 非关系型数据库和关系型…...

编程日记 2023/8/28 23:09:49

基于相空间重构的混沌背景下微弱信号检测算法matlab仿真,对比SVM,PSO-SVM以及GA-PSO-SVM

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 SVM 4.2 PSO-SVM 4.3 GA-PSO-SVM 5.算法完整程序工程 1.算法运行效果图预览 SVM: PSO-SVM: GA-PSO-SVM: 以上仿真图参考文献《基于相空间重构的混沌背景下微弱信号检测方法研究》 2.…...

编程日记 2023/8/28 23:08:47

开发者必备：推荐将闲置iPad Pro打造为编程工具，使用VS Code编写代码

文章目录 前言1. 本地环境配置2. 内网穿透2.1 安装cpolar内网穿透(支持一键自动安装脚本)2.2 创建HTTP隧道 3. 测试远程访问4. 配置固定二级子域名4.1 保留二级子域名4.2 配置二级子域名 5. 测试使用固定二级子域名远程访问6. iPad通过软件远程vscode6.1 创建TCP隧道 7. ipad远…...

编程日记 2023/8/28 23:07:46

c++，标准库std中全局函数 _Destroy_in_place(...)的分析

&#xff08;1&#xff09;该函数的定义和位置如下&#xff1a; 可见&#xff0c;传入形参为某种类型的引用&#xff0c;该函数会执行形参的析构函数&#xff0c;还可以有效解决数组的连续析构。很强大的函数。 &#xff08;2&#xff09;疑问是&#xff0c;若形参是指针类型…...

编程日记 2023/8/28 23:06:44

java：Tomcat

文章目录 背景服务器web 服务器服务资源的分类服务器软件的分类nginx 和 tomact总结 安装Tomcatbrew安装官网压缩包安装IDEA集成IDEA插件 说明 背景 在讲 Tomcat 是啥之前&#xff0c;我们先来了解一些概念。 服务器 可以理解为一个高性能的电脑&#xff0c;但是这个电脑现在…...

编程日记 2023/8/28 23:05:42

US-P2F-R-C双线圈插头式比例阀放大器

US-P2F-R-C型插头式安装比例放大器控制不带电反馈的单或双比例电磁铁的比例阀&#xff0c;如比例插装阀、比例方向阀、比例压力阀、比例流量阀、比例叠加阀等&#xff0c;带数显区显示及当前参数&#xff0c;如指令、电流、上下斜坡、颤振频率等&#xff0c;指令类型兼容0-10V、…...

编程日记 2023/8/28 23:04:40

clickhouse一次异常排查记录

clickhouse中报错 关闭了自启动&#xff0c;删了status&#xff0c;重启了clickhouse还是报错 1&#xff0c;排查定时执行的脚本日志&#xff08;每小时第5分钟执行&#xff09; INSERT INTO quality0529.previously_reported_urls (url) SELECT url FROM quality0529.hourly_…...

编程日记 2023/8/28 23:03:39

Python 数据可视化：玩转 Matplotlib 的散点图、线形图、饼图和热力图

前言 我们来探讨其他几种常用的数据可视化图形：散点图、线形图、饼图和热力图。 可视化图形的优点~ 数据可视化图表是数据分析和演示的重要手段，它有以下优点： 快速理解信息：通过图表，人们可以迅速捕捉到数据的主要模式和趋势，而不需要详细查看每个数据点。 增强记忆：…...

编程日记 2023/8/28 23:02:38

基于python+pyqt实现opencv银行卡身份证等识别

效果展示 识别结果 查看处理过程 历史记录 完整演示视频&#xff1a; 无法粘贴视频........ 完整代码链接 视频和代码都已上传百度网盘&#xff0c;放在主页置顶文章...

编程日记 2023/8/28 23:01:37

惠普台式机装系统记录

1. 问题集锦 1.必须装双系统&#xff0c;就是必须得有win系统&#xff0c;不然会出现蓝屏&#xff1b; 2.装win系统之后&#xff0c;再装ubuntu系统&#xff0c;会出现rst的问题&#xff0c;基本无解&#xff0c;放弃&#xff1b; 2. 装机步骤&#xff1a; 第一步&#xff1a…...

编程日记 2023/8/28 23:00:36

java八股文面试[JVM]——垃圾回收

参考&#xff1a;JVM学习笔记&#xff08;一&#xff09;_卷心菜不卷Iris的博客-CSDN博客 GC垃圾回收面试题&#xff1a; JVM内存模型以及分区&#xff0c;需要详细到每个区放什么 堆里面的分区&#xff1a;Eden&#xff0c;survival from to&#xff0c;老年代&#xff0c;各…...

编程日记 2023/8/28 22:59:33

iOS开发Swift-控制流

1.For-In循环 //集合循环 let names ["a", "b", "c"] for name in names {print("Hello, \(name)!") } //次数循环 for index in 1...5{print("Hello! \(index)") } //不需要值时可以使用 _ 来忽略此值 for _ in 1...5{…...

编程日记 2023/8/28 22:58:32

告别格式转换困境：Word-to-Markdown工具的高效智能无缝方案

告别格式转换困境&#xff1a;Word-to-Markdown工具的高效智能无缝方案 【免费下载链接】word-to-markdown A ruby gem to liberate content from Microsoft Word documents 项目地址: https://gitcode.com/gh_mirrors/wo/word-to-markdown 当技术文档作者需要将Word内容…...

编程新知 2026/3/29 0:41:11

3大突破！OptiScaler如何让老旧硬件焕发新生

3大突破&#xff01;OptiScaler如何让老旧硬件焕发新生 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler 当你的AMD显卡遇见只支持DL…...

编程新知 2026/3/29 0:07:02

如何实现微信聊天记录的终极掌控：WeChatMsg完全指南

如何实现微信聊天记录的终极掌控&#xff1a;WeChatMsg完全指南 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatM…...

编程新知 2026/3/28 23:08:22

HarmonyOS6 半年磨一剑 - RcTextarea 组件状态管理与禁用只读机制

文章目录 前言一、焦点状态机1.1 isFocused 驱动的 UI 变化1.2 焦点事件处理流程 二、禁用与只读的本质区别2.1 技术实现对比2.2 视觉表现差异2.3 清空按钮的保护逻辑 三、清空按钮的智能显示策略3.1 双重触发模式3.2 清空按钮的渲染位置3.3 清空操作的完整流程 四、自动聚焦与…...

编程新知 2026/3/28 23:02:21

LongCat动物百变秀快速入门：上传图片+输入文字=神奇效果

LongCat动物百变秀快速入门&#xff1a;上传图片输入文字神奇效果 1. 认识动物百变秀 你是否想过给家里的宠物猫换个造型&#xff1f;或者把普通的狗狗照片变成威风凛凛的狼&#xff1f;LongCat动物百变秀让这些想象变成现实。这是一个基于美团开源技术的智能图片编辑工具&am…...

编程新知 2026/3/28 22:26:09

Python AI用例生成全链路实践（含12个工业级代码片段+GPT-4/Claude/Llama3对比基准）

第一章&#xff1a;Python AI用例生成全链路实践概览AI用例生成是将业务需求快速转化为可执行AI解决方案的关键环节&#xff0c;涵盖从问题定义、数据准备、模型选型、提示工程、评估验证到部署集成的完整闭环。本章聚焦基于Python生态的端到端实践路径&#xff0c;强调可复现性…...

编程新知 2026/3/28 22:04:02

RVC语音训练实战：从零开始3分钟极速训练模型，打造你的专属AI歌手

RVC语音训练实战&#xff1a;从零开始3分钟极速训练模型&#xff0c;打造你的专属AI歌手 1. RVC简介与准备工作 RVC&#xff08;Retrieval-based-Voice-Conversion&#xff09;是一款强大的AI语音转换工具&#xff0c;能够让你快速训练出专属的AI歌手模型。与传统语音合成技术…...

编程新知 2026/3/28 21:21:46

24小时运行：OpenClaw+GLM-4.7-Flash的网站监控方案

24小时运行&#xff1a;OpenClawGLM-4.7-Flash的网站监控方案 1. 为什么需要自动化网站监控 去年我负责维护的某个技术博客突然遭遇了持续3天的数据库连接泄漏&#xff0c;直到用户投诉才发现问题。手动刷新网页检查状态的方式&#xff0c;在深夜和周末存在明显的监控盲区。这…...

编程新知 2026/3/28 20:23:19

5个步骤快速搭建医院信息系统：终极医疗数字化解决方案

5个步骤快速搭建医院信息系统&#xff1a;终极医疗数字化解决方案 【免费下载链接】HIS ZainZhao/HIS: HIS 通常代表医疗信息系统&#xff08;Hospital Information System&#xff09;&#xff0c;但此链接指向的具体项目信息未知&#xff0c;可能是某个开发者设计或维护的医院…...

编程新知 2026/3/28 20:19:19

从数据故事到视觉叙事：用Matplotlib定制专属渐变色，让你的图表会‘说话’

从数据故事到视觉叙事&#xff1a;用Matplotlib定制专属渐变色&#xff0c;让你的图表会‘说话’ 在数据爆炸的时代&#xff0c;图表早已不再是简单的数字呈现工具。当一位市场分析师需要向董事会展示季度业绩趋势&#xff0c;当一位科研人员需要向同行解释复杂的气候变化模式…...

编程新知 2026/3/28 19:16:52