位置: IT常识 - 正文

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

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

推荐整理分享【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )(轮播图效果用css怎么实现),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css轮播图小圆点怎么做,轮播图效果用css怎么实现,轮播图效果用css怎么实现,轮播图css实现,轮播图用css怎么做,轮播图效果用css怎么实现,css轮播图小圆点怎么做,css轮播图小圆点怎么做,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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;

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

代码示例 :

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

执行结果 :

本文链接地址:https://www.jiuchutong.com/zhishi/299166.html 转载请保留说明!

上一篇:2023前端面试题第二弹(真实,一般人我还不给看)(2023前端面试题目)

下一篇:YOLO v5 代码精读(3)YOLO网络结构(yolov5 test.py)

  • 天猫红包在哪里领取(退款淘宝天猫红包在哪里)

    天猫红包在哪里领取(退款淘宝天猫红包在哪里)

  • 在WPS第一张幻灯片前加一张空白幻灯片怎么办(第一张幻灯片在位置怎么做)

    在WPS第一张幻灯片前加一张空白幻灯片怎么办(第一张幻灯片在位置怎么做)

  • 怎么把微信里面的所有信息删除(怎么把微信里面的人隐藏起来)

    怎么把微信里面的所有信息删除(怎么把微信里面的人隐藏起来)

  • 虚拟付款是什么意思(虚拟支付方式)

    虚拟付款是什么意思(虚拟支付方式)

  • 怎么用手机识别花草(怎么用手机识别颜色)

    怎么用手机识别花草(怎么用手机识别颜色)

  • oppo盲人模式怎么关闭(oppo盲人模式怎么返回)

    oppo盲人模式怎么关闭(oppo盲人模式怎么返回)

  • 淘宝预计时间会提前么(淘宝预计到达时间准不准)

    淘宝预计时间会提前么(淘宝预计到达时间准不准)

  • 抖音短视频最长能发多少时间(抖音短视频最长可以拍几分钟?)

    抖音短视频最长能发多少时间(抖音短视频最长可以拍几分钟?)

  • 抖音喜欢的视频失效了怎么办(抖音喜欢的视频怎么设置隐私)

    抖音喜欢的视频失效了怎么办(抖音喜欢的视频怎么设置隐私)

  • 给对方打电话提示正忙是什么意思(给对方打电话提示手机助理)

    给对方打电话提示正忙是什么意思(给对方打电话提示手机助理)

  • 锐龙r53500x相当于i几(锐龙r53500怎么样)

    锐龙r53500x相当于i几(锐龙r53500怎么样)

  • 苹果手机的字体叫什么(苹果手机的字体大小在哪里调节)

    苹果手机的字体叫什么(苹果手机的字体大小在哪里调节)

  • 电脑等于号怎么打(电脑等于号怎么用)

    电脑等于号怎么打(电脑等于号怎么用)

  • 体重秤ib什么意思(体重秤lb什么意思)

    体重秤ib什么意思(体重秤lb什么意思)

  • word怎么裁剪身份证的边(world如何裁剪)

    word怎么裁剪身份证的边(world如何裁剪)

  • 嘀嗒顺风车没有发票怎么报销(嘀嗒顺风车没有人接单)

    嘀嗒顺风车没有发票怎么报销(嘀嗒顺风车没有人接单)

  • 淘宝自动回复怎么设置(淘宝自动回复怎么留微信)

    淘宝自动回复怎么设置(淘宝自动回复怎么留微信)

  • 苹果语音备忘录改名字(苹果语音备忘录删除了可以恢复吗)

    苹果语音备忘录改名字(苹果语音备忘录删除了可以恢复吗)

  • 怎么在电脑上剪拼音乐(怎么在电脑上剪切)

    怎么在电脑上剪拼音乐(怎么在电脑上剪切)

  • 微信原图有什么区别(微信原图什么时候过期)

    微信原图有什么区别(微信原图什么时候过期)

  • 淘宝怎么快速升三心(淘宝怎么快速升级淘气值)

    淘宝怎么快速升三心(淘宝怎么快速升级淘气值)

  • 云上贵州乱扣费能退吗(云上贵州扣钱)

    云上贵州乱扣费能退吗(云上贵州扣钱)

  • 202101最新win10教育版/专业版激活秘钥分享 附激活工具(windows10.0)

    202101最新win10教育版/专业版激活秘钥分享 附激活工具(windows10.0)

  • KHALMNPR.exe是什么进程 有什么作用 KHALMNPR进程查询(kzip_main.exe是什么)

    KHALMNPR.exe是什么进程 有什么作用 KHALMNPR进程查询(kzip_main.exe是什么)

  • 增值税电子发票可以作废吗
  • 外经证预缴税款征收率
  • 建筑业小规模纳税人 扣除分包款 开票
  • 中税税务咨询
  • 购买地瓜
  • 农产品增值税加计扣除最新政策2021
  • 工程款增值税专用发票如何开具
  • 小规模不动产租赁增值税税率是多少
  • 季度盈利可以弥补以用以前年度亏损弥补
  • 预计销售收入增长是什么意思
  • 减免城建税税款会计分录
  • 增值税申报错误如何重报
  • 房产税征税税率
  • 外资企业所得税和内资区别
  • 往来核算会计的岗位职责和工作内容
  • 别人借用我的pos刷卡套现谁承担
  • 生产车间维修费
  • 参加公司比赛后的感想
  • 未分配利润应该在借方还是贷方??
  • 所得税汇算清缴后发现有误怎么办
  • 企业营改增对企业税负影响分析
  • 补发工资如何申请
  • 公司账上的钱如何取出来
  • 增值税的销项税额和进项税额的区别
  • 税务增加办税人员怎么操作
  • 退税收入怎么做分录
  • 企业所得税应纳税额的计算公式
  • exe是什么进程
  • 发出商品是在产品吗
  • 发工资扣的个人社保计入哪个科目
  • thinkphp6调用模型的方法
  • macos使用技巧
  • 应交消费税的会计分录
  • 拆迁补偿收入如何纳税
  • 纳税人解除劳动合同证明
  • 费用分摊的分录
  • spring 异常
  • phptoken验证原理
  • php比较大小
  • 房屋装修固定资产置换
  • 增值税多扣款了怎么处理
  • 数字图像处理课后题答案
  • 个人所得税经营所得
  • 生产企业成本会计做账流程
  • vue实现注册
  • mongodb主从同步速度
  • 小规模纳税人印花税减半征收政策
  • 经营证在哪里办
  • 个体户核定征收超过了怎么办
  • 劳务分包的三种形式
  • 资产处置损益要写明细账吗
  • 个人独资企业需要会计做账吗
  • 确认借款无法收款怎么办
  • 资金占用利息收入怎么入账
  • mysql数据库innodb
  • sql server日期函数有哪些
  • mysql在cmd命令操作
  • sqlserver数据库脚本
  • win10右键菜单怎么设置
  • linux系统中的用户分为哪几类
  • windows7的常用菜单
  • xp系统1
  • 如何避免升级为查帐征收
  • win1021年更新
  • win8.1新建桌面
  • windows8 1
  • linux装完显卡驱动分辨率低
  • cocos2dx4.0教程
  • opengl文档窗口是什么
  • jquery的使用
  • python2与python3中的区别
  • unity uma
  • javascript 进阶篇2 CSS XML学习
  • python如何用pi
  • 解决js请求服务问题
  • script标签可以放在html哪个位置
  • jquery的实现原理
  • jquery的核心理念
  • 扬州儿童社保卡
  • 个人所得税怎么扣除
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设