运用css+html制作简单的淘宝轮播案例图

于 2021-01-30 08:23:08 发布
阅读量3.8k 收藏 79
点赞数 10
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： 定位 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fighting_dream/article/details/113410460

要让最后显示结果如下方图片：
在这里插入图片描述
有兴趣的话就跟我一起学吧~
我把这个轮播图首页布局这么设置：
图片+左箭头+右箭头+下边小圆点

1.因为图片大小和盒子一样大，我们div一个盒子出来，并且宽高和图片一样大。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 520px;
            height: 280px;
            margin: 100px auto;
        }
        .box img {
            width: 520px;
            height: 280px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img.jpg" alt="是一张图片哦">
    </div>
</body>
</html>

在这里插入图片描述
运行结果如下：
在这里插入图片描述
2. 接下来要制作左边小箭头啦，可以看到左边小箭头是在图片的上面压住图片的，并且位于图片中央，因此我们要设置为绝对定位哦，是在父元素里面中间，因此父元素即盒子，要设置为相对定位（不懂的可以看我博客博文“子绝父相”哦）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 520px;
            height: 280px;
            margin: 100px auto;
            position: relative;
        }
        .box img {
            width: 520px;
            height: 280px;
        }
        .left {
            width: 30px;
            height: 20px;
            background-color: white;
            position: absolute;
            top: 50%;
            margin-top: -10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img.jpg" alt="是一张图片哦">
        <div class="left"> &lt; </div>
    </div>
</body>
</html>

在这里插入图片描述
运行效果如下图：
在这里插入图片描述
接下来设置左箭头背景属性，居中对齐等：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 520px;
            height: 280px;
            margin: 100px auto;
            position: relative;
        }
        .box img {
            width: 520px;
            height: 280px;
        }
        .left {
            width: 25px;
            height: 20px;
            background-color: white;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            background: rgba(0, 0, 0, .3);
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            left: 0;
            text-align: center;
            line-height: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img.jpg" alt="是一张图片哦">
        <div class="left"> &lt; </div>
    </div>
</body>
</html>

在这里插入图片描述
运行结果如下：
在这里插入图片描述
右边和左边几乎一样，除了靠右对齐，以及背景换成左上左下两个角圆滑。
代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 520px;
            height: 280px;
            margin: 100px auto;
            position: relative;
        }

        .box img {
            width: 520px;
            height: 280px;
        }

        .left {
            width: 25px;
            height: 20px;
            background-color: white;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            background: rgba(0, 0, 0, .3);
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            left: 0;
            text-align: center;
            line-height: 20px;
            color: white;
        }

        .right {
            width: 25px;
            height: 20px;
            background-color: white;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            background: rgba(0, 0, 0, .3);
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            right: 0;
            text-align: center;
            line-height: 20px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="img.jpg" alt="是一张图片哦">
        <div class="left"> &lt; </div>
        <div class="right"> &gt; </div>
    </div>
</body>

</html>

在这里插入图片描述
运行结果如下：
在这里插入图片描述
左右箭头做完啦，代码似乎也多了好多，太多重复的一样的，我们来简化一下，把左右箭头相同的部分合并起来，如下代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 这个大盒子 */
        .box {
            width: 520px;
            height: 280px;
            margin: 100px auto;
            position: relative;
        }
        /* 盒子里面的图片 */
        .box img {
            width: 520px;
            height: 280px;
        }
        /* 左右箭头相同部分 */
        .left,
        .right {
            width: 25px;
            height: 20px;
            background-color: white;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 20px;
            color: white;
        }
        /* 左箭头 */
        .left {
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            left: 0;
        }
        /* 右箭头 */
        .right {
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="img.jpg" alt="是一张图片哦">
        <div class="left"> &lt; </div>
        <div class="right"> &gt; </div>
    </div>
</body>
</html>

最后就差底部原点啦
先搞个模型出来，因为有五个相同的原点，我用五个li来表示把。用无序列表就行了，代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 这个大盒子 */
        .box {
            width: 520px;
            height: 280px;
            margin: 100px auto;
            position: relative;
        }
        /* 盒子里面的图片 */
        .box img {
            width: 520px;
            height: 280px;
        }
        /* 左右箭头相同部分 */
        .left,
        .right {
            width: 25px;
            height: 20px;
            background-color: white;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 20px;
            color: white;
        }
        /* 左箭头 */
        .left {
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            left: 0;
        }
        /* 右箭头 */
        .right {
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            right: 0;
        }
        .bottom {
            width: 90px;
            height: 20px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="img.jpg" alt="是一张图片哦">
        <div class="left"> &lt; </div>
        <div class="right"> &gt; </div>
        <div class="bottom">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>

</html>

运行结果：
在这里插入图片描述
接下来是清除 li 的样式（就是把左边小黑点搞掉），然后把这个背景大盒子颜色改成白色半透明并且把它放到盒子底部中间位置（还是用到子绝父相原则）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 这个大盒子 */
        .box {
            width: 520px;
            height: 280px;
            margin: 100px auto;
            position: relative;
        }
        /* 盒子里面的图片 */
        .box img {
            width: 520px;
            height: 280px;
        }
        /* 左右箭头相同部分 */
        .left,
        .right {
            width: 25px;
            height: 20px;
            background-color: white;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 20px;
            color: white;
        }
        /* 左箭头 */
        .left {
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            left: 0;
        }
        /* 右箭头 */
        .right {
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            right: 0;
        }
        /* 底部原点 */
        li {
            list-style: none;
        }
        .bottom {
            width: 90px;
            height: 20px;
            background-color: white;
            background: rgba(255, 255, 255, 0.3);
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -45px;
            border-radius: 15px;
        }
        .bottom li {
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 4px;
            margin: 5px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="img.jpg" alt="是一张图片哦">
        <div class="left"> &lt; </div>
        <div class="right"> &gt; </div>
        <div class="bottom">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>

</html>

在这里插入图片描述
运行结果如下：
在这里插入图片描述

ok，小案例完成~

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值