HTML5作业：实现小米官网静态首页
小米官网，模仿小米，小米界面作业，小米商城，模仿小米商城
·
1、引言
你是否有过相关设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
小米官网采用html5，css3技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。
2.1、作品简介方面
小米官网采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选，这个页面使用了html和css，特别适合新手练习的页面，小米网站相对于来说比较简洁，看起来比较简单但是实现所有的样式还是有点难度。熟练搭建静态网页是前端工程师的必备技能,小米首页难度低,适合新手练习，所以大家还是需要多练习页面布局,真的很重要!
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时利用弹性布局(display:flex)+float+position定位布局+轮播图+css3动画效果
3、搭建流程
1.头部header导航
注意:在做导航时遇到问题就是浏览器窗口缩小时导航文字会被挤出去
解决方法:给头部导航栏加一个最小宽度(min-width)完美解决文字溢出问题,这里我选择了加最小宽度,而没用溢出隐藏样式(因为直接加最小宽度更省事)
代码如下（示例）：
<div class="nav-top">
<div class="container">
<div class="nav-top-left">
<ul>
<li><a href="#">小米商城</a><span></span></li>
<li><a href="#">MIUI</a><span></span></li>
<li><a href="#">IoT</a><span></span></li>
<li><a href="#">云服务</a><span></span></li>
<li><a href="#">天星数科</a><span></span></li>
<li><a href="#">有品</a><span></span></li>
<li><a href="#">小米开放平台</a><span></span></li>
<li><a href="#">企业团购</a><span></span></li>
<li><a href="#">资质证照</a><span></span></li>
<li><a href="#">协议规则</a><span></span></li>
<li><a href="#">下载app</a><span></span></li>
<li><a href="#">智能生活</a><span></span></li>
<li><a href="#">Select Location</a></li>
</ul>
</div>
<div class="nav-top-right">
<ul>
<li><a href="#">登录</a><span class="line"></span></li>
<li><a href="#">注册</a><span class="line"></span></li>
<li><a href="#">消息通知</a></li>
<li class="shopcart"><img src="./images/tu5_1.png"></img><span>购物车（0）</span><a href="#"></a></li>
</ul>
</div>
</div>
</div>2.nav导航栏部分
注意:遇到跟头部导航同样的问题(加了min-width)解决了文字溢出
小米Logo部分用到position定位
文字导航li标签用display弹性盒子,设置属性justify-content: center;实现居中分布
搜索框部分用到:右浮动+position定位
nav导航li标签的鼠标移入移出效果实现用(display:none隐藏)+ 伪类:hover设置(display:block)实现移入移出动画效果
代码如下：
<div class="nav">
<div class="container">
<div class="logo"><img src="./images/logo-mi2.png" alt=""></div>
<ul>
<li>
<a href="#" class="item">小米手机</a>
<div class="content">
<div class="content-container">
<ul>
<li>
<img src="./images/1.webp" alt="">
<p>Xiaomi Civi 1S</p>
<span>2299元起</span>
<i></i>
</li>
<li>
<img src="./images/2.webp" alt="">
<p>Xiaomi 12 Pro</p>
<span>4699元起</span>
<i></i>
</li>
<li>
<img src="./images/3.webp" alt="">
<p>Xiaomi 12</p>
<span>3699元起</span>
<i></i>
</li>
<li>
<img src="./images/4.webp" alt="">
<p>Xiaomi 12X</p>
<span>2699元起</span>
<i></i>
</li>
<li>
<img src="./images/5.webp" alt="">
<p>Xiaomi 11 青春活力板</p>
<span>1799元起</span>
<i></i>
</li>
<li>
<img src="./images/6.webp" alt="">
<p>Xiaomi Civi</p>
<span>2299元起</span>
<i></i>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="item">Redmi红米</a>
<div class="content">
<div class="content-container">
<ul>
<li>
<img src="./images/redmi1.webp" alt="">
<p>Redmi Note 11T Pro+</p>
<span>2099元起</span>
<i></i>
</li>
<li>
<img src="./images/redmi2.webp" alt="">
<p>Redmi Note 11T Pro</p>
<span>1799元起</span>
<i></i>
</li>
<li>
<img src="./images/redmi3.webp" alt="">
<p>Redmi Note 11SE</p>
<span>999元起</span>
<i></i>
</li>
<li>
<img src="./images/redmi4.webp" alt="">
<p>Redmi 10A</p>
<span>699元起</span>
<i></i>
</li>
<li>
<img src="./images/redmi5.webp" alt="">
<p>Redmi K50 Pro</p>
<span>2999元起</span>
<i></i>
</li>
<li>
<img src="./images/redmi6.webp" alt="">
<p>Redmi K50</p>
<span>2399元起</span>
<i></i>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="item">电视</a>
<div class="content">
<div class="content-container">
<ul>
<li>
<img src="./images/tv1.webp" alt="">
<p>Redmi智能电视X55 2022</p>
<span>2399元</span>
<i></i>
</li>
<li>
<img src="./images/tv2.webp" alt="">
<p>Redmi智能电视X65 2022</p>
<span>3099元</span>
<i></i>
</li>
<li>
<img src="./images/tv3.webp" alt="">
<p>小米电视6 65" OLED</p>
<span>6699元</span>
<i></i>
</li>
<li>
<img src="./images/tv4.webp" alt="">
<p>小米电视 大师77" OLED</p>
<span>17999元</span>
<i></i>
</li>
<li>
<img src="./images/tv5.webp" alt="">
<p>小米透明电视</p>
<span>49999元</span>
<i></i>
</li>
<li>
<img src="./images/tv6.webp" alt="">
<p>小米电视 大师 65英寸OLED</p>
<span>8999元</span>
<i></i>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="item">笔记本</a>
<div class="content">
<div class="content-container">
<ul>
<li>
<img src="./images/notebook1.webp" alt="">
<p>RedmiBook Pro 14 2022锐龙版</p>
<span>5299元起</span>
<i></i>
</li>
<li>
<img src="./images/notebook2.webp" alt="">
<p>RedmiBook Pro 15 2022锐龙版</p>
<span>5499元起</span>
<i></i>
</li>
<li>
<img src="./images/notebook3.webp" alt="">
<p>RedmiBook Pro 14锐龙版</p>
<span>4699元起</span>
<i></i>
</li>
<li>
<img src="./images/notebook4.webp" alt="">
<p>RedmiBook Pro 14 2022</p>
<span>5399元起</span>
<i></i>
</li>
<li>
<img src="./images/notebook5.webp" alt="">
<p>小米笔记本 Pro 14 锐龙版</p>
<span>5499元起</span>
<i></i>
</li>
<li>
<img src="./images/notebook6.webp" alt="">
<p>Redmi G 2121 AMD版</p>
<span>6499元起</span>
<i></i>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="item">家电</a>
<div class="content">
<div class="content-container">
<ul>
<li>
<img src="./images/jd1.webp" alt="">
<p>巨省电 | 米家空调 新一级 1.5匹睡眠版</p>
<span>2199元</span>
<i></i>
</li>
<li>
<img src="./images/jd2.webp" alt="">
<p>巨省电 3匹|变频|新一级能效（鎏金款）</p>
<span>5299元</span>
<i></i>
</li>
<li>
<img src="./images/jd3.webp" alt="">
<p>米家扫拖机器人1T</p>
<span>999元</span>
<i></i>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="item">路由器</a>
<div class="content">
<div class="content-container">
<ul>
<li>
<img src="./images/route1.webp" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>599元</span>
<i></i>
</li>
<li>
<img src="./images/route2.webp" alt="">
<p>小米路由器AX6000</p>
<span>549元</span>
<i></i>
</li>
<li>
<img src="./images/route3.webp" alt="">
<p>小米路由器AX9000</p>
<span>1299</span>
<i></i>
</li>
<li>
<img src="./images/route4.webp" alt="">
<p>Redmi路由器AC2100</p>
<span>199元</span>
<i></i>
</li>
<li>
<img src="./images/route5.jpg" alt="">
<p>小米路由器4A 千兆版本</p>
<span>129元</span>
<i></i>
</li>
<li>
<img src="./images/route6.png" alt="">
<p>查看全部</p>
<span>小米路由器</span>
<i></i>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="item">智能硬件</a>
</li>
<li>
<a href="#" class="item">服务</a>
</li>
<li>
<a href="#" class="item">社区</a>
</li>
</ul>
<div class="search">
<input type="text" placeholder="手机">
<span class="iconfont icon-sousuo"></span>
</div>
</div>
</div>3.轮播图+图片导航部分
轮播图是使用的原生js自己写的，相关逻辑比较容易理解
相关代码：
<div class="banner">
<ul class="img-list">
<li><a href="#"><img src="./images/lbt.png" alt=""></a></li>
<li><a href="#"><img src="./images/lbt1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/lbt2.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/lbt3.jpg" alt=""></a></li>
</ul>
<div class="arrow">
<span class="left"> < </span>
<span class="right"> > </span>
</div>
<!-- 小圆圈 -->
<ul class="round">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 侧边导航栏 -->
<div class="side-nav">
<div class="side-nav-left">
<ul>
<li>
<a href="#">手机 电话卡</a>
<div class="side-nav-right">
<ul>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
<li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li>
</ul>
</div>
</li>
<li>
<a href="#">电视 盒子</a>
<div class="side-nav-right">
<ul>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
<li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li>
</ul>
</div>
</li>
<li>
<a href="#">笔记本 显示器</a>
<div class="side-nav-right"></div>
</li>
<li>
<a href="#">家电 插线板</a>
<div class="side-nav-right"></div>
</li>
<li>
<a href="#">出行 穿戴</a>
<div class="side-nav-right"></div>
</li>
<li>
<a href="#">智能 路由器</a>
<div class="side-nav-right"></div>
</li>
<li>
<a href="#">电源 配件</a>
<div class="side-nav-right"></div>
</li>
<li>
<a href="#">健康 儿童</a>
<div class="side-nav-right"></div>
</li>
<li>
<a href="#">耳机 音箱</a>
<div class="side-nav-right"></div>
</li>
<li>
<a href="#">生活 箱包</a>
<div class="side-nav-right"></div>
</li>
</ul>
</div>
</div>
</div>
<!-- 热门新产品 -->
<div class="new-product">
<div class="kind">
<ul>
<li><a href="#"><img src="./images/mini1.png" alt=""><p>小米秒杀</p></a></li>
<li><a href="#"><img src="./images/mini2.png" alt=""><p>企业团购</p></a></li>
<li><a href="#"><img src="./images/mini3.png" alt=""><p>F码通道</p></a></a></li>
<li><a href="#"><img src="./images/mini4.png" alt=""><p>米粉卡</p></a></li>
<li><a href="#"><img src="./images/mini5.png" alt=""><p>以旧换新</p></a></a></li>
<li><a href="#"><img src="./images/mini6.png" alt=""><p>话费充值</p></a></li>
</ul>
</div>
<ul>
<li><a href="#"><img src="./images/dh1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/dh2.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/dh3.jpg" alt=""></a></li>
</ul>
</div>4.大主体部分
比较简单只需要把盒子布局好再把内容慢慢填充进去再添加一些小样式即可
用到display弹性盒子(学会用弹性盒子真的非常好用,我用的还是不熟练)
相关代码：
<div class="body">
<!-- 秒杀 -->
<div class="seckill">
<h6>小米秒杀</h6>
<div class="seckill-content">
<ul>
<li>
<a href="#">
<p>14:00 场</p>
<p>距离结束还有</p>
<div class="time">
<span class="hours">05</span>:
<span class="min">10</span>:
<span class="sec">33</span>
</div>
</a>
</li>
<li>
<a href="#"><img src="./images/mouse.jpg" alt=""></a>
<p class="title">小米时尚鼠标 黑色</p>
<p>金属材质外观</p>
<p class="price">79元<span class="del">99元</span></p>
</li>
<li>
<a href="#"><img src="./images/clock.jpg" alt=""></a>
<p class="title">小爱智能触屏时钟音箱 黑色</p>
<p>AI智能黑科技</p>
<p class="price">369元<span class="del">399元</span></p>
</li>
<li>
<a href="#"><img src="./images/xa2max.jpg" alt=""></a>
<p class="title">左点小艾2Max智能艾灸盒</p>
<p>海泉推荐；国朝养生</p>
<p class="price">249元<span class="del">369元</span></p>
</li>
<li>
<a href="#"><img src="./images/brush.png" alt=""></a>
<p class="title">素诺智能可视洁牙仪 超声波</p>
<p>500万高清像素，医用洗牙家用化</p>
<p class="price">249元<span class="del">299元</span></p>
</li>
</ul>
</div>
<div class="change-page"></div>
</div>
<!-- 商品 -->
<ul class="goods-list">
<li>
<div class="pic"><a href="#"><img src="./images/tgt1.jpg" alt=""></a></div>
<div class="title">
<span>手机</span>
<span>查看更多</span>
<i> > </i>
</div>
<div class="goods-content">
<div class="left">
<a href="#"><img src="./images/phone_left.jpg" alt=""></a>
</div>
<ul class="right">
<li>
<a href="#"><img src="./images/sj7.png" alt=""></a>
<p class="title">Note10 10 Pro</p>
<p>天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1599元起<span class="del">1699元</span></p>
</li>
<li>
<a href="#"><img src="./images/sj8.jpg" alt=""></a>
<p class="title">Note10 5G</p>
<p>5G小金刚，旗舰长续航</p>
<p class="price">1099元起</p>
</li>
<li>
<a href="#"><img src="./images/sj1.png" alt=""></a>
<p class="title">小米MIX FOLD</p>
<p>折叠大屏 | 自研芯片</p>
<p class="price">9999元起</p>
</li>
<li>
<a href="#"><img src="./images/sj2.png" alt=""></a>
<p class="title">小米11 Ultra</p>
<p>1/1.12"GN2 | 2K四微曲屏</p>
<p class="price">5999元起</p>
</li>
<li>
<a href="#"><img src="./images/sj3.jpg" alt=""></a>
<p class="title">小米11 Pro</p>
<p>1/1.12"GN2 | 骁龙888</p>
<p class="price">4499元起<span class="del">4999元</span></p>
</li>
<li>
<a href="#"><img src="./images/sj4.png" alt=""></a>
<p class="title">小米11 青春版</p>
<p>小米11青春版 轻薄</p>
<p class="price">2299元起</p>
</li>
<li>
<a href="#"><img src="./images/sj5.png" alt=""></a>
<p class="title">K40 游戏增强版</p>
<p>轻薄电竞设计</p>
<p class="price">1999元起</p>
</li>
<li>
<a href="#"><img src="./images/sj6.png" alt=""></a>
<p class="title">黑鲨4 Pro</p>
<p>黑鲨4 Pro</p>
<p class="price">3999元起</p>
</li>
</ul>
</div>
</li>
<li>
<div class="pic"><a href="#"><img src="./images/tgt2.jpg" alt=""></a></div>
<div class="title">
<span>家电</span>
<div id="second">
<a href="#">电视影音</a>
<div class="goods-content">
<ul class="no-left-right">
<li style="padding-top: 0;">
<a href="#" style="height: 100%;"><img src="./images/jdgg1.jpg" alt="" style="width: 100%;height: 100%;"></a>
</li>
<li>
<a href="#"><img src="./images/jd1.jpg" alt=""></a>
<p class="title">Note10 10 Pro</p>
<p>天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1599元起<span class="del">1699元</span></p>
</li>
<li>
<a href="#"><img src="./images/jd2.jpg" alt=""></a>
<p class="title">Note10 10 Pro</p>
<p>天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1599元起<span class="del">1699元</span></p>
</li>
<li>
<a href="#"><img src="./images/jd3.jpg" alt=""></a>
<p class="title">Note10 5G</p>
<p>5G小金刚，旗舰长续航</p>
<p class="price">1099元起</p>
</li>
<li>
<a href="#"><img src="./images/jd4.jpg" alt=""></a>
<p class="title">小米MIX FOLD</p>
<p>折叠大屏 | 自研芯片</p>
<p class="price">9999元起</p>
</li>
<li style="padding-top: 0;">
<a href="#"><img src="./images/jdgg2.jpg" alt="" style="width: 100%;height: 100%;"></a>
</li>
<li>
<a href="#"><img src="./images/jd5.jpg" alt=""></a>
<p class="title">小米11 Pro</p>
<p>1/1.12"GN2 | 骁龙888</p>
<p class="price">4499元起<span class="del">4999元</span></p>
</li>
<li>
<a href="#"><img src="./images/jd6.jpg" alt=""></a>
<p class="title">小米11 青春版</p>
<p>小米11青春版 轻薄</p>
<p class="price">2299元起</p>
</li>
<li>
<a href="#"><img src="./images/jd7.jpg" alt=""></a>
<p class="title">K40 游戏增强版</p>
<p>轻薄电竞设计</p>
<p class="price">1999元起</p>
</li>
<li class="last" style="padding-top:0;">
<a class="half" href="#" style="margin-bottom: 14px">
<div class="left">米家空气净化器Pro<br/><span style="color:#ff6700">1099元</span></div>
<img src="./images/jd5.jpg" alt="">
</a>
<a class="more" href="#">
<div class="left">浏览更多<br/><span style="color:rgb(185, 183, 180);font-size: 12px;">热门</span></div>
<img src="./images/youjiantou.png" alt="" style="width:50px;height:50px;margin-top:39px;margin-right: 26px;">
</a>
</li>
</ul>
</div>
</div>
<div id="first">
<a href="#" class="active">热门</a>
<div class="goods-content" style="height:614px;">
<ul class="no-left-right">
<li style="padding-top: 0;">
<a href="#" style="height: 100%;"><img src="./images/jdgg1.jpg" alt="" style="width: 100%;height: 100%;"></a>
</li>
<li>
<a href="#"><img src="./images/sj7.png" alt=""></a>
<p class="title">Note10 10 Pro</p>
<p>天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1599元起<span class="del">1699元</span></p>
</li>
<li>
<a href="#"><img src="./images/sj7.png" alt=""></a>
<p class="title">Note10 10 Pro</p>
<p>天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1599元起<span class="del">1699元</span></p>
</li>
<li>
<a href="#"><img src="./images/sj8.jpg" alt=""></a>
<p class="title">Note10 5G</p>
<p>5G小金刚，旗舰长续航</p>
<p class="price">1099元起</p>
</li>
<li>
<a href="#"><img src="./images/sj1.png" alt=""></a>
<p class="title">小米MIX FOLD</p>
<p>折叠大屏 | 自研芯片</p>
<p class="price">9999元起</p>
</li>
<li style="padding-top: 0;">
<a href="#"><img src="./images/jdgg2.jpg" alt="" style="width: 100%;height: 100%;"></a>
</li>
<li>
<a href="#"><img src="./images/sj3.jpg" alt=""></a>
<p class="title">小米11 Pro</p>
<p>1/1.12"GN2 | 骁龙888</p>
<p class="price">4499元起<span class="del">4999元</span></p>
</li>
<li>
<a href="#"><img src="./images/sj4.png" alt=""></a>
<p class="title">小米11 青春版</p>
<p>小米11青春版 轻薄</p>
<p class="price">2299元起</p>
</li>
<li>
<a href="#"><img src="./images/sj5.png" alt=""></a>
<p class="title">K40 游戏增强版</p>
<p>轻薄电竞设计</p>
<p class="price">1999元起</p>
</li>
<li>
<a href="#"><img src="./images/sj8.jpg" alt=""></a>
<p class="title">Note10 5G</p>
<p>5G小金刚，旗舰长续航</p>
<p class="price">1099元起</p>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>获取完整代码，请关注文后二维码（coding加油站）回复“小米官网1”免费获取。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
8
0- 0
已为社区贡献25条内容
所有评论(0)