之前写的仿小米商城静态首页，基于html+css，适合初学者作为前端练习使用，注释详细，代码简洁明了易懂。
部分效果展示：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城首页</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 顶部导航 -->
</div>
<div class="top">
<div class="centre">
<div class="top-nav">
<div class="top-navigation">
<a href="#">小米商城</a>
<span class="spn">|</span>
<a href="#">MIUI</a>
<span class="spn">|</span>
<a href="#">ioT</a>
<span class="spn">|</span>
<a href="#">云服务</a>
<span class="spn">|</span>
<a href="#">金融</a>
<span class="spn">|</span>
<a href="#">有品</a>
<span class="spn">|</span>
<a href="#">小爱开放平台</a>
<span class="spn">|</span>
<a href="#">企业团购</a>
<span class="spn">|</span>
<a href="#">资质证照</a>
<span class="spn">|</span>
<a href="#">协议规则</a>
<span class="spn">|</span>
<a href="#">下载app</a>
<span class="spn">|</span>
<a href="#">Select Region</a>
</div>
<div class="top-shop">
<a href="#">购物车（0）</a>
</div>
<div class="land">
<a href="#">登陆</a>
<span class="spn">|</span>
<a href="#">注册</a>
<span class="spn">|</span>
<a href="#">消息通知</a>
</div>
</div>
</div>
</div>
<div class="centre">
<div class="logo"><img src="./images/logo-footer.png" alt=""></div>
<div class="nav">
<ul>
<li class="blank-li"></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">Redmi红米</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="search">
<input type="search" class="search-box" id="search" name="search" value="">
<input type="submit" placeholder="Search" class="search-submit" value="搜索">
</div>
</div>
<div class="centre">
<a href="#">
<img src="./images/xmad_1542593050318_TVIrS.jpg" class="commodity-img" alt="">
</a>
<div class="choose">
<ul>
<li><a href="#">手机 电话卡 <span class="choose-spn">></span></a></li>
<li><a href="#">电视 盒子<span class="choose-spn">></span></a></li>
<li><a href="#">笔记本 显示器 平板<span class="choose-spn">></span></a></li>
<li><a href="#">家电 插线板<span class="choose-spn">></span></a></li>
<li><a href="#">出行 穿戴<span class="choose-spn">></span></a></li>
<li><a href="#">智能 路由器<span class="choose-spn">></span></a></li>
<li><a href="#">电源 配件<span class="choose-spn">></span></a></li>
<li><a href="#">健康 儿童<span class="choose-spn">></span></a></li>
<li><a href="#">耳机 音箱<span class="choose-spn">></span></a></li>
<li><a href="#">生活 箱包<span class="choose-spn">></span></a></li>
</ul>
</div>
</div>
<div class="centre">
<div class="rest">
<ul>
<li><a href="#" class="rest-link">选购手机</a></li>
<li><a href="#" class="rest-link">企业团购</a></li>
<li><a href="#" class="rest-link">F码通道</a></li>
<li><a href="#" class="rest-link">米粉卡</a></li>
<li><a href="#" class="rest-link">以旧换新</a></li>
<li><a href="#" class="rest-link">话费充值</a></li>
</ul>
</div>
<div class="advertising">
<ul>
<li><a href="#"><img src="./images/xmad_15373422669527_eTZiJ.jpg" class="img1" alt=""></a></li>
<li><a href="#"><img src="./images/xmad_15381015124677_QcEGp.jpg" class="img1" alt=""></a></li>
<li><a href="#"><img src="./images/xmad_15410029988871_TdzPQ.jpg" class="img1" alt=""></a></li>
</ul>
</div>
</div>
<h2 class="title">小米闪购</h2>
<div class="centre">
<div class="seckill-box">
<div class="time-title">
<ul>
<li>
<div class="time">10：00场</div>
<img src="./images/flashpurchase.png" alt="">
<div class="over-time">距离结束还有</div>
<div class="countdown">
<div class="timebox">01</div>
<div class="box-interval">:</div>
<div class="timebox">01</div>
<div class="box-interval">:</div>
<div class="timebox">29</div>
</div>
</li>
</ul>
</div>
<div class="seckill">
<ul>
<li>
<a href="#">
<div class="seckill-1">
<p class="flag">9.9元秒杀</p>
<img src="./images/抢购图片1.jpg" alt="" class="seckill-img">
<h3 class="share-h3">小米小钢炮蓝牙音响2 白色</h3>
<p class="p-3">精简设计、专业喇叭</p>
<p class="p-4">9.9元 <span class="original-price">120元</span></p>
</div>
</a>
</li>
<li><a href="#">
<div class="seckill-1">
<p class="flag">1元秒杀</p>
<img src="./images/抢购图片3.jpg" alt="" class="seckill-img">
<h3 class="share-h3">小米移动电源2 (5000mah版)</h3>
<p class="p-3">锂聚合物电芯，轻巧便捷</p>
<p class="p-4">1元 <span class="original-price">49元</span></p>
</div>
</a>
</li>
<li><a href="#">
<div class="seckill-1">
<p class="flag">5折秒杀</p>
<img src="./images/抢购图片2.jpg" alt="" class="seckill-img">
<h3 class="share-h3">小米游戏耳机 黑色</h3>
<p class="p-3">7.1虚拟环绕立体声引擎</p>
<p class="p-4">174.5元 <span class="original-price">349元</span></p>
</div>
</a>
</li>
<li><a href="#">
<div class="seckill-1">
<p class="flag">立减250</p>
<img src="./images/抢购图片4.jpg" alt="" class="seckill-img">
<h3 class="share-h3">红米Note 5 3GB+32GB 玫瑰金</h3>
<p class="p-3">1.4um大像素 AI双摄</p>
<p class="p-4">849元 <span class="original-price">1089元</span></p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="centre">
<a href="#"><img src="./images/广告.jpg" alt="" class="advertising-img extra-config" ></a>
</div>
<div class="page-main">
<h2 class="title">手机</h2>
<div class="centre">
<div class="left-advertising">
<img src="./images/小米max3.jpg" alt="" class="left-advertising">
</div>
<div class="main-box">
<ul>
<li class="little-box">
<div class="flag flag-new">新品</div>
<a href="#">
<div>
<img src="./images/phone1.jpg" alt="" class="phone-image">
<p class="share-h3">小米8 青春版 4GB+64GB</p>
<p class="p-3">潮流镜面渐变色，2400万自拍旗舰</p>
<p class="price">1339元</p>
</div>
</a>
</li>
<li class="little-box">
<div class="flag flag-new">新品</div>
<a href="#">
<div>
<img src="./images/phone2.png" alt="" class="phone-image">
<p class="share-h3">小米8 屏幕指纹版 8GB+128GB</p>
<p class="p-3">全球首款感压屏幕指纹，双频GPS超...</p>
<p class="price">3599元</p>
</div>
</a>
</li>
<li class="little-box"><div class="flag">减 300 元</div>
<a href="#">
<div>
<img src="./images/phone3.jpg" alt="" class="phone-image">
<p class="share-h3">小米8 SE 4GB+64GB</p>
<p class="p-3">AI超感光双摄，三星AMOLED屏幕</p>
<p class="price">1499元 <span class="original-price">1799元</span></p>
</div>
</a></li>
<li class="little-box"><div class="flag">减 600 元</div>
<a href="#">
<div>
<img src="./images/phone4.jpg" alt="" class="phone-image">
<p class="share-h3">小米MIX 2S 8GB+256GB</p>
<p class="p-3">骁龙845 年度旗舰处理器，艺术品般...</p>
<p class="price">1339元 <span class="original-price">3999元</span></p>
</div>
</a></li>
<li class="little-box"><div class="flag">减 350 元</div>
<a href="#">
<div>
<img src="./images/phone5.jpg" alt="" class="phone-image">
<p class="share-h3">小米6X 6GB+128GB</p>
<p class="p-3">轻薄美观的拍照手机</p>
<p class="price">1649 <span class="original-price">1999 元</span></p>
</div>
</a></li>
<li class="little-box"><div class="flag">减 100 元</div>
<a href="#">
<div>
<img src="./images/phone6.jpg" alt="" class="phone-image">
<p class="share-h3">小米Max3 4GB+64GB</p>
<p class="p-3"></p>
<p class="price">1599元 <span class="original-price">1699元</span></p>
</div>
</a>
</li>
<li class="little-box"><div class="flag">减 130 元</div>
<a href="#">
<div>
<img src="./images/phone7.jpg" alt="" class="phone-image">
<p class="share-h3">红米6 Pro 3GB+32GB</p>
<p class="p-3"></p>
<p class="price">869元 <span class="original-price">999元</span></p>
</div>
</a>
</li>
<li class="little-box"><div class="flag">减 30 元</div>
<a href="#">
<div>
<img src="./images/phone8.jpg" alt="" class="phone-image">
<p class="share-h3">红米6A 2GB+16GB</p>
<p class="p-3"></p>
<p class="price">569元 <span class="original-price">599元</span></p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="centre">
<a href="#"><img src="./images/xmad_15421601390247_IARnQ.jpg" alt="" class="advertising-img" ></a>
</div>
<h2 class="title">周边</h2>
<div class="centre">
<div class="left-advertising">
<img src="./images/家电广告1.jpg" alt="" class="home-appliances">
<img src="./images/家电广告2.jpg" alt="" class="home-appliances">
</div>
<div class="main-box">
<ul>
<li class="little-box">
<div class="flag flag-new flag-none"></div>
<a href="#">
<div>
<img src="./images/电脑图片1.jpg" alt="" class="phone-image">
<p class="share-h3">15.6 Pro i5 8G 1050MAX-Q 256G</p>
<p class="p-3"></p>
<p class="price">6299元</p>
</div>
</a>
</li>
<li class="little-box">
<div class="flag flag-new flag-none"></div>
<a href="#">
<div>
<img src="./images/电脑图片2.jpg" alt="" class="phone-image">
<p class="share-h3">13.3"小米笔记本Air 四核i7 8G 256G</p>
<p class="p-3"></p>
<p class="price">5999元</p>
</div>
</a>
</li>
<li class="little-box">
<div class="flag flag-new">新品</div>
<a href="#">
<div>
<img src="./images/电脑图片3.png" alt="" class="phone-image">
<p class="share-h3">小米游戏本15.6"8代i7 16G 1TB</p>
<p class="p-3"></p>
<p class="price">8999元</p>
</div>
</a>
</li>
<li class="little-box">
<div class="flag flag-new flag-none"></div>
<a href="#">
<div>
<img src="./images/电脑图片4.jpg" alt="" class="phone-image">
<p class="share-h3">13.3"小米笔记本Air 四核i7 8G 256G MX150 银色</p>
<p class="p-3"></p>
<p class="price">5999元</p>
</div>
</a>
</li>
<li class="little-box">
<div class="flag flag-new flag-none"></div>
<a href="#">
<div>
<img src="./images/鼠标1.png" alt="" class="phone-image">
<p class="share-h3">小米无线鼠标</p>
<p class="p-3">耐脏亲肤涂层，人体工学设计</p>
<p class="price">69元</p>
</div>
</a>
</li>
<li class="little-box">
<div class="flag flag-new flag-none"></div>
<a href="#">
<div>
<img src="./images/鼠标2.jpg" alt="" class="phone-image">
<p class="share-h3">小米便携鼠标</p>
<p class="p-3">轻薄便携，铝合金外壳+ABS材质</p>
<p class="price">99元</p>
</div>
</a>
</li>
<li class="little-box">
<div class="flag flag-new flag-none"></div>
<a href="#">
<div>
<img src="./images/键盘1.png" alt="" class="phone-image">
<p class="share-h3">悦米机械键盘</p>
<p class="p-3">铝合金机身，TTC鸿洲，87键</p>
<p class="price">289元</p>
</div>
</a>
</li>
<li class="little-box">
<a href="#">
<div class="water">
<img src="./images/小米净水器.jpg" alt="" class="water-image">
<p class="share-h3 " style="margin-top: 5px;margin-left: 30px">小米净水器</p>
<p class="p-3"></p>
<p class="price" style="margin-top: 5px">100元</p>
</div>
</a>
<div class="little-box-none"></div>
<a href="#">
<div class="water">
<h1 class="share-h3" style="font-size: 20px;padding-right: 70px">浏览更多</h1>
<p class="p-3 character" style="padding-right: 70px">热门</p>
<img src="./images/前往.png" alt="" class="water-image2">
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="afterbody">
<div class="centre service">
<ul>
<li style="border-right: 1px solid #e0e0e0;"><a href="#">预约维修服务</a></li>
<li style="border-right: 1px solid #e0e0e0;"><a href="#">七天无理由退货</a></li>
<li style="border-right: 1px solid #e0e0e0;"><a href="#">15天免费换货</a></li>
<li style="border-right: 1px solid #e0e0e0;"><a href="#">满150元包邮</a></li>
<li><a href="#">520余家售后网点</a></li>
</ul>
</div>
<div class="centre service-link">
<ul>
<li>
<div>
<h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">帮助中心</h1>
<a href="#" class="service-a">账户管理</a>
<a href="#" class="service-a">购物指南</a>
<a href="#" class="service-a">订单操作</a>
</div>
</li>
<li>
<div>
<h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">服务支持</h1>
<a href="#" class="service-a">售后政策</a>
<a href="#" class="service-a">自助服务</a>
<a href="#" class="service-a">相关下载</a>
</div>
</li>
<li>
<div>
<h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">线下门店</h1>
<a href="#" class="service-a">小米之家</a>
<a href="#" class="service-a">服务网店</a>
<a href="#" class="service-a">授权体验店</a>
</div>
</li>
<li>
<div>
<h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">关于小米</h1>
<a href="#" class="service-a">了解小米</a>
<a href="#" class="service-a">加入小米</a>
<a href="#" class="service-a">投资者关系</a>
</div>
</li>
<li>
<div>
<h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">关注我们</h1>
<a href="#" class="service-a">新浪微博</a>
<a href="#" class="service-a">官方微信</a>
<a href="#" class="service-a">联系我们</a>
</div>
</li>
<li>
<div style="border-right: 1px solid #e0e0e0">
<h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">特色服务</h1>
<a href="#" class="service-a">F 码通道</a>
<a href="#" class="service-a">礼物码</a>
<a href="#" class="service-a">防伪查询</a>
</div>
</li>
</ul>
<div class="callme">
<p style="font-size: 22px;color: red;margin: 0 0 10px;text-align: center">400-100-5678</p>
<p style="text-align: center;color: #424242;font-size: 12px;margin: 0 0 16px">
周一至周日 8:00-18:00
<br>
（仅收市话费）
</p>
<div class="relation">
<a href="#">联系客服</a>
</div>
</div>
</div>
<div class="firm">
<div class="centre">
<p class="below-1" >
<a href="#">小米商城</a>
<span class="spn-new">|</span>
<a href="#">MIUI</a>
<span class="spn-new">|</span>
<a href="#">米家</a>
<span class="spn-new">|</span>
<a href="#">米聊</a>
<span class="spn-new">|</span>
<a href="#">多看</a>
<span class="spn-new">|</span>
<a href="#">游戏</a>
<span class="spn-new">|</span>
<a href="#">米粉卡</a>
<span class="spn-new">|</span>
<a href="#">政企服务</a>
<span class="spn-new">|</span>
<a href="#">小米天猫店</a>
<span class="spn-new">|</span>
<a href="#">隐私政策</a>
<span class="spn-new">|</span>
<a href="#">问题反馈</a>
<span class="spn-new">|</span>
<a href="#">廉正举办</a>
<span class="spspn-new">|</span>
<a href="#">select region</a>
</p>
<br>
<p class="below-2">
<a href="#">mi.com</a>
<a href="#">京ICP证110507号</a>
<a href="#">京ICP备10046444号</a>
<a href="#">京公网安备11010802020134号</a>
<a href="#">京网文[2017]1530-131号 </a>
<br>
<a href="#">（京）网械平台备字（2018）第00005号</a>
<a href="#">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a>
<a href="#">营业执照</a>
<a href="#">医疗器械公告</a>
<br>
<a href="#">违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
</p>
<div class="make-img">
<img src="./images/truste.png" alt="">
<img src="./images/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
<img src="./images/v-logo-1.png" alt="">
<img src="./images/v-logo-2.png" alt="">
<img src="./images/v-logo-3.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
整体源码可参考：
https://download.csdn.net/download/qq_44731369/12532646
扫一扫
1841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
