前端之CSS篇(五)——CSS定位详解

最新推荐文章于 2023-02-10 11:03:55 发布

今晚务必早点睡

最新推荐文章于 2023-02-10 11:03:55 发布

阅读量924

点赞数

分类专栏：前端文章标签： css 前端 vscode

本文链接：https://blog.csdn.net/m0_57021623/article/details/127149041

版权

前端专栏收录该内容

34 篇文章 10 订阅

订阅专栏

前言: 页面布局要学习三大核心，盒子模型，浮动和定位

1.CSS定位

需要解决一下问题：

能够说出为什么要用定位
能够说出定位的4种分类
能够说出4种定位各自的特点
能够说出为什么常用子绝父相布局
能够写出淘宝轮播图布局
能够说出显示隐藏的2种方式以及区别

1.1为什么需要定位

提问：以下情况使用标准流或者浮动能实现吗？

1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。

比如：电商网站下滑的时候，某些盒子会固定在某个位置不会移动

此时，标准流或浮动都无法快速实现，此时需要定位来实现

所以：

1.浮动可以让多个块级盒子一行都没有缝隙排列显示，经常用于横向排列盒子。

2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕某个位置，并且可以压住其他盒子。

1.2定位的组成

定位：将盒子定在某一个位置，所以定位也是在摆盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

6.2.1定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

6.2.2 边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

1.2.1静态定位(了解)

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器 { position: static; }

特性：

1.静态定位按照标准流特性摆放位置，它没有边偏移

2.静态定位在布局时很少用到

1.2.2相对定位relative(重要)

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)。

语法：

选择器 { position: relative; }

相对定位的特点：

1.它是相对于自己原来的位置来移动的 (移动位置的时候参照点是自己原来的位置)

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来的位置)

(脱标——指的是脱离标准流)

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        .box1 {
            /* 给第一个盒子相对定位 第一步代码 */
            position: relative;
            /* 第二步代码 给盒子添加边偏移 */
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: rgb(56, 207, 218);
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: rgb(233, 61, 190);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WwuGm4GB-1664758117352)(Typora_image/163.png)]

因此，相对定位并没有脱标，最典型的应用是给绝对定位当爹的。。。

1.2.3绝对定位absolute(重要)

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)

语法：

选择器 { position:absolute;

绝对定位的特点：

1.2.3.1特点一

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准(Document文档)。

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        .father {
            width: 500px;
            height: 400px;
            background-color: rgb(187, 173, 173);
        }

        .son {
            position: absolute;
            top: 300px;
            left: 100px;
            /* bottom: 10px; */
            /* right: 50px; */
            width: 200px;
            height: 200px;
            background-color: rgb(79, 200, 209);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wuSXHwZ3-1664758117354)(Typora_image/164.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXR6mXaF-1664758117355)(Typora_image/165.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCZn6h44-1664758117356)(Typora_image/166.png)]

1.2.3.2 特点二

如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置

(孩子，爸爸，爷爷——爸爸没定位，爷爷有，这个盒子就以爷爷为主了)

(孩子，爸爸，爷爷——爸爸有定位，爷爷也有，这个盒子就以爸爸为主了)

执行代码1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        .father {
            /* 此时给父级加定位，可以约束孩子的定位 第一步*/
            position: relative;
            width: 500px;
            height: 400px;
            background-color: rgb(187, 173, 173);
        }

        .son {
            position: absolute;
            /* top: 50px;
            left: 100px; */
            /* 在祖先元素定位后，更改孩子的位置  第二步 */
            left: 200px;
            top: 100px;
            width: 200px;
            height: 200px;
            background-color: rgb(79, 200, 209);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BI5fSbFf-1664758117358)(Typora_image/167.png)]

执行代码2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .greatfather {
            /* 添加相对定位  用于对son的约束*/
            position: relative;
            width: 400px;
            height: 400px;
            background-color: rgb(20, 236, 208);
            /* margin-top: 100px; */
        }

        /* 外边距合并的问题的检验：小盒子外边距向下移动50px,大盒子向下移动100px,最后大小盒子都是向下移动100px */
        /* 大小盒子嵌套，大盒子向下移动100px，大小盒子整体都是向下移动100px  */
        /* 大小盒子嵌套，小盒子向下移动50px，大小盒子整体都是向下移动50px */
        .father {
            width: 200px;
            height: 200px;
            background-color: rgb(233, 236, 33);
            margin-top: 100px;
        }

        .son {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 50px;
            height: 50px;
            background-color: rgb(219, 81, 27);


        }
    </style>
</head>

<body>
    <!-- .greatfather>.father>.son -->
    <div class="greatfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-anlmxzkK-1664758117360)(Typora_image/168.png)]

1.2.3.3 特点三

绝对定位不再占用原先的位置。(脱标)

1.3子绝父相

问题：

1.绝对定位和相对定位到底有什么使用场景呢？

2.为什么说相对定位给绝对定位当爹呢？
子绝父相的意思是：如果子级使用绝对定位，父级则需要相对定位

浮动的特点：只会影响插入浮动元素之后的元素

绝对定位不保留位置，相对定位才保留位置

(1) 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

(2) 父盒子需要加定位限制子盒子在父盒子内显示

(3) 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

1.4固定定位fixed(重要)

固定定位是元素固定于浏览器可视区的位置。主要场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器 { position: fixed; }

固定定位的特点：

1.以浏览器的可视窗口为参照点移动元素。

(1) 跟父元素没有任何关系

(2) 不随滚动条滚动

2.固定定位不再占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

(把绝对定位看作是一个矩形，把固定定位看作是一个正方形，正方形也是一个特殊的矩形)

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        .dj {
            position: fixed;
            top: 100px;
            right: 40px;
            /* left: 0; */
        }
    </style>
</head>

<body>
    <div class="dj">
        <img src="../access/pvp.png" alt="固定定位所用的图片">
    </div>
    <p>在春天里，发现你最美!</p>
    <p>在春天里，发现你最美!</p>
</body>

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AB7HsssU-1664758117361)(Typora_image/169.png)]

1.4.1 固定定位小技巧

——固定在版心右侧位置。

小算法：

1.让固定定位的盒子left:50%.走到浏览器可视区(也可以看做版心)的一半位置。

2.让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位小技巧</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: rgb(102, 218, 212);
            margin: 0 auto;
        }

        .fixed {
            /* 固定定位 */
            position: fixed;
            /* 1.走浏览器宽度的一半 */
            left: 50%;
            /* 走版心的一半 */
            /* margin-left: 400px; */
            margin-left: 405px;
            /* 向下移动点 */
            top: 100px;
            width: 50px;
            height: 150px;
            background-color: rgb(128, 224, 84);
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QGh86sCw-1664758117362)(Typora_image/170.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AX3INyfS-1664758117363)(Typora_image/171.png)]

1.5 粘性定位 sticky (了解)

粘性定位可以被认为是相对定位和固定定位的混合。

单词	英标	词意
relative	[ˈrelətɪv]	相对的; 相比较而言的; 比较的; 相关联的;
absolute	['æbsəlu:t]	完全的; 全部的; 纯粹的;
fixed	[fɪkst]	固定的; 不变的; 不能变的; 不易改变的;
sticky	[ˈstɪki]	粘性的; 黏(性)的; 一面带黏胶的;

语法：

选择器 { position: sticky; top: 10px; }

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必须添加 top、left、right、bottom其中一个才有效

跟页面滚动搭配。兼容性较差，IE不支持

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性定位</title>
    <style>
        body {
            height: 3000px;
        }

        .nav {
            /* 粘性定位  第一步*/
            position: sticky;
            /* 第二步        top 0 指的是顶部当为0像素时，变成固定定位了*/
            top: 0;
            width: 800px;
            height: 50px;
            background-color: rgb(95, 212, 197);
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="nav">我是导航栏</div>
</body>

</html>

效果显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oQYFesbh-1664758117364)(Typora_image/172.png)]

1.6 定位的做总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否(占有位置)	相对于自身位置移动	常用
absolute绝对定位	是(不占有位置)	带有定位的父级	常用
fixed固定定位	是(不占有位置)	浏览器可视区	常用
sticky粘性定位	否(占有位置)	浏览器可视区	当前阶段少

1.一定记住相对定位、固定定位、绝对定位两个大的特点：1.是否占有位置(脱标否) 2.以谁为基准点移动位置

2.学会定位重点学会子绝父相。

1.7定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后顺序(z轴)

语法：

选择器 { z-index: 1; }

(1) 数值可以是正整数、负整数或0，默认是auto,数值越大，盒子越靠上

(2) 如果属性值相同，则按照书写顺序，后来居上

(3) 数字后面不能加单位

(4) 只有定位的盒子才有z-index属性

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位堆叠顺序</title>
    <style>
        .one,
        .two,
        .three {
            /* 加定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        /* 标准流没有先后叠放次序 */
        .one {
            background-color: rgb(201, 50, 23);
            /* 给第一个盒子添加z-index */
            z-index: 1;
        }

        .two {
            background-color: rgb(230, 216, 23);
            left: 50px;
            top: 100px;
            z-index: 2;
        }

        .three {
            background-color: rgb(41, 230, 236);
            left: 150px;
            top: 150px;
        }
    </style>
</head>

<body>
    <div class="one">第一个盒子</div>
    <div class="two">第二个盒子</div>
    <div class="three">第三个盒子</div>
</body>

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XkgyW9ci-1664758117366)(Typora_image/173.png)]

1.7.1定位的拓展(一)

(1) 绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中

水平居中：

(1) left: 50%; :让盒子的左侧移动到父级元素的水平中心位置

(2) margin-left: -100px; :让盒子向左移动自身宽度的一半。

垂直居中：

(1) top:50%: 让盒子的顶部移动到父级元素的垂直中心位置

(2) margin-top: -100px; :让盒子向上移动自身高度的一半。

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位水平垂直居中</title>
    <style>
        .box {
            position: absolute;
            /* 绝对定位的盒子水平居中显示  第一步:left走50% 父容器宽度的一半*/
            left: 50%;
            /* 第二步  margin-left 负值 往左边走 自己盒子宽度的一半 */
            /* margin-left: -100px; */
            /* 盒子垂直居中第一步 top走50% 父容器高度的一半 */
            /* top: 50%; */
            /* 盒子垂直居中第二步  margin-top 负值 往上走，自己盒子高度的一半 */
            /* margin-top: -100px; */
            width: 200px;
            height: 200px;
            background-color: rgb(211, 26, 186);
            /* 让盒子居中对齐 */
            /* margin: 0 auto; */
            /* margin: auto; */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OA2YcxcI-1664758117366)(Typora_image/174.png)]

1.7.2定位的拓展(二)

1.定位的特殊特性

绝对定位和固定定位也和浮动类似

(1) 行内元素添加绝对或者固定定位，可以直接设置高度和宽度

(2) 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

2.脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位) 的元素都不会触发外边距合并的问题。

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位的特殊特性</title>
    <style>
        /* 行内块元素有个绝对定位，可以直接给高度宽度 */
        span {
            position: absolute;
            background-color: rgb(106, 224, 240);
            top: 100px;
            width: 200px;
            height: 200px;
        }

        div {
            position: absolute;
            background-color: purple;
        }
    </style>
</head>

<body>
    <span>123</span>
    <div>abc</div>
</body>

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m7auMSRp-1664758117368)(Typora_image/175.png)]

1.7.3 定位的拓展(三)

1.绝对定位(固定定位) 会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)

但是绝对定位(固定定位) 会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果，文字会围绕浮动元素。

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位会完全压住标准流盒子内容</title>
    <style>
        .box {
            /* 添加浮动 */
            /* float: left; */
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: rgb(33, 207, 207);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p>飞流直下三千尺, 疑是银河落九天。</p>
</body>

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BCeWRpUo-1664758117370)(Typora_image/176.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NS5OsTz2-1664758117374)(Typora_image/177.png)]

1.8 案例：淘宝焦点图布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5EQp0Ukj-1664758117376)(Typora_image/178.png)]

分析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hJCdfVGl-1664758117377)(Typora_image/179.png)]

组成	命名
大盒子	类名为: tb-promo 淘宝广告
图片	展示的图片
左右两个按钮	按钮用链接处理。左箭头 prev 右箭头 next
底侧小圆点	ul处理，类名为 prmo-nav

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝轮播图做法</title>
    <style>
        /* 清除内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 清除li的样式  (前面有小黑点) */
        li {
            list-style: none;
        }

        .tb-promo {
            /* 子绝父相 */
            position: relative;
            width: 520px;
            height: 280px;
            /* background-color: orange; */
            /* 居中对齐  标准流可以通过auto水平居中 */
            margin: 100px auto;
        }

        /* 相对定位不脱离标准流，跟标准流一样，都可以通过margin : auto实现水平居中 */
        /* 绝对定位和固定固定不可以直接实现水平或者垂直居中   要实现需要用到上文中的算法 */

        /* 强制规定图片的大小 */
        .tb-promo img {
            width: 520px;
            height: 280px;

        }

        /* 并集选择器可以一起声明相同的样式 */
        .prev,
        .next {

            /* left: 0; */
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            /* 文本水平居中 */
            text-align: center;
            /* 文本垂直居中 */
            line-height: 30px;
            color: #fff;
            /* 去掉链接的下划线 */
            text-decoration: none;
        }

        .prev {
            /* 加了绝对定位的盒子不需要默认转换(行内变成块级)，就可以直接设置宽和高 */
            /* position: absolute; */
            left: 0;
            /* top: 0; */
            /* 加了绝对定位的盒子，要实现垂直居中，需要用到算法 */
            /* top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            /* 文本水平居中 */
            /* text-align: center; */
            /* 文本垂直居中 */
            /* line-height: 30px; */
            /* color: #fff; */
            /* 去掉链接的下划线 */
            /* text-decoration: none; */
            /* 设置盒子的边角 */
            /* border-radius: 15px; */
            /* 盒子的右上角设置 */
            border-top-right-radius: 15px;
            /* 盒子的右下角设置 */
            border-bottom-right-radius: 15px;
        }

        .next {
            /* 如果一个盒子既有left属性也有right属性，则默认会执行left属性， 同理  top  bottom 都有时，则会执行top属性 */
            /* 加了绝对定位的盒子不需要默认转换(行内变成块级)，就可以直接设置宽和高 */
            /* position: absolute; */
            right: 0;
            /* top: 0; */
            /* 加了绝对定位的盒子，要实现垂直居中，需要用到算法 */
            /* top: 50%; */
            /* margin-top: -15px; */
            /* width: 20px; */
            /* height: 30px; */
            /* background: rgba(0, 0, 0, .3); */
            /* 文本水平居中 */
            /* text-align: center; */
            /* 文本垂直居中 */
            /* line-height: 30px; */
            /* color: #fff; */
            /* 去掉链接的下划线 */
            /* text-decoration: none; */
            /* 设置盒子的边角 */
            /* border-radius: 15px; */
            /* 盒子的左上角设置 */
            border-top-left-radius: 15px;
            /* 盒子的左下角设置 */
            border-bottom-left-radius: 15px;
        }

        .promo-nav {
            /* 子绝父相 */
            position: absolute;
            bottom: 15px;
            /* left: 0; */
            /* 绝对定位实现水平居中的方法 */
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            /* background-color: blue; */
            /* 白色半透明 */
            background: rgba(255, 255, 255, .3);
            /* 盒子边框变圆角 */
            border-radius: 7px;
        }

        .promo-nav li {
            /* 添加浮动，让它们在一行显示 */
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            /* 把正方形改成圆 */
            border-radius: 50%;
            /* 执行外边距，上下左右都是3px */
            margin: 3px;
        }

        /* li被选择带颜色 */
        .promo-nav .selected {
            /* 直接设定颜色，不会变色   因为上面已经设定了白色，根据元素的层叠性，要考虑权重的问题 */
            /* 解决方法：加权重 */
            background-color: #ff5000;
        }
    </style>
</head>


<body>
    <div class="tb-promo">
        <img src="../access/tb.jpg" alt="图片">
        <!-- 左侧按钮箭头 -->
        <!-- a.prev -->
        <a href="#" class="prev">&lt;</a>
        <!-- 右侧按钮箭头 -->
        <!-- a.next -->
        <a href="#" class="next">&gt;</a>
        <!-- 小圆点 -->
        <!-- ul.promo-nav -->
        <ul class="promo-nav">
            <!-- li*5 -->
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>