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

结果

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

相关推荐
无风听海10 分钟前
Bearer Token 权威指南：从原理到生产级安全实践
前端·javascript·安全
jerrywus16 分钟前
别只换模型！Claude Opus 4.8 努力控制 + Fast模式，真实能省钱3倍
前端·agent·claude
riuphan19 分钟前
JavaScript 类型判断完全指南
前端·javascript
Hilaku26 分钟前
前端工程师最终会变成 AI工程师？
前端·javascript·程序员
yeflx30 分钟前
Ubuntu22.04重装显卡驱动
前端·chrome
小二·38 分钟前
Prompt Engineering 高级技巧：CoT/ToT/ReAct 等进阶方法论实战
前端·react.js·prompt
chancygcx_39 分钟前
前端框架React day1--React入门
前端·react.js·前端框架
川石课堂软件测试39 分钟前
零基础小白如何学习自动化测试
python·功能测试·学习·测试工具·jmeter·压力测试·harmonyos
2301_809051141 小时前
Linux 数据库开发 学习笔记
笔记·学习·数据库开发
quan_泉1 小时前
DIDCTF 取证初学者
java·服务器·前端
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03【AI】2026 年具身智能模型和世界模型总结04【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法05Codex 下载安装指南：Windows 和 macOS 官方版下载06裂开！ChatGPT 居然开始要手机号验证，附详细解决方法07CC-Switch & Claude 基于 Linux 服务器安装使用指南08Codex 接入 DeepSeek API 完整配置文档09几个好用的ip纯净度检测网站10CC-Switch 下载、安装与使用配置指南【2026.5.29】