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

最新推荐文章于 2024-05-26 23:07:16 发布

I am the sun?

最新推荐文章于 2024-05-26 23:07:16 发布

阅读量3.5k

点赞数 10

分类专栏： CSS 文章标签：定位 css html

本文链接：https://blog.csdn.net/fighting_dream/article/details/113410460

版权

CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

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

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，小案例完成~

I am the sun?

关注

10
点赞
踩
76

收藏

觉得还不错? 一键收藏
0
评论
运用css+html制作简单的淘宝轮播案例图

要让最后显示结果如下方图片：有兴趣的话就跟我一起学吧~我把这个轮播图首页布局这么设置：图片+左箭头+右箭头+下边小圆点1.因为图片大小和盒子一样大，我们div一个盒子出来，并且宽高和图片一样大。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
复制链接

扫一扫