Web前端—CSS高级（定位、高级技巧、CSS修饰属性、综合案例：购物网站轮播图）

news2024/10/6 4:06:55

版本说明

当前版本号[20231108]。

版本修改说明
20231107初版
20231108对知识点（圆点）进行补充

目录

文章目录

  • 版本说明
  • 目录
  • day08-CSS高级
    • 01-定位
      • 相对定位
      • 绝对定位
      • 定位居中
      • 固定定位
      • 堆叠层级 z-index
      • 定位总结
    • 02-高级技巧
      • CSS精灵
      • 案例-京东服务
        • HTML结构
        • CSS样式
      • 字体图标
        • 下载字体
        • 使用字体
        • 上传矢量图
    • 03-CSS修饰属性
      • 垂直对齐方式
      • 过渡
      • 透明度opacity
      • 光标类型cursor
    • 04-综合案例-轮播图
      • 图片效果
        • HTML结构
        • CSS样式
      • 箭头
        • HTML结构
        • CSS样式
      • 圆点
        • HTML结构
        • CSS样式

day08-CSS高级

目标：掌握定位的作用及特点；掌握 CSS 高级技巧

01-定位

作用：灵活的改变盒子在网页中的位置

实现：

1.定位模式：position

2.边偏移：设置盒子的位置

  • left
  • right
  • top
  • bottom

相对定位

position: relative

特点：

  • 不脱标，占用自己原来位置
  • 标签显示模式特点保持不变。原来是什么模式，相对定位之后还是什么模式。
  • 设置边偏移则相对自己原来位置移动
div {
  position: relative;
  top: 100px;
  left: 200px;
}

示例：

1、原来的文字与图片的位置。

image-20231106202344267

2、加上相对定位，可看出图片相对于文字，是可以移动的。

.div{
	position: relative; /* 相对定位 */
	top: 100px;
}

image-20231106202533886

3、加上左边距，让图片往右边走。

.div{
	position: relative;
	top: 100px;
	left: 200px;
}

image-20231106202706589

绝对定位

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

  • 脱标，不占位
  • 显示模式具备行内块特点，宽高生效
  • 设置边偏移则相对最近的已经定位的祖先元素改变位置
  • 如果祖先元素都未定位，则相对浏览器可视区改变位置
.father {
  position: relative;
}

.father span {
  position: absolute;
  top: 0;
  right: 0;
}

举个例子：

写一份样式代码，初步把图片及文字大体输出出来：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 400px;
			}
			
			.news{
				margin: 100px auto;
				width: 400px;
				height: 350px;
				background-color: #f8f8f8;
			}
			
			.news span{
				display: block;
				width: 92px;
				height: 32px;
				background-color: rgba(0, 0, 0, 0.6);
				text-align: center;
				line-height: 32px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="news">
			<img src="./学成在线/uploads/ai03.png" alt="">
			<span>展会活动</span>
			<h4>2022世界移动大会</h4>
		</div>
	</body>
</html>

image-20231106204436171

第二步，子绝父相（子类为绝对定位，父类为相对定位）可看见“展会活动”定在了文字的上面。

.news{
				/* 如果其他元素在它上面或者左边，
				那么这个元素就会相对于那个元素进行定位。 */
				position: relative;
				margin: 100px auto;
				width: 400px;
				height: 350px;
				background-color: #f8f8f8;
			}
			
.news span{
				/* 元素的位置是相对于最近的已定位祖先元素进行定位。
				如果没有已定位的祖先元素，则相对于初始包含块进行定位。 */
				position: absolute;
				display: block;
				width: 92px;
				height: 32px;
				background-color: rgba(0, 0, 0, 0.6);
				text-align: center;
				line-height: 32px;
				color: #fff;
			}

image-20231106204635894

3、想让展会活动在最右上角，使用边偏移。

.news span{
				/* 元素的位置是相对于最近的已定位祖先元素进行定位。
				如果没有已定位的祖先元素，则相对于初始包含块进行定位。 */
				position: absolute;
				top: 0;
				right: 0;
				display: block;
				width: 92px;
				height: 32px;
				background-color: rgba(0, 0, 0, 0.6);
				text-align: center;
				line-height: 32px;
				color: #fff;
			}

image-20231106205019615

4、如果不遵守子绝父相的原则，则聚会活动可能会跑出去，到整个页面的最右上角。

.news{
				/* 如果其他元素在它上面或者左边，
				那么这个元素就会相对于那个元素进行定位。 */
				/* position: relative; */
				margin: 100px auto;
				width: 400px;
				height: 350px;
				background-color: #f8f8f8;
			}

image-20231106205242291

定位居中

1680340142857

实现步骤：

  1. 绝对定位
  2. 水平、垂直边偏移为 50%
  3. 子级向左、上移动自身尺寸的一半
  • 左、上的外边距为 –尺寸的一半
  • transform: translate(-50%, -50%)
img {
  position: absolute;
  left: 50%;
  top: 50%;

  /* margin-left: -265px;
  margin-top: -127px; */

  /* 方便： 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);
}

就比如将下图以绝对定位的形式来居中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
			<img src="../img/login.webp" alt="">
	</body>
</html>

image-20231106211512786

固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

  • 脱标，不占位
  • 显示模式具备行内块特点
  • 设置边偏移相对浏览器窗口改变位置
div {
  position: fixed;
  top: 0;
  right: 0;

  width: 500px;
}

可见，即使往下滚动，右边绿色的图片也不会动。

image-20231106212020555

堆叠层级 z-index

1680340281795

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：整数数字（默认值为0，取值越大，层级越高）

.box1 {
  background-color: pink;
  /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
  z-index: 1;
}

.box2 {
  background-color: skyblue;
  left: 100px;
  top: 100px;

  z-index: 2;
}

1、首先建立两个div模型。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
			.box1{
				background-color: pink;
			}
			.box2{
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</body>
</html>

2、两个模型的位置如下。

image-20231107141805324

3、设置div元素的定位方式为绝对定位。

position: absolute;

image-20231107141942103

4、当打开检查后就可以发现，其实是蓝色的box2盖住了粉红的box1，把蓝色底色去掉，粉红色就暴露出来了。

image-20231107142007687

5、那就改变box1定位元素的层级顺序和显示顺序。为了更好让粉红色box1显示在蓝色box2前面，可以给蓝色box2增加一些left和top的距离。

.box1{
				background-color: pink;
				/* 取值是整数，默认是0，
				取值越大，显示顺序越靠上 */
				z-index: 1;
			}

.box2{
				background-color: skyblue;
				left: 120px;
				top: 120px;
			}

6、看得出来，目前box1已经显示在了box2的前面了。

image-20231107142416230

定位总结

image-20231107142728597

02-高级技巧

CSS精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。

1680340401800

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

1680340411600

实现步骤：

  1. 创建盒子，盒子尺寸与小图尺寸相同
  2. 设置盒子背景图为精灵图
  3. 添加 background-position 属性，改变背景图位置

​ 3.1 使用 PxCook 测量小图片左上角坐标

​ 3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

如，想在以下大图中找到“N”：

image-20231107143917922

1、创建盒子，盒子尺寸与小图尺寸相同。

width: 112px;
height: 110px;
background-color: pink;

image-20231107144015087

2、设置盒子背景图为精灵图。

background-image: url(../img/abcd.jpg);

3、添加 background-position 属性，后面跟着 精灵图左上角坐标 ，从而改变背景图位置

（要记得取的是负数坐标!才能往左上角去移动) 。

image-20231107144333313

代码为：

div{
				width: 112px;
				height: 110px;
				background-color: pink;
				background-image: url(../img/abcd.jpg);
				background-position: -256px -276px;
			}

最后得到我们想要的：

image-20231107144411072

案例-京东服务

1680340481861

HTML结构
<div class="service">
  <ul>
    <li>
      <h5></h5>
      <p>品类齐全，轻松购物</p>
    </li>
    <li>
      <h5></h5>
      <p>多仓直发，极速配送</p>
    </li>
    <li>
      <h5></h5>
      <p>正品行货，精致服务</p>
    </li>
    <li>
      <h5></h5>
      <p>天天低价，畅选无忧</p>
    </li>
  </ul>
</div>
CSS样式
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  li {
    list-style: none;
  }

  .service {
    margin: 100px auto;
    width: 1190px;
    height: 42px;
    /* background-color: pink; */
  }

  .service ul {
    display: flex;
  }

  .service li {
    display: flex;
    padding-left: 40px;
    width: 297px;
    height: 42px;
    /* background-color: skyblue; */
  }

  .service li h5 {
    margin-right: 10px;
    width: 36px;
    height: 42px;
    /* background-color: pink; */
    background: url(./images/sprite.png) 0 -192px;
  }

  .service li:nth-child(2) h5 {
    background-position: -41px -192px;
  }

  .service li:nth-child(3) h5 {
    background-position: -82px -192px;
  }

  .service li:nth-child(4) h5 {
    background-position: -123px -192px;
  }

  .service li p {
    font-size: 18px;
    color: #444;
    font-weight: 700;
    line-height: 42px;
  }
</style>

1、首先写好版心：

  1. * 选择器表示匹配页面中的所有元素。通过将 margin、padding 和 box-sizing 属性设置为 0，可以消除所有元素的外边距和内边距，并使用 border-box 布局模型来包含元素的边框和内边距。
  2. li 选择器表示匹配所有的列表项元素（<li>）。通过将 list-style 属性设置为 none，可以移除列表项前的默认样式（通常是圆点或数字）。
  3. .service 选择器表示匹配具有类名 service 的元素。设置元素水平居中，固定好元素的宽度和高度。最后，将元素的背景颜色设置为粉红色。
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
.service{
    margin: 100px auto;
    width: 1190px;
    height: 42px;
    background-color: pink;
}

image-20231107145722810

2、将具有类名 service 的元素中的四个无序列表进行样式化，使其以弹性盒子的形式布局，并且每个列表项具有固定的宽度、高度和背景颜色。

.service ul{
    display: flex;
}

.service li{
    width: 297px;
    height: 42px;
    background-color: skyblue;
}

image-20231107150119243

3、设置元素的左内边距。调整指定元素内容与左侧边框之间的空间大小。通过设置 padding-left 为 40px，元素的内容将在其左侧留出40像素的空白区域。

padding-left: 40px;

image-20231107150459451

4、填写文字。

.service li{
				display: flex;
				padding-left: 40px;
				width: 297px;
				height: 42px;
				background-color: skyblue;
			}

<li>
					<h5>1</h5>
					<p>品类齐全，轻松购物</p>
				</li>

image-20231107150736300

5、插入图片并定好位。

.service li h5{
				width: 36px;
				height: 42px;
				background-image: url(../img/sprite.png);
				background-position: 0px -192px;
			}

image-20231107151103485

6、为具有类名 “service” 的元素中的列表项（<li>）内的标题（<h5>）和段落（<p>）元素设置样式。标题元素的背景图像和位置根据指定的路径和偏移量进行设置，而段落元素则设置了顶部外边距和字体大小。

.service li h5{
    width: 36px;
    height: 42px;
    margin-right: 15px;
    background-image: url(../img/sprite.png);
    background-position: 0px -192px;
}

.service li p{
    margin-top: 10px;
    font-size: 17px;
}

image-20231107151353710

7、然后把li标签全部复制好粘上去。

image-20231107151500679

8、通过css标签修改第二个精灵图。

.service li:nth-child(2) h5{
    background-position: -41px -192px;
}

image-20231107151850553

9、通过像素工厂对设计图进行测量，得出以下所需数据。

image-20231107152545562

image-20231107152827036

.service li:nth-child(3) h5{
    background-position: -82px -192px;
}
.service li:nth-child(4) h5{
    background-position: -123px -192px;
}

image-20231107152856265

10、改变字体大小。

.service li p{
				font-size: 18px;
				color: #444;
				font-weight: 700;
				line-height: 42px;
			}

image-20231107153043658

11、最后去除蓝色和粉红色的背景颜色。

image-20231107153154693

字体图标

1680340562425

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点

  • 灵活性：灵活地修改样式，例如：尺寸、颜色等
  • 轻量级：体积小、渲染快、降低服务器请求次数
  • 兼容性：几乎兼容所有主流浏览器
  • 使用方便：先下载再使用
下载字体

iconfont 图标库：https://www.iconfont.cn/

登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地

1680340665988

使用字体
  1. 引入字体样式表（iconfont.css）

1680340697011

也可以是：
<link rel="stylesheet" href="../../Iconfont/iconfont.css">
  1. 标签使用字体图标类名
    • iconfont：字体图标基本样式（字体名，字体大小等等）
    • icon-xxx：图标对应的类名

1680340718890

1、如果想使用的话，可以打开iconfont 的html页面 ，切换到 Font class。

image-20231107162802722

2、直接复制下面的类名即可【如果有 . 的话，要记得删除嗷！】。

image-20231107162904834

3、就可以得到了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图标使用</title>
		<link rel="stylesheet" href="../../Iconfont/iconfont.css">
	</head>
	<body>
		<span class="iconfont icon-baohuhaoma"></span>
	</body>
</html>

image-20231107163048544

4、如果需要修改字体图标的大小或颜色，可以使用类选择器 .iconfont 进行修改。

<style>
		.iconfont{
			font-size: 200px;
			color: aqua;
		}
	</style>

image-20231107163503950

5、如果你使用了span 标签选择器，由于类选择器权限比span大，因此会出现部分代码无法生效。

<style>
		.span{
			font-size: 200px;
			color: aqua;
		}
	</style>

image-20231107163711182

上传矢量图

作用：项目特有的图标上传到 iconfont 图标库，生成字体

1680340775611

上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核

03-CSS修饰属性

垂直对齐方式

1680340838945

属性名：vertical-align

1680340829633

1、首先设置一个框。

image-20231107165324485

2、接着在css代码中加入 vertical-align 去测试效果。

PS：vertical-align: middle; 使图像和文字的垂直对齐方式设置为居中

注：在这里，哪个占的空间大，就在哪个标签下加入这段代码

img{
   /* 将图像的垂直对齐方式设置为居中，使其在父容器中垂直方向上居中对齐。 */			
    vertical-align: middle;
}

3、居中对齐效果如下。

image-20231107165601698

img{
				height: 200px;
				/* vertical-align: middle; */
				/* 顶对齐：最高内容的顶部 */
				vertical-align: top;
			}

4、顶部对齐效果如下。

image-20231107165907172

img{
				height: 200px;
				/* vertical-align: middle; */
				/* 顶对齐：最高内容的顶部 */
				/* vertical-align: top; */
				/* 底对齐：最高内容的底部 */
				vertical-align: bottom;
			}

5、底部对齐效果如下。

image-20231107170044913

6、如果只是想让图片下面与边框没有空格的话：

image-20231107170641456

7、可以使用display: block;。

​ 因为他可以将元素显示为块级元素。块级元素会独占一行，其宽度默认为100%，并且可以设置高度、内外边距和边框等属性。

image-20231107170704944

过渡

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性 花费时间 (s)

提示：

  • 过渡的属性可以是具体的 CSS 属性
  • 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
  • transition 设置给元素本身
img {
  width: 200px;
  height: 200px;
  transition: all 1s;
}

img:hover {
  width: 500px;
  height: 500px;
}

1、先插入一张照片。

image-20231107171420502

2、实现图片的缩放（可变大可变小）效果。

<style>
			img{
				width: 200px;
				height: 150px;
				transition: all 0.5s;
			}
			img:hover{
				width: 500px;
				height: 400px;
			}
		</style>

image-20231107171431136

透明度opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0 – 1

  • 0：完全透明（元素不可见）
  • 1：不透明
  • 0-1之间小数：半透明

1、首先先插入一张图片。

<style>
			div{
				width: 500px;
				height: 500px;
				background-color: orange;
			}
		</style>

image-20231107172021859

2、加上透明效果：

opacity: 0.6;

image-20231107172057790

光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

1680342344485

<style>
			div{
				width: 200px;
				height: 200px;
				cursor: pointer;
			}
		</style>

04-综合案例-轮播图

1680342362855

图片效果

HTML结构
<div class="banner">
    <!-- 图: ul > li -->
    <ul>
      <li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
    </ul>
</div>
CSS样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.banner {
  position: relative;
  margin: 100px auto;
  width: 564px;
  height: 315px;
  /* background-color: pink; */
  overflow: hidden;
}

/* 图片 */
.banner img {
  width: 564px;
  border-radius: 12px;
  vertical-align: middle;
}

.banner ul {
  display: flex;
}

1、初步建立框架。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li{
				list-style: none;
			}
			.banner{
				margin: 100px auto;
				width: 564px;
				height: 315px;
				background-color: pink;
			}
			.banner img{
				width: 564px;
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<ul>
				<li><a href="#"><img src="../img/banner1.jpg" alt=""></a></li>
			</ul>
		</div>
	</body>
</html>

image-20231107204515645

2、列出三个li标签，并让他们不留空隙的对齐。

​ vertical-align:用于设置元素的垂直对齐方式。当设置为 middle 时，元素会相对于它的父容器的基线进行垂直居中对齐。

vertical-align: middle;

image-20231107205044126

3、把剩下三个隐藏。

.banner{
				margin: 100px auto;
				width: 564px;
				height: 315px;
				/* background-color: pink; */
				/* 用于设置元素的溢出内容是否显示。
				当设置为 hidden 时，
				元素的内容超出其容器范围时会被隐藏，
				不会显示在页面上。 */
				overflow: hidden;
			}

箭头

HTML结构
<!-- 箭头 -->
<!-- 上一张 prev -->
<a href="#" class="prev">
  <i class="iconfont icon-zuoce"></i>
</a>
<!-- 下一张 next -->
<a href="#" class="next">
  <i class="iconfont icon-youce"></i>
</a>
CSS样式
/* 箭头 */
.banner .prev,
.banner .next {
  /* 隐藏 */
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 20px;
  height: 30px;
  background-color: rgba(0,0,0, 0.3);

  text-decoration: none;
  color: #fff;
  line-height: 30px;
}

/* 鼠标滑到banner区域，箭头要显示 display:block */
.banner:hover .prev,
.banner:hover .next {
  display: block;
}

.banner .prev {
  left: 0;
  border-radius: 0 15px 15px 0;
}

.banner .next {
  right: 0;
  border-radius: 15px 0 0 15px;
  text-align: center;
}

1、先把一边弄出来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li{
				list-style: none;
			}
			.banner{
				position: relative;
				margin: 100px auto;
				width: 564px;
				height: 315px;
				/* background-color: pink; */
				overflow: hidden;
			}
			.banner img{
				width: 564px;
				border-radius: 12px;
				vertical-align: middle;
			}
			.banner ul{
				display: flex;
			}
			/* 对于两个有相同的内容放这里 */
			.banner .prev,
			.banner .next{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 28px;
				height: 30px;
				background-color: rgba(0, 0, 0, 0.3);
			}
			.banner .prev{
				
			}
			.banner .next{
				
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<ul>
				<li><a href="#"><img src="../img/banner1.jpg" alt=""></a></li>
				<li><a href="#"><img src="../img/banner2.jpg" alt=""></a></li>
				<li><a href="#"><img src="../img/banner3.jpg" alt=""></a></li>
			</ul>
			<!-- 箭头 -->
			<!-- 上一张 prev -->
			<a href="#" class="prev">左</a>
			<!-- 下一张 next -->
			<a href="#" class="next">右</a>
		</div>
	</body>
</html>

image-20231107210639726

2、然后把左、右的定位都弄出来。

.banner .prev{
				left: 0;
			}
			.banner .next{
				right: 0;
			}

image-20231107210739316

3、然后把两边边框弄圆，每一个都只需要弄一边即可。

.banner .prev{
				left: 0;
				border-radius: 0 15px 15px 0;
			}
			.banner .next{
				right: 0;
				border-radius: 15px 0 0 15px;
			}

image-20231107211038146

4、引入字体图标，让两个箭头显现。

<!-- 上一张 prev -->
			<a href="#" class="prev">
				<i class="iconfont icon-jinru"></i>
			</a>
			<!-- 下一张 next -->
			<a href="#" class="next">
				<i class="iconfont icon-jinru"></i>
			</a>

image-20231107211549682

5、改好样式。

/* 对于两个有相同的内容放这里 */
			.banner .prev,
			.banner .next{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 28px;
				height: 30px;
				background-color: rgba(0, 0, 0, 0.3);
				text-decoration: none;
				color: #fff;
				line-height: 30px;
			}
			.banner .prev{
				left: 0;
				border-radius: 0 15px 15px 0;
			}
			.banner .next{
				right: 0;
				border-radius: 15px 0 0 15px;
				text-align: center;
			}

image-20231107211847388

6、将这两个箭头先隐藏。

.banner .prev,
.banner .next{
	display: none;
}

7、再显现，实现只有鼠标移动到该区域，箭头才会显现。

			/* 当鼠标移动banner区域，prev和next箭头就显现 */
			.banner:hover .prev,
			.banner:hover .next{
				display: block;
			}

image-20231107212319926

圆点

HTML结构
<!-- 圆点 -->
<ol>
  <li></li>
  <li class="active"></li>
  <li></li>
</ol>
CSS样式
/* 圆点 */
.banner ol {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  height: 13px;
  background-color: rgba(255,255,255,0.3);

  display: flex;

  border-radius: 10px;
}

.banner ol li {
  margin: 3px;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

/* 橙色的li */
.banner ol .active {
  background-color: #ff5000;
}

1、给圆点建ol标签。

.banner ol{
				position: absolute;
				height: 13px;
				background-color: rgba(255,255,255,0.3);
				bottom: 20px;
				left: 50%;
				transform: translatex(-50%);
			}

image-20231107235843604

2、使其并排。

display: flex;

image-20231108000029489

3、改变成圆角的形式。

border-radius: 10px;

image-20231108000144108

4、形成圆点。

.banner ol li{
				margin: 3px;
				width: 8px;
				height: 8px;
				background-color: #fff;
				background-repeat: 50%;
			}

image-20231108000511845

5、将关键的圆点变为橙色。

.banner ol .active{
				background-color: #ff500f;
			}

<ol>
				<li></li>
				<li class="active"></li>
				<li></li>
			</ol>

image-20231108000736795

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

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

相关文章

Helix Toolkit：为.NET开发者带来的3D视觉盛宴

Helix Toolkit：为.NET开发者带来的3D视觉盛宴

推荐一个基于.Net开源的3、功能强大的3D图形库和工具包&#xff0c;适用于WPF应用程序的3D渲染和开发。 01 项目简介 Helix Toolkit是一个开源的3D库&#xff0c;主要用于WPF应用程序。它有许多优点&#xff0c;例如提供各种各样的功能&#xff0c;包括基于MVVM的3D模型编辑器…
阅读更多...
Python---ljust()--左对齐、rjust()--右对齐、center()--居中对齐

Python---ljust()--左对齐、rjust()--右对齐、center()--居中对齐

作用&#xff1a;返回原字符串左对齐、右对齐以及居中对齐&#xff0c;不足的使用 指定字符 进行填充。 ljust 左对齐 rjust 右对齐 center 居中对齐 类似于Excel、Word文档中的对齐。 基本语法&#xff1a; 字符串序列.ljust(长度, 填充字符) 案例&#xff1a; …
阅读更多...
[100天算法】-搜索旋转排序数组（day 64）

[100天算法】-搜索旋转排序数组（day 64）

题目描述 升序排列的整数数组 nums 在预先未知的某个点上进行了旋转&#xff08;例如&#xff0c; [0,1,2,4,5,6,7] 经旋转后可能变为 [4,5,6,7,0,1,2] &#xff09;。请你在数组中搜索 target &#xff0c;如果数组中存在这个目标值&#xff0c;则返回它的索引&#xff0c;否…
阅读更多...
【黑马程序员】SpringCloud——Eureka

【黑马程序员】SpringCloud——Eureka

文章目录 前言一、提供者与消费者1. 服务调用关系 二、远程调用的问题三、eureka 原理分析1. eureka 的作用 四、Eureka 案例1. 搭建 eureka 服务1. 服务注册1.1 注册 user-service1.2 启动 user-service3. order-service 完成服务注册 3. 服务发现1. 在 order-service 完成服务…
阅读更多...
数据库约束及增删改查（CRUD）进阶-MySQL

数据库约束及增删改查（CRUD）进阶-MySQL

文章目录 一、数据库约束1.1 约束类型1.2 NULL约束1.3 UNIQUE&#xff1a;唯一约束1.4 DEFAULT&#xff1a;默认值约束1.5 PRIMARY KEY&#xff1a;主键约束1.6 FOREIGN KEY&#xff1a;外键约束1.7 CHECK 约束&#xff08;了解&#xff09; 二、表的设计2.1 一对一2.2 一对多2…
阅读更多...
极智AI | Whole-Body Multi-Person人体姿态估计之AlphaPose

极智AI | Whole-Body Multi-Person人体姿态估计之AlphaPose

欢迎关注我的公众号 [极智视界]，获取我的更多经验分享 大家好，我是极智视界，本文来介绍一下 Whole-Body Multi-Person人体姿态估计之AlphaPose。 邀您加入我的知识星球「极智视界」，星球内有超多好玩的项目实战源码下载，链接：https://t.zsxq.com/0aiNxERDq Whole-Body、…
阅读更多...
制造业供应链管理详解

制造业供应链管理详解

一、什么是制造业供应链管理&#xff1f; 供应链管理是一种对供应链进行战略性管理和协调的方法&#xff0c;它旨在优化供应链的运作&#xff0c;以提高效率和竞争力。在制造业中&#xff0c;供应链管理主要涉及从原材料采购到最终产品交付的整个过程&#xff0c;包括生产、物…
阅读更多...
小甲鱼python零基础入门学习（一）

小甲鱼python零基础入门学习（一）

目录 一、环境搭建和课程介绍 &#xff08;1&#xff09;安装最新版本的python3.x &#xff08;2&#xff09;安装编辑器&#xff08;找合适自己的&#xff09; 二、用python设计第一个游戏 三、变量和字符串 &#xff08;1&#xff09;变量 &#xff08;2&#xff09;字…
阅读更多...
【Redis】Redis整合SSMRedis注解式缓存Redis中的缓存穿透、雪崩、击穿的原因以及解决方案（详解）

【Redis】Redis整合SSMRedis注解式缓存Redis中的缓存穿透、雪崩、击穿的原因以及解决方案（详解）

目录&#xff1a; 目录 一&#xff0c;SSM整合redis 二&#xff0c;redis注解式缓存 三&#xff0c;Redis中的缓存穿透、雪崩、击穿的原因以及解决方案&#xff08;附图&#xff09; 一&#xff0c;SSM整合redis 1.原因&#xff1a; 整合SSM和Redis可以提升系统的性能、可…
阅读更多...
力扣每日一题 ---- 2918. 数组的最小相等和

力扣每日一题 ---- 2918. 数组的最小相等和

贪心题(吐槽一下&#xff0c;最烦贪心题了&#xff0c;每次遇到没见过的就只能连蒙带骗) 好在本题比较容易发现 数组1 &#xff1a;3 2 0 1 0 数组2 &#xff1a;6 5 0 我们遇到这种题&#xff0c;先将小的凑成相同的&#xff0c;(我们预处理出来两个数组的分别的元素和和0的个…
阅读更多...
【单链表】无头单项不循环（1）

【单链表】无头单项不循环（1）

目录 单链表 主函数test.c test1 test2 test3 test4 头文件&函数声明SList.h 函数实现SList.c 打印SLPrint 创建节点CreateNode 尾插SLPushBack 头插SLPushFront 头删SLPopBck 尾删SLPopFront 易错点 本篇开始链表学习。今天主要是单链表&OJ题目。 单链…
阅读更多...
c++对接CAT1400

c++对接CAT1400

最近工作中遇到需要对接1400协议，网上搜索不到c/c++的实现，所以记录一下自己的实现。 第一步注册： 1400是在http摘要认证的基础上做的，所以要去了解http摘要认证的流程 说明： 1.视图库通过用户分配，手动分配username，password给三方对接程序 2.三方对接程序第一次请求由…
阅读更多...
技术硬实力：成为项目经理的必备要素

技术硬实力：成为项目经理的必备要素

要成为一位合格的项目经理&#xff0c;仅仅通过学习是不够的&#xff0c;还需要通过实践来积累经验。时间永远是增长经验最好的方法。 对于项目经理的角色&#xff0c;普遍有两种看法&#xff1a; 一种是技术型&#xff1a; 这种观点强调项目经理必须具备过硬的技术能力&am…
阅读更多...
Leetcode—2609.最长平衡子字符串【简单】

Leetcode—2609.最长平衡子字符串【简单】

2023每日刷题&#xff08;二十三&#xff09; Leetcode—2609.最长平衡子字符串 实现代码 class Solution { public:int findTheLongestBalancedSubstring(string s) {int zeros 0;int ones 0;int ans 0;int n s.size();for(int i 0; i < n; i) {int t s[i] - 0;if(…
阅读更多...
Python - 面向现实世界的人脸复原 GFP-GAN 简介与使用

Python - 面向现实世界的人脸复原 GFP-GAN 简介与使用

目录 一.引言 二.GFP-GAN 简介 1.GFP-GAN 数据 2.GFP-GAN 架构 3.GFP-GAN In Wave2Lip 三.GFPGAN 实践 1.环境搭建 2.模型下载 3.代码测试 4.测试效果 四.总结 一.引言 近期 wav2lip 大火&#xff0c;其通过语音驱动唇部动作并对视频质量进行修复&#xff0c;其中…
阅读更多...
dd爱科学1.0（最长不下降子序列）

dd爱科学1.0（最长不下降子序列）

解析&#xff1a; 要求序列非递减&#xff0c;只需求出最长不上升子序列即可&#xff0c;其余位置则需要修改。 #include<bits/stdc.h> using namespace std; #define int long long const int N1e65; int n,dp[N]; void solve(){string s;cin>>n>>s;int cn…
阅读更多...
Kubernetes 亲和性 反亲和性 污点 容忍及维护驱逐

Kubernetes 亲和性 反亲和性 污点 容忍及维护驱逐

亲和性 官方网站&#xff1a; https://kubernetes.io/zh/docs/concepts/scheduling-eviction/assign-pod-node/&#xff08;1&#xff09;节点亲和性 pod.spec.nodeAffinity ●preferredDuringSchedulingIgnoredDuringExecution&#xff1a;软策略 ●requiredDuringSchedulin…
阅读更多...
如何在后台执行 SwiftData 操作

如何在后台执行 SwiftData 操作

文章目录 前言Core Data 私有队列上下文SwiftData 并发支持使用 ModelActor合并上下文更改的问题通过标识符访问模型总结 前言 SwiftData 是一个用于处理数据操作的框架&#xff0c;特别是在 Swift 语言中进行并发操作。本文介绍了如何在后台执行 SwiftData 操作以及与 Core D…
阅读更多...
九州未来入选2023边缘计算TOP100，边缘计算能力再获认可

九州未来入选2023边缘计算TOP100，边缘计算能力再获认可

近日&#xff0c;德本咨询、互联网周刊、中国社会科学院信息化研究中心联合发布 “2023边缘计算TOP100”榜单&#xff0c;九州未来凭借领先的技术优势、产品服务能力、落地实践经验等综合实力入选。 数字时代&#xff0c;算力成为第一生产力。边缘计算凭借其低时延、节省带宽、…
阅读更多...
FL Studio2024破解版激活码序列号

FL Studio2024破解版激活码序列号

对于唱作人来说&#xff0c;一款优秀、全能的音乐制作软件&#xff0c;能帮助他们在创作上获得更多的灵感、以及为歌曲带来更多的变化。 FL Cloud 音效库包含开放版权的Loop和采样&#xff0c;以及来自 FL Studio 著名用户的艺术家独家内容。更新后&#xff0c;现在还可以使用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023