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

news2025/3/1 10:31:49

文章目录

  • 一、开发要点
    • 1、基本设置 - 取消默认内外边距 / 取消基本样式 / 图片自适应
    • 2、外层父容器设置 - 子绝父相 / 盒子浏览器水平居中 / 设置圆角 / 设置溢出隐藏
    • 3、左右按钮设置 - 绝对定位垂直居中设置 / 使用圆角矩形设置半圆 / 文字垂直居中
    • 4、底部小圆点设置 - 绝对定位水平居中设置 / 使用圆角矩形设置左右两侧半圆 / 使用圆角矩形设置小圆点
  • 二、代码示例





一、开发要点


要实现如下样式的轮播图 :

在这里插入图片描述


1、基本设置 - 取消默认内外边距 / 取消基本样式 / 图片自适应


取消默认内外边距 : 本示例中主要是 取消 body 的内边距 ;

		/* 取消浏览器或者其它标签的默认的内外边距 */
		* {
			margin: 0;
			padding: 0;
		}

取消列表样式 : 主要是 取消列表项前的小圆点 ;

		/* 取消列表样式 主要是取消列表的小圆点 */
		li {
			list-style: none;
		}

设置图片自适应 : 设置的图片可能 大于或小于 图片容器 , 设置其宽度填充 100% 父容器 , 可以保证图片填充满父容器 ;

		/* 设置图片自适应 */
		img {
			width: 100%;
		}

2、外层父容器设置 - 子绝父相 / 盒子浏览器水平居中 / 设置圆角 / 设置溢出隐藏


子绝父相 : 在该轮播图中 , 需要 使用绝对定位在父容器中任意摆放 , 包括左右垂直居中的按钮 , 下方的小圆点 ; 子元素需要使用绝对定位 , 那么父容器必须使用相对定位 ;

			/* 子绝父相 : 整个父容器需要设置相对定位 
						内部的子元素使用绝对定位任意摆放 */
			position: relative;

盒子浏览器水平居中设置 : 将该父容器设置为水平居中 , 将其 margin 的左右外边距设置为 auto 即可 ;

			/* 上下设置 100 像素边距 左右水平居中 */
			margin: 100px auto;

设置圆角 : 该 Banner 轮播条四个角都是圆角 ;

			/* 设置圆角  */
			border-radius: 20px;

设置溢出隐藏 : 示例图中 , 超出圆角的部分需要隐藏 , 需要设置 overflow 属性 ;

			/* 超出圆角部分的内容直接隐藏 */
			overflow: hidden;

代码示例 :

		.banner {
			/* 子绝父相 : 整个父容器需要设置相对定位 
						内部的子元素使用绝对定位任意摆放 */
			position: relative;

			/* 父容器内存尺寸 图片 846x472 
			   需要设置 img 标签图片内容宽度为 100% 自适应 */
			width: 423px;
			height: 236px;

			/* 设置背景 */
			background-color: pink;

			/* 上下设置 100 像素边距 左右水平居中 */
			margin: 100px auto;

			/* 设置圆角  */
			border-radius: 20px;

			/* 超出圆角部分的内容直接隐藏 */
			overflow: hidden;
		}

3、左右按钮设置 - 绝对定位垂直居中设置 / 使用圆角矩形设置半圆 / 文字垂直居中


绝对定位垂直居中设置 : 执行下面两个步骤 , 可以将 绝对定位 的子元素设置为 垂直居中 ;

  • 首先 , 走到父容器高度的一半 ;
  • 然后 , 向上走自己高度的一半 ;
			/* 使用绝对定位 在 相对定位的父容器中任意放置元素 */
			position: absolute;

			/* 垂直居中 */
			/* 首先 走到父容器高度一般 */
			top: 50%;
			/* 然后 向上走自己高度的一半 */
			margin-top: -15px;

使用圆角矩形设置半圆 :

  • 设置左侧的按钮 , 右侧设置成半圆 , 也就是 右上角和右下角设置成圆角 ;
			/* 复合写法设置圆角矩形 : 左上角 右上角 右下角 左下角 */
			border-radius: 0 15px 15px 0;
  • 设置右侧的按钮 , 左侧设置成半圆 , 也就是 左上角和左下角设置成圆角 ;
			/* 复合写法设置圆角矩形 : 左上角 右上角 右下角 左下角 */
			border-radius: 15px 0 0 15px;

文字垂直居中 : 使文字垂直居中 , 令 行高 = 内容高度 即可 ;

			/*绝对定位的盒子 无须转换，直接给大小就好了*/
			width: 20px;
			height: 30px;

			/* 垂直居中 - 行高 = 高度 */
			line-height: 30px;

代码示例 :

		/* 并集选择器 将左右按钮中相同的样式提取出来进行设置
		   代码重构 */
		.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);
		}

4、底部小圆点设置 - 绝对定位水平居中设置 / 使用圆角矩形设置左右两侧半圆 / 使用圆角矩形设置小圆点


绝对定位水平居中设置 : 执行下面两个步骤 , 可以将 绝对定位 的子元素设置为 水平居中 ;

  • 首先 , 走到父容器宽度的一半 ;
  • 然后 , 向左走自己宽度的一半 ;
			/* 在 相对定位 父容器中 使用 绝对定位 任意摆放 */
			position: absolute;
			/* 设置底部小圆点容器居中 */
			/* 首先 走到父容器宽度的一半 */
			left: 50%;
			/* 然后 向左走自己的一半宽度 */
			margin-left: -35px;

使用圆角矩形设置左右两侧半圆 : 圆角矩形容器高度是 13 像素 , 设置其左右两侧为半圆 , 设置 7 像素圆角即可 ;

			/* 四个角都设置 7 像素的圆角 */
			border-radius: 7px;

使用圆角矩形设置小圆点 : 小圆点的宽高是 8 像素 , 设置其 4 像素或者 50% 的圆角 , 即可将该盒子设置为圆形 ;


代码示例 :

		/* 底部小圆点容器 */
		.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%;
		}




二、代码示例


代码示例 :

<!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>

执行结果 :

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Web_python_template_injection（Python模块注入）

Web_python_template_injection（Python模块注入）

打开链接&#xff0c;提示是Python的模块注入 我们先了解一些基本概念&#xff1a; 模板引擎可以让&#xff08;网站&#xff09;程序实现界面与数据分离&#xff0c;业务代码与逻辑代码的分离&#xff0c;这大大提升了开发效率&#xff0c;良好的设计也使得代码重用变得更加容…
阅读更多...
智慧停车场解决方案，停车场导航技术怎么实现

智慧停车场解决方案，停车场导航技术怎么实现

停车场导航技术怎么实现&#xff1f;随着城市化的不断发展&#xff0c;停车场建的越来越大&#xff0c;同时也越来越复杂&#xff0c;停车、找车成为很多人感到十分头疼的问题。在这种情况下&#xff0c;一个高效的停车场电子地图应用已经成为城市交通管理中不可缺少的组成部分…
阅读更多...
架构设计三原则

架构设计三原则

作为程序员&#xff0c;很多人都希望成为一名架构师&#xff0c;但并非简单地通过编程技能就能够达成这一目标。事实上&#xff0c;优秀的程序员和架构师之间存在一个明显的鸿沟——不确定性。 编程的本质是确定性的&#xff0c;也就是说&#xff0c;对于同一段代码&#xff0c…
阅读更多...
【Java虚拟机】JVM类加载机制和双亲委派模型

【Java虚拟机】JVM类加载机制和双亲委派模型

文章目录1.JVM虚拟机类加载子系统2.双亲委派机制和JDK9模块化系统3.ClassLoader源码解读和自定义类加载器场景4.自定义ClassLoader类加载器案例实战5.不同类加载器加载同个class类1.JVM虚拟机类加载子系统 &#xff08;1&#xff09;什么是类加载子系统 是Java虚拟机的一个重…
阅读更多...
MinIO基础教程

MinIO基础教程

MinIO 1.MinIO安装 Minio 是个基于 Golang 编写的开源对象存储服务&#xff0c;存储非结构化数据&#xff0c;如&#xff1a;图片&#xff0c;视频&#xff0c;音乐等 官网地址&#xff1a;https://min.io/ 中文地址&#xff1a;http://minio.org.cn 官网文档&#xff08; …
阅读更多...
【LeetCode: 300. 最长递增子序列 | 暴力递归=＞记忆化搜索=＞动态规划】

【LeetCode: 300. 最长递增子序列 | 暴力递归=＞记忆化搜索=＞动态规划】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
【Vue】收集表单数据 过滤器

【Vue】收集表单数据 过滤器

收集表单数据 收集表单数据&#xff1a; 若&#xff1a;<input type"text"/>,则v-model收集的是value值&#xff0c;用户输入的就是value值若&#xff1a;<input type"radio"/>,则v-model收集的是value值&#xff0c;且要给标签配置value值若…
阅读更多...
树莓派与STM32(rt1064)串口通信

树莓派与STM32(rt1064)串口通信

目录 一、树莓派通信 1、硬件连线准备 2、安装Serial和打开树莓派串口 2.1安装Serial 2.2打开树莓派串口 2.3修改串口映射关系 3、树莓派代码 4、上位机 5、运行uart.py代码进行测试 5.1 树莓派发送&#xff0c;上位机接收 5.2上位机发送&#xff0c;树莓派接收 二、…
阅读更多...
HopeHomi脚手架（四）redis、redisson模块

HopeHomi脚手架（四）redis、redisson模块

项目结构 Redis RedisSpiModuleImport 基于SPI。在项目启动的时候返回待加载类名 public class RedisSpiModuleImport implements SpiEnvironmentModuleImport {Overridepublic String[] readyImportClassName() {return new String[]{RedisConfiguration.class.getName()};…
阅读更多...
裸机配置Java环境，解决 -bash: jps: command not found

裸机配置Java环境，解决 -bash: jps: command not found

目录 配置JDK 1、第一步&#xff1a;使用yum命令查找JDK 2、第二步&#xff1a;执行安装命令 3、第三步&#xff1a;验证是否安装成功 4、第四步&#xff1a;验证是否可用 5、第五步&#xff1a;安装开发环境 6、第六步&#xff1a;配置环境变量 今天申请了公司的开发机器&…
阅读更多...
【openGauss实战10】备份与恢复

【openGauss实战10】备份与恢复

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…
阅读更多...
视觉SLAM ch12 建图（RGB-D）

视觉SLAM ch12 建图（RGB-D）

一、RGB-D稠密建图 RGB-D相机通结构光和飞行时间获取深度。 稠密重建方法&#xff1a;根据估计的相机位姿&#xff0c;将RGB-D数据转化为点云&#xff0c;然后进行拼接&#xff0c;最终得到由离散的点组成的点云地图。 在此基础上&#xff0c;如果希望估计物体的表面&#x…
阅读更多...
Python 实验二 Python语言基础

Python 实验二 Python语言基础

1.运用输入输出函数编写程序&#xff0c;将华氏温度转换成摄氏温度。换算公式&#xff1a;C(F-32)*5/9,其中 C为摄氏温度&#xff0c;F为华氏温度。 Ffloat(input("请输入你要转换的华氏温度&#xff1a;")) C(F-32)*5/9 print("转换为摄氏温度为&#xff1a;&…
阅读更多...
opencv：介绍 SIFT（尺度不变特征变换）及其使用（一）

opencv：介绍 SIFT（尺度不变特征变换）及其使用（一）

在本章中 我们将了解 SIFT 算法的概念 我们将学习如何找到 SIFT 关键点和描述符。 理论 在过去的几章中，我们了解了一些角点检测器，如 Harris 等。它们具有旋转不变性，这意味着即使图像旋转，我们也可以找到相同的角点。这是显而易见的，因为旋转后的图像中的角点仍然是角点…
阅读更多...
Cairo 1 实战入门:编写测试部署ERC-20代币智能合约

Cairo 1 实战入门:编写测试部署ERC-20代币智能合约

概述 读者可以前往 我的博客 获得更好的阅读体验。 Cairo 是 ZK Rollup 的领域专用语言&#xff0c;目前仅用于 StarkNet 项目。随着 Rollup 叙事的发展&#xff0c;我们认为 cairo 在未来一定会成为智能合约开发的核心语言。 本文类似我之前编写的 Foundry教程&#xff1a;…
阅读更多...
BART模型简单介绍

BART模型简单介绍

目录 一、概要 二、深入扩展 2.1 预训练任务 2.2 模型精调 一、概要 BART&#xff08;Bidirectional and Auto-Regressive Transformers&#xff09;模型使用标准的基于Transformer的序列到序列结构&#xff0c;主要区别在于用GeLU&#xff08;Gaussian Error Linerar Units…
阅读更多...
西安石油大学C++上机实验 上机二：友元和运算符重载程序设计（2学时）

西安石油大学C++上机实验 上机二：友元和运算符重载程序设计（2学时）

上机二&#xff1a;友元和运算符重载程序设计&#xff08;2学时&#xff09; 实验目的&#xff1a; 了解友元函数的概念。 掌握友元函数的定义和使用方法。 了解运算符重载的概念和使用方法。 掌握几种常用的运算符重载的方法。 实验内容 编写一个时间类&#xff0c;实现…
阅读更多...
【面试】记一次中小公司某一次面试题

【面试】记一次中小公司某一次面试题

文章目录1. MySQL中explain执行计划你比较关注哪些字段&#xff1f;2.char、varchar 和 text的区别&#xff1f;3. int(3)和int(11)查询的区别&#xff1f;4. 字段里NULL和空值的区别&#xff1f;5. spring中怎么解决循环依赖问题&#xff1f;5.1 重新设计5.2 使用注解 Lazy5.3…
阅读更多...
ESP32设备驱动-HDC2080温湿度传感器驱动

ESP32设备驱动-HDC2080温湿度传感器驱动

HDC2080温湿度传感器驱动 文章目录 HDC2080温湿度传感器驱动2、硬件准备3、软件准备4、驱动实现HDC2080 器件是一款集成式湿度和温度传感器，可在小型 DFN 封装中以极低的功耗提供高精度测量。基于电容的传感器包括新的集成数字功能和用于消散冷凝和湿气的加热元件。 HDC2080 数…
阅读更多...
虹科新闻 | 冲击记录仪ASPION G-Log 2荣获行业领袖奖-Best of Industry Award

虹科新闻 | 冲击记录仪ASPION G-Log 2荣获行业领袖奖-Best of Industry Award

虹科ASPION G-Log 2 荣获 行业领袖奖 “2022 Best of Industry Award” 创新的运输冲击数据记录仪虹科ASPION G-Log 2荣获2022年行业领袖奖。经过5个月的投票和近2万张选票&#xff0c;G-Log 2在传感器 由冲击或振动&#xff0c;甚至是温度或相对湿度等气候因素引起的运输损坏…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023