自学前端——第十天

最新推荐文章于 2026-06-21 14:42:46 发布

原创最新推荐文章于 2026-06-21 14:42:46 发布 · 121 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #css #html #css3 #html5

自学前端专栏收录该内容

14 篇文章

订阅专栏

文章介绍了如何使用CSS创建一个简单的轮播图，强调了利用ul和li元素实现底部指示器，以及清除默认margin和padding的重要性。此外，文章探讨了通过display、visibility和overflow属性控制元素的显示与隐藏，特别提到了它们之间的区别。最后，通过一个案例展示了如何实现鼠标悬停时显示遮罩层的效果，以及在遮罩层上点击链接的方法。

2.3overflow控制溢出部分的显示隐藏

3.显示隐藏案例

1.轮播图（简略）案例

示例如图：

注意点：（i）在写下方的小圆点时用ul和li来实现，ul的外面不用额外再套一个div，因为 ul 本身就可以视作是一个块级元素，还有一个 li 也是一个块级元素，因此要实现下方的小圆点，只需让 ul 当底部的白色半透明的盒子，再让 li 的背景颜色为白色，border-radius：50%（使其从矩形变成圆形）即可；

（ii）要记得 ul 和 li 之间其实是存在距离的，这个距离我们前面提到是通过*{margin：0；padding：0}来消除的，因此在写的时候要加上这句话，否则会发现白色小圆点始终不是从底部的白色半透明盒子的最左端开始出现；

（iii）在有定位的盒子中实现垂直、水平居中始终要用到我们上一天文章中提到的那两个算法；

（iv）让下方的小圆点彼此之间隔开一点距离是用margin，这同时也能和透明盒子 ul 隔开一定距离。

源码如下：

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        .tb-promo {
            position: relative;
            width: 845px;
            height: 471px;
            margin: 100px auto;
        }

        .tb-promo img {
            width: 100%;
        }

        .prev {
            position: absolute;
            top: 50%;
            margin-top: -22.5px;
            left: 0px;
            width: 20px;
            height: 30px;
            line-height: 30px;
            border-radius: 0 15px 15px 0;
            background-color: rgba(0, 0, 0, .3);
            color: white;
        }

        .next {
            position: absolute;
            top: 50%;
            margin-top: -22.5px;
            padding-left: 5px;
            right: 0px;
            width: 15px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px 0 0 15px;
            background-color: rgba(0, 0, 0, .3);
            color: white;
        }

        .box {
            position: absolute;
            bottom: 30px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            border-radius: 7px;
            background-color: rgba(255, 255, 255, .3);
        }

        .box li {
            float: left;
            width: 8px;
            height: 8px;
            border-radius: 4px;
            margin: 3px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="images/tb.jpg" alt="promo">
        <a href="#" class="prev"> &lt;</a>
        <a href="#" class="next"> &gt;</a>
        <ul class="box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

2.元素的显示与隐藏

在页面中往往存在一些元素，我们点击关闭按钮这个元素就不见了，但是刷新页面之后又会出现（例如各种广告），这个本质上是：通过让一个元素在页面中隐藏和显示。

想实现这种效果有三种方法：

2.1display控制显示隐藏

（图源25-display显示隐藏元素_哔哩哔哩_bilibili）

需要注意的是：display：none 隐藏元素后，该元素不再占有原来的位置；（display：none很常用）

2.2visibility控制显示隐藏

（图源同上）

需要注意的是：visibility：hidden 隐藏元素后，该元素仍占有原来的位置；

2.3overflow控制溢出部分的显示隐藏

（图源同上）

最后一句话可以结合学成在线案例里的例子来理解，在精品推荐主体部分，我们在右上角加了一个hot 标志，那个标志实际上就是有部分溢出所在的父系盒子的，如果用overflow：hidden，则标志会少掉一点。

3.显示隐藏案例

效果如上。

注意：遮罩的半黑色透明盒子不占有位置，需要绝对定位和display配合使用。

源码：

<!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>
        a {
            text-decoration: none;
        }

        .box {
            position: relative;
            width: 448px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }

        .box img {
            width: 100%;
            height: 100%;
        }

        .top {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center;
            display: none;
        }

        .top a {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* 注意写法： */
        /* 可理解为：鼠标经过.box时，.top发生的变化是display：block; */
        .box:hover .top {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/tudou.jpg" alt="">
        <div class="top">
            <!-- 在遮罩层里设置一个a，将a转成块级元素就能实现点击遮罩层跳转 -->
            <a href="#"></a>
        </div>
    </div>
</body>

</html>

着重要掌握的知识点：（i）遮罩层怎么套在图片上；（子绝父相，子元素的长宽为父元素的100%）

（ii）怎么实现鼠标经过图片时，遮罩层出现；（.box:hover .top，意为鼠标经过.box时，.top发生变化）

（iii）怎么实现鼠标在遮罩层上也能点击超链接。（在遮罩层的盒子内设置一个a标签，使a标签转为长宽为100%的块级元素）