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

曾经终败给现在 2022-10-24 15:22 183阅读 0赞

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

**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>

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

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

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

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

**最后就差底部原点啦**  
先搞个模型出来，因为有五个相同的原点，我用五个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"> < </div>
            <div class="right"> > </div>
            <div class="bottom">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </body>
    
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 9]  
**接下来是清除 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"> < </div>
            <div class="right"> > </div>
            <div class="bottom">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 10]  
运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 11]

ok，小案例完成~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/604ce89763574f1d8b6aafc462d24564.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/1b409b648cb544f7b3eac512c0f58866.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/a4e32910819a47a6842ec1e353bcd3fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/5f7d0f68a5964f0fb92def584b82b52c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]: /images/20221024/29d913ec52714a89b77b6f54c99e86f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]: /images/20221024/cc204cc66ba64f6a8cc4c54bdd45a28c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 6]: /images/20221024/232dd929adaa43398d727fb844d7720a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 7]: /images/20221024/ef45a5add089485fbee7858512ddb602.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 8]: /images/20221024/93b36d5fb0b940adbe0fa7a92b756b9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 9]: /images/20221024/bb5e4350edd24de2a063d54a57cc6098.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 10]: /images/20221024/b60decc298734857808e5757e37be5ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 11]: /images/20221024/38c0133edb284c15ae4785cfa69c958e.png