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

文章目录

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





一、开发要点



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

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


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>
		
		<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】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )_第2张图片

你可能感兴趣的:(CSS,css,html,前端,轮播图,子绝父相)