前端学习之用css和html做一个仿淘宝的导航栏

板栗妖怪2024-03-25 6:04

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿淘宝界面案例</title>
    <style>
        /* 最外层盒子 */
        .container{
            width: 270px;
            height: 385px;
            border: 1px solid rgb(255, 208, 0);
            border-radius: 20px;
            float: left;
            margin: 10px;

        }
        /* 商品图片 */
        img{
            width: 265px;
            height: 265px;
            margin: 2px;
            border-radius: 20px;
        }
        /* 商品名字 */
        .a{
            width: 270px;
            height: 130px;
            
        }
        /* 商品价格 */
        .c{
            color: #fd3f31;
            font-size: 20px;

        }
        /* 店铺图标 */
        .d{ 
            width: 14px;
            height: 14px;
            vertical-align: text-bottom;
        }
        /* 店铺名字 */
        .e{
            font-size: 14px;
           vertical-align: text-bottom;
            
        }
        /* 月销量 */
        .f{
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>    
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
    <div class="container">
        <img src="https://img.alicdn.com/img/i1/5464898968/O1CN01w2Ax4n2G7OqzBRsa4_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
        <div class="a"><span class="b">全自动发牌机扑克机德州掼蛋炸金花斗地主惯蛋洗牌发牌一体机</span>
        <div class="c">￥538</div>
        <span><img class="d" src="https://ts1.cn.mm.bing.net/th/id/R-C.cd7f2177c5f972704797a40909d7323e?rik=SFRNEwcJI2GM9Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f04%2f11%2fc9e6390833bec20f2a7487ab9d3e7e85.jpg&ehk=RQbdmstklcc7q%2bejIcH6RfnOut%2fAtyHASG3dt0sDKig%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt=""> </span>
        <span class="e">某某发牌机工厂店</span>
        
        <div class="f"><span class="g">月销 0 &nbsp;</span></div>
        </div>
    </div>
</body>
</html>

结果

不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

相关推荐
烛阴2 分钟前
告别原生Cookie：js-cookie如何实现Cookie的优雅管理
前端·javascript
Allen Bright2 分钟前
【HTML-16】深入理解HTML中的块元素与行内元素
前端·html
前端卧龙人9 分钟前
受够了webpack的速度，我选择了vite重构vue2项目
前端
巛、17 分钟前
ES6面试题
前端·面试·es6
Clair-Sean38 分钟前
【JavaSE】多线程基础学习笔记
笔记·python·学习
周全全43 分钟前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
汪子熙1 小时前
走进 Fundamental NGX Platform：从 SAP 设计体系到高生产力组件层
前端·javascript·面试
moxiaoran57531 小时前
uni-app学习笔记三十四--刷新和回到顶部的实现
笔记·学习·uni-app
拉不动的猪1 小时前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九1 小时前
html、css（javaweb第一天）
前端·css·html
热门推荐
01【图像处理与机器视觉】XJTU期末考点02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07R-tree详解08海康Visionmaster-常见问题排查方法-启动阶段09DeepSeek各版本说明与优缺点分析10零代码入门 | Coze——让大模型接入自己的数据库