有关CSS定位、隐藏的案例

SPIRIT_SYF

于 2024-04-09 09:00:00 发布

阅读量252

点赞数 6

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/SPIRITE_SYF/article/details/137521911

版权

本文介绍了如何利用CSS定位和JavaScript编写HTML代码来实现轮播图的切换和隐藏效果，如广告显示、鼠标经过触发的视频遮罩。通过实例展示了大盒子布局和绝对/相对定位技巧的应用。

摘要由CSDN通过智能技术生成

一、定位案例

定位的使用，轮播图就是非常常见用法。轮播图的切换使用JS书写。但是我们可以使用定位技术构建一个轮播图的框架。剩下需要在JS中继续学习。

我们的目标是常见一个这样的轮播图：

思路分析：1、需要一个大盒子盛放所有内容，同时大盒子的属性是相对定位。2、内部需要图片，3个绝对定位的盒子。3、左、右按键，使用<a>做。4、底部的按钮使用一个盒子+ul+li的方法做。

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

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

        .box {
            position: relative;

            width: 700px;
            height: 450px;
            margin: 100px auto;
        }

        .box img {

            width: 100%;
            height: 100%;
        }

        .box .leftbutton {
            position: absolute;
            top: 50%;
            left: 0;
            width: 20px;
            height: 30px;
            margin-top: -17px;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            line-height: 30px;
            text-align: center;
            color: white;
            text-decoration: none;
            background-color: rgba(65, 64, 64, 0.5);
        }

        .box .leftbutton:hover {
            background-color: #fdd304;
        }

        .box .rightbutton {
            position: absolute;
            top: 50%;
            right: 0;
            width: 20px;
            height: 30px;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            margin-top: -17px;
            line-height: 30px;
            text-align: center;
            color: white;
            text-decoration: none;
            background-color: rgba(65, 64, 64, 0.5);
        }

        .box .rightbutton:hover {
            background-color: #fdd304;
        }

        .box .bottombutton {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            border-radius: 6px;
            background-color: rgba(0, 0, 0, 0.7);


        }

        .box .bottombutton li {
            float: left;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #fff;
            margin-left: 5px;
            margin-top: 2px;
            list-style: none;

        }

        .box .bottombutton li:hover {
            background-color: orange;
        }

        .box .bottombutton .selected {
            background-color: orange;
        }
    </style>

</head>

<body>
    <h1>轮播图的切换使用JS书写</h1>
    <h1>轮播图主要是使用定位的技术</h1>
    <div class="box">
        <img src="images/tb1.png" alt="">
        <a class="leftbutton"> &lt; </a>
        <a class="rightbutton"> &gt;</a>
        <ul class="bottombutton">
            <li></li>
            <li></li>
            <li class="selected"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

二、隐藏案例

隐藏的使用我们所常见的一个是广告，一个是鼠标经过视频，在盒子上出现播放的按钮和阴影。这里针对后者做出如下的案例。

思路分析：1、需要一个大盒子承装所有内容，可以设置为绝对定位。2、需要上方有一个图片，下方有标题，还需要一个盖住图片的隐藏图层经过时可以出现。3、图篇之家插入，然后设置宽度100%即可。4、文字设置浮动，向下调整位置即可。5、隐藏图层，设置为隐藏，设置为相对定位，设置好大小。5、在经过的时候，设置为display: block;使之显现。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿土豆网显示隐藏遮罩案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            position: relative;
            left: 100px;
            top: 120px;
            width: 500px;
            height: 350px;
            margin: 100px auto;
            /* background-color: aquamarine; */
            border: 1px solid rgba(0, 0, 0, 0.3);
        }

        .box1:hover {
            box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);

        }

        .box1:hover .cover {
            display: block;

        }

        .box1 .pic {
            width: 100%;

        }


        .box1 .pic img {
            width: 100%;
        }

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



        .box1 .name {
            float: left;
            margin-top: 15px;
            margin-left: 20px;
            font-size: 20px;
            font-weight: 400;
        }
    </style>

</head>

<body>
    <div class="box1">
        <div class="cover"></div>
        <div class="pic"><img src="images/tudou.jpg" alt=""></div>
        <h1 class="name">【大咖】张柏芝做客</h1>

    </div>
</body>

</html>

最后附上代码下载链接。