前端学习之用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>

结果

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

相关推荐
倾颜1 小时前
从 textarea 到 AI 输入框：用 Tiptap 实现 / 命令、@ 引用和结构化请求
前端·langchain·next.js
kyriewen2 小时前
程序员连夜带团队跑路，省了23万：这AI太贵，真的用不起了
前端·javascript·openai
kyriewen3 小时前
你写的代码没有测试，就像出门不锁门——Jest + Testing Library 从入门到不慌
前端·单元测试·jest
辞旧 lekkk3 小时前
【Qt】信号和槽
linux·开发语言·数据库·qt·学习·mysql·萌新
yuzhiboyouye4 小时前
web前端英语面试
前端·面试·状态模式
canonical_entropy5 小时前
下一代低代码渲染框架 nop-chaos-flux 的设计原则
前端·低代码·前端框架
东方小月5 小时前
5分钟搞懂Harness Engineering（驾驭工程）：从提示词到AI Agent的进化之路
前端·后端·架构
我叫黑大帅5 小时前
为什么需要 @types/react？解决“无法找到模块 react 的声明文件”报错
前端·javascript·面试
之歆5 小时前
DAY_21JavaScript 深度解析：数组（Array）与函数（Function）(一)
前端·javascript
XinZong6 小时前
【AI社交】基于OpenClaw自研轻量化AI社交平台实战
前端
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03CC-Switch & Claude 基于 Linux 服务器安装使用指南04零基础教你claude code 接入 deepseek V405【AI】2026 年具身智能模型和世界模型总结06Windows端Codex接入第三方模型（DeekSeek，BaiLian)07要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法08裂开！ChatGPT 居然开始要手机号验证，附详细解决方法09Cursor 接入 DeepSeek‑V4‑Pro 完整指南（2026 实测）10codex app每次打开重连5次Reconnecting问题解决