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

结果

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

相关推荐
majingming1232 小时前
FUNCTION
java·前端·javascript
A_nanda3 小时前
Vue项目升级
前端·vue3·vue2
SuperEugene3 小时前
Axios 接口请求规范实战：请求参数 / 响应处理 / 异常兜底，避坑中后台 API 调用混乱｜API 与异步请求规范篇
开发语言·前端·javascript·vue.js·前端框架·axios
AI成长日志3 小时前
【datawhale】hello agents开源课程学习记录第5章 智能体应用实践：低代码平台构建指南
学习·低代码·开源
abigale034 小时前
【浏览器 API / 网络请求 / 文件处理】前端文件上传全流程：从基础上传到断点续传
前端·typescript·文件上传·vue cli
Setsuna_F_Seiei4 小时前
AI 对话应用之页面滚动交互的实现
前端·javascript·ai编程
新缸中之脑4 小时前
追踪来自Agent的Web 流量
前端
GHL2842710904 小时前
RAG相关问题整理学习
学习·ai
wefly20175 小时前
从使用到原理，深度解析m3u8live.cn—— 基于 HLS.js 的 M3U8 在线播放器实现
java·开发语言·前端·javascript·ecmascript·php·m3u8
英俊潇洒美少年5 小时前
vue如何实现react useDeferredvalue和useTransition的效果
前端·vue.js·react.js
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南04围棋-html版本05小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）06班级宠物园部署指南07UV安装并设置国内源08OpenClaw 使用和管理 MCP 完全指南09【计算机一级WPSoffice】小黑课堂题库软件下载安装教程（2026年3月最新版）10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）