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

版本说明

当前版本号[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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

API是什么？解密API背后的奥秘

API是什么？解密API背后的奥秘

API&#xff0c;全称Application Programming Interface&#xff0c;是一种用于不同应用程序间通信的接口&#xff0c;它允许不同的应用程序之间交换数据和功能。API可以理解为应用程序提供给其他应用程序或开发者的接口&#xff0c;通过这个接口&#xff0c;其他应用程序或开发…
阅读更多...
将 Ordinals 与比特币智能合约集成：第 4 部分

将 Ordinals 与比特币智能合约集成：第 4 部分

控制 BSV-20 代币的分配 在上一篇文章中&#xff0c;我们展示了智能合约可以在铸造后控制 BSV-20 代币的转移。 今天&#xff0c;我们演示如何控制此类代币的分发/发行。 无Tick模式 BSV-20 在 V2 中引入了无Tick模式&#xff0c;并采用了与 V1 不同的方法。 部署 (Deploy) …
阅读更多...
openinstall携手途虎养车，赋能汽车服务数字化

openinstall携手途虎养车，赋能汽车服务数字化

近日&#xff0c;openinstall与中国领先的一站式汽车服务平台途虎养车再次续约&#xff0c;双方将开启第三年合作。过去两年&#xff0c;途虎在建设线上线下一体化数字平台的过程中&#xff0c;深度结合openinstall传参归因与渠道统计技术&#xff0c;打造出了一套高效的渠道来…
阅读更多...
聚焦千兆光模块和万兆光模块的测试技术及设备

聚焦千兆光模块和万兆光模块的测试技术及设备

千兆光模块和万兆光模块的测试技术涉及多个方面&#xff0c;如光学性能测试、电气性能测试、动态性能测试、温度测试、环境和耐久性测试等。不同的测试技术可以验证不同的光模块的性能和稳定性&#xff0c;从而确保光模块在各种应用场景下的可靠性&#xff0c;下面将介绍一些常…
阅读更多...
PSP - 蛋白质复合物结构预测 模版配对(Template Pair) 逻辑的特征分析

PSP - 蛋白质复合物结构预测 模版配对(Template Pair) 逻辑的特征分析

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/134328447 在 蛋白质复合物结构预测 的过程中&#xff0c;模版 (Template) 起到重要作用&#xff0c;提供预测结果的关于三维结构的先验信息&…
阅读更多...
Ubuntu2004字体不清晰，排查流程

Ubuntu2004字体不清晰，排查流程

昨天一早来发现平时用的Ubuntu2004物理机的字体变得很模糊&#xff0c;之前还是好好的&#xff0c;这里记录一下解决方案。 解决方案 通过显示器物理按键设置“自适应”解决&#xff0c;我的显示器是长城的&#xff0c;“自适应”按钮是右边从下往上数第二个。 排查流程 我先…
阅读更多...
WordPress Modown 6.2付费下载资源/付费查看内容 wp主题模板+erphpdown11.7

WordPress Modown 6.2付费下载资源/付费查看内容 wp主题模板+erphpdown11.7

模板简介&#xff1a; 自适应响应式设计&#xff0c;兼容主流浏览器 网格样式与瀑布流样式任意切换 内置SEO优化 自带与主题UI完美兼容搭配的erphpdown前端用户中心页面&#xff08;此功能若单独找我们定制也需要几百&#xff09; 收费付费下载资源、付费查看内容、付费观看…
阅读更多...
GoLong的学习之路（二十一）进阶，语法之并发（go最重要的特点）（协程的主要用法）

GoLong的学习之路（二十一）进阶，语法之并发（go最重要的特点）（协程的主要用法）

并发编程在当前软件领域是一个非常重要的概念&#xff0c;随着CPU等硬件的发展&#xff0c;我们无一例外的想让我们的程序运行的快一点、再快一点。Go语言在语言层面天生支持并发&#xff0c;充分利用现代CPU的多核优势&#xff0c;这也是Go语言能够大范围流行的一个很重要的原…
阅读更多...
【Delphi】Android 开发HTTP请求出错解决方案

【Delphi】Android 开发HTTP请求出错解决方案

目录 一、故障现象 二、原因及解决方案 一、故障现象 在android内建的WebBrowser浏览器中通过http访问一个网站&#xff08;注意不是https&#xff09;&#xff0c;出现如下错误提示&#xff1a; 在使用ntfy的时候&#xff0c;访问http定义的服务器地址&#xff08;注意不是…
阅读更多...
MySQL模糊查询/模式匹配（Pattern Match）

MySQL模糊查询/模式匹配（Pattern Match）

使用SQL查询数据时&#xff0c;时常会遇到这种情况&#xff0c;我们并不需要精确的匹配&#xff0c;而是要查找具有某类特点的数据。这种场景我们就要用到模糊查询。MySQL中常用的模糊查询方法有2种&#xff1a; like语句模糊查询regexp正则表达式模式匹配 目录 一、使用like模…
阅读更多...
大厂面试题-为什么索引要用B+树来实现呢，而不是B树？

大厂面试题-为什么索引要用B+树来实现呢，而不是B树？

首先&#xff0c;常规的数据库存储引擎&#xff0c;一般都是采用B树或者B树来实现索引的存储。 (如图)因为B树是一种多路平衡树&#xff0c;用这种存储结构来存储大量数据&#xff0c;它的整个高度会相比二叉树来说&#xff0c;会矮很多。 而对于数据库来说&#xff0c;所有的…
阅读更多...
【191】Java8在大比例尺小范围地图上，根据wgs84坐标系的经纬度计算两个点之间的方向和距离

【191】Java8在大比例尺小范围地图上，根据wgs84坐标系的经纬度计算两个点之间的方向和距离

场景 本文代码在大比例迟、小范围的地图上测试过。这些地图一般是县、区、镇、街道等范围的&#xff0c;其测试效果较好。由于地图范围较小&#xff0c;可以把经纬度近似看作直线。 问题分析 方向一共分东、南、西、北、东北、西北、西南、东南共八个方向。一周是 360 度&am…
阅读更多...
最新GitHub学生认证，可以愉快的使用Copilot了(保姆级教程)

最新GitHub学生认证，可以愉快的使用Copilot了(保姆级教程)

&#x1f388;博客主页&#xff1a;&#x1f308;我的主页&#x1f308; &#x1f388;欢迎点赞 &#x1f44d; 收藏 &#x1f31f;留言 &#x1f4dd; 欢迎讨论&#xff01;&#x1f44f; &#x1f388;本文由 【泠青沼~】 原创&#xff0c;首发于 CSDN&#x1f6a9;&#x1f…
阅读更多...
“深入理解机器学习性能评估指标：TP、TN、FP、FN、精确率、召回率、准确率、F1-score和mAP”

“深入理解机器学习性能评估指标：TP、TN、FP、FN、精确率、召回率、准确率、F1-score和mAP”

目录 引言 分类标准 示例&#xff1a;癌症检测 1. 精确率&#xff08;Precision&#xff09; 2. 召回率&#xff08;Recall&#xff09; 3. 准确率&#xff08;Accuracy&#xff09; 4. F1-score 5. mAP&#xff08;均值平均精度&#xff09; 总结与通俗解释 引言 机器…
阅读更多...
电销行业获客的精准客源从哪里来的？

电销行业获客的精准客源从哪里来的？

在电话营销行业中找到精确的客户资源对电话营销的成功至关重要。 这里有几种方法可以找到准确的客户资源&#xff1a; 1、自身数据库&#xff1a;首先&#xff0c;使用现有的客户信息数据库&#xff0c;如客户电话号码、电子邮件和地址&#xff0c;来推广和营销现有客户。 2…
阅读更多...
django 批量 serializers listserializers

django 批量 serializers listserializers

Django drf 序列化器 序列化器 扩展serializers的有用性是我们想要解决的问题。但是&#xff0c;这不是一个微不足道的问题&#xff0c;而是需要一些严肃的设计工作。— Russell Keith-Magee, Django用户组 序列化器允许把像查询集和模型实例这样的复杂数据转换为可以轻松渲染…
阅读更多...
基于element-plus定义表单配置化

基于element-plus定义表单配置化

文章目录 前言一、配置化的前提二、配置的相关组件1、新建form.vue组件2、新建input.vue组件3、新建select.vue组件4、新建v-html.vue组件5、新建upload.vue组件6、新建switch.vue组件7、新建radio.vue组件8、新建checkbox.vue组件9、新建date.vue组件10、新建time-picker.vue组…
阅读更多...
泄露35TB数据，医疗巨头Henry Schein遭受黑猫勒索组织攻击

泄露35TB数据，医疗巨头Henry Schein遭受黑猫勒索组织攻击

近日&#xff0c;据Bleeping Computer 网站消息&#xff0c;BlackCat&#xff08;黑猫&#xff09;勒索软件团伙将医疗保健巨头Henry Schein 添加到了其暗网泄露网站&#xff0c;并声称其破坏了该公司的网络&#xff0c;窃取了35 TB的敏感文件&#xff0c;这些文件包括了Henry …
阅读更多...
【算法】道路与航线（保姆级题解）

【算法】道路与航线（保姆级题解）

题目 农夫约翰正在一个新的销售区域对他的牛奶销售方案进行调查。 他想把牛奶送到 T 个城镇&#xff0c;编号为 1∼T。 &#xff08;存在T个点&#xff09; 这些城镇之间通过 R 条道路 (编号为 1 到 R) 和 P 条航线 (编号为 1 到 P) 连接。 &#xff08;存在R条道路&#…
阅读更多...
Bytebase 2.11.0 - 支持 OceanBase Oracle 模式

Bytebase 2.11.0 - 支持 OceanBase Oracle 模式

&#x1f680; 新功能 支持 OceanBase Oracle 模式。支持设置 MySQL 在线变更参数。新增项目数据库查看者的角色。 &#x1f384; 改进 支持在项目中直接选择所有用户并为之添加角色。 调整了项目页面的布局。在 SQL 编辑器中通过悬浮面板展示表和列的详情。 &#x1faa6; …
阅读更多...
最新文章

Copyright @ 2022~2023