位置: 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)

  • 淘宝店铺网页设计在确定了企业网站建设页面的设计方案,确定了企业网站制作的功能和第三方企业网站建设公司之后

    淘宝店铺网页设计在确定了企业网站建设页面的设计方案,确定了企业网站制作的功能和第三方企业网站建设公司之后

  • 360云盘转存教程(360云盘转存百度云盘)(360云盘转存教程在哪)

    360云盘转存教程(360云盘转存百度云盘)(360云盘转存教程在哪)

  • 安卓手机如何镜像投屏(安卓手机如何镜像)

    安卓手机如何镜像投屏(安卓手机如何镜像)

  • ps返回上一步快捷键ctrl加什么(ps返回上一步快捷键mac)

    ps返回上一步快捷键ctrl加什么(ps返回上一步快捷键mac)

  • 魅族18是几k屏(魅族18s是什么屏幕)

    魅族18是几k屏(魅族18s是什么屏幕)

  • 苹果屏幕颜色如何设置(苹果屏幕颜色如何调)

    苹果屏幕颜色如何设置(苹果屏幕颜色如何调)

  • 微信文件过期了怎么恢复(微信文件过期了怎么办才能恢复)

    微信文件过期了怎么恢复(微信文件过期了怎么办才能恢复)

  • 如何设置双引擎快充(双引擎怎么切换)

    如何设置双引擎快充(双引擎怎么切换)

  • 微信号被别人投诉了怎么找到那个人(微信号被别人投诉了,一般多久会封号)

    微信号被别人投诉了怎么找到那个人(微信号被别人投诉了,一般多久会封号)

  • 京东阅读和京东读书的区别(京东阅读和京东的区别)

    京东阅读和京东读书的区别(京东阅读和京东的区别)

  • 苹果一般几月发布新品(苹果一般几月发布新品ipad)

    苹果一般几月发布新品(苹果一般几月发布新品ipad)

  • 通用对话框控件是什么(通用对话框有哪些常用方法)

    通用对话框控件是什么(通用对话框有哪些常用方法)

  • 小米10的特殊功能(小米10手机都有哪些特殊功能)

    小米10的特殊功能(小米10手机都有哪些特殊功能)

  • 淘宝上门取件和自己寄件有什么区别(淘宝上门取件和菜鸟裹裹上门取件一样吗)

    淘宝上门取件和自己寄件有什么区别(淘宝上门取件和菜鸟裹裹上门取件一样吗)

  • 为什么自拍很模糊(为什么自拍很模糊不清)

    为什么自拍很模糊(为什么自拍很模糊不清)

  • 主屏幕按钮123哪个灵敏(主屏幕按钮123哪个最轻)

    主屏幕按钮123哪个灵敏(主屏幕按钮123哪个最轻)

  • 华为nova7se怎么截屏(华为nova7se怎么看电池容量)

    华为nova7se怎么截屏(华为nova7se怎么看电池容量)

  • 删除的照片怎么找回(删除的照片怎么找回最近删除也删了)

    删除的照片怎么找回(删除的照片怎么找回最近删除也删了)

  • 淘宝垫付退款后卖家拒绝申请还能拿到款吗(淘宝垫付退款后卖家没处理)

    淘宝垫付退款后卖家拒绝申请还能拿到款吗(淘宝垫付退款后卖家没处理)

  • 为什么有的人朋友圈什么也没有(为什么有的人朋友很多,有的人没有朋友)

    为什么有的人朋友圈什么也没有(为什么有的人朋友很多,有的人没有朋友)

  • qq语音通话时怎么设置成静音

    qq语音通话时怎么设置成静音

  • qq群内如何打卡(qq群如何打卡不显示图片)

    qq群内如何打卡(qq群如何打卡不显示图片)

  • 1kb等于多少个字节(1kb多少字母)

    1kb等于多少个字节(1kb多少字母)

  • 淘宝上几个评价一个心(淘宝几个评价可以升2心)

    淘宝上几个评价一个心(淘宝几个评价可以升2心)

  • 手机没输入法怎么办(手机没输入法怎么输入)

    手机没输入法怎么办(手机没输入法怎么输入)

  • 微信缩略图可不可以删除(微信缩略图可不可以恢复)

    微信缩略图可不可以删除(微信缩略图可不可以恢复)

  • 集体房屋出租管理办法
  • 销售返利可以计入销售费用吗
  • 企业收到保险公司赔偿款是否要交税
  • 出售固定资产不开票可以吗
  • 小企业出租设备分录
  • 差旅费住宿专票能否抵扣
  • 施工排水费是否属于措施费
  • 职工工资保险费账务处理怎么做?
  • 资本公积转为实收资本会计等式
  • 现金抵用券购买怎么用
  • 合并重组案例
  • 产假期间工资如何发放
  • 没有认证方式
  • 增值税抵扣期限多少天
  • 冲红的电子发票要怎么处理
  • 企业所得税预缴政策
  • 所得税的计税依据
  • 运费发票没有开 怎么做到成本
  • 小规模劳务公司税率是多少
  • 个人股权转让个税计算
  • 无形资产摊销方法应当反映其经济利益
  • 工程项目预缴税金
  • 清算结业是什么意思
  • 支付知识产权服务费账务处理
  • 如何查看windows10
  • 折价购入对投资者而言,是为以后多得利息
  • 投资收益或亏损影响营业利润吗
  • 并购动因理论有什么
  • php如何实现字符串反转
  • 备用金借款有利息吗
  • php数组函数输出《咏雪》里有多少"片"字
  • php的运算符主要包括哪些?
  • 药品生产企业应建立
  • 坏账准备的会计科目
  • php闭包和回调函数
  • 补缴上年度未开票收入增值税,怎么做账
  • php实现数据库创建题库
  • php获取当前时间提交数据库
  • javascript编写程序
  • 建筑工程甲方公司
  • html 提交表单
  • Win11 Build 23430 预览版发布(附更新修复内容汇总)
  • 计算机网络拓扑结构有哪些
  • 长期股权投资初始投资成本的确定
  • 公司处置汽车
  • 国税实名认证手机号如何解绑
  • 已缴款未入库是缴费成功了吗
  • 租金收入如何确认收入
  • 低值易耗品的
  • 小微企业所得税税率
  • 免税申报表里的免税销售额是不含税
  • 公司代缴个税怎么做账
  • 应付账款会计分录怎么写
  • 日本发票国内能用吗
  • 上级补助收入科目
  • 不合格产品会计处理
  • 应纳税所得额计算公式excel
  • 印花税多久申报一次2023
  • 会计人员基本信息表去哪找
  • 新成立的公司需要年报吗
  • 用户登陆login什么意思
  • 修改mysql数据库字符集
  • mysql数据库用户名和密码怎么查看
  • centos7.6ssh
  • win7系统运行在哪里
  • winxp 证书错误
  • Win10 Mobile 10586.71截图曝光 修复已知问题
  • linux查看系统配置内存大小
  • opengl oes纹理
  • 遮罩层在上还是在下
  • 用javascript
  • jquery mobile实例
  • python自动生成
  • javascript教程完整版
  • 并行 python
  • bootstrap的表格
  • jquery.filedownload.js
  • 安卓开发 内存
  • 税务开通需要什么东西
  • 武汉税务地区编号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设