小米商城-主页面(静态页面)

非常适合在学习前端知识的同学们的知识巩固和细节的一个项目，由于CSS代码有点多不好展示可以下载我的CSS源代码https://blog.csdn.net/wjfckx/article/details/109114052.

如果有问题可以查看我的空间里面的资源

小米商城

小米商城-主页面(静态页面)
- 1.HTML代码
- 2.CSS代码：

话不多说先上效果图 小米商城

1.HTML代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小米闪购 - 小米商超</title><link rel="shortcut icon" href="favicon.ico" /><link rel="stylesheet" type="text/css" href="css/Sytel.css" /><link rel="stylesheet" href="css/iconfont.css" /></head><body><div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城</a> <span>|</span><a href="">MIUI</a> <span>|</span><a href="">IoT</a> <span>|</span><a href="">云服务</a> <span>|</span><a href="">金融</a> <span>|</span><a href="">有品</a> <span>|</span><a href="">小爱开放平台</a> <span>|</span><a href="">企业团购</a> <span>|</span><a href="">资质证照</a> <span>|</span><a href="">协议规则</a> <span>|</span><a href="">下载App</a> <span>|</span><a href="">智能生活</a> <span>|</span></div><div class="topbar-cart"><a href=""><i class="iconfont">&#xe63b;</i> 购物车<span> (0) </span></a></div><div class="topbar-info clearfix"><a href=""> 登录</a><span>|</span><a href="">注册</a> <span>|</span><a href="" class="sep"> 消息通知</a></div></div></div><div class="header"><div class="header-container"><div class="header-logo"><a href="#" class="lr">小米官网</a></div><div class="header-nav"><ul class="nav-list clearfix"><li class="nav-category"><a href="#">全部商品分类</a></li><li class="nav-item"><a href="#">小米手机</a></li><li class="nav-item"><a href="#">Redmi 红米</a></li><li class="nav-item"><a href="#">电视</a></li><li class="nav-item"><a href="#">笔记本</a></li><li class="nav-item"><a href="#">家电</a></li><li class="nav-item"><a href="#">路由器</a></li><li class="nav-item"><a href="#">智能硬件</a></li><li class="nav-item"><a href="#">服务</a></li><li class="nav-item"><a href="#">社区</a></li></ul></div><div class="header-search"><form action="" class="search-form"><input type="search" name="keyword" class="search-text" /><input type="submit" value="&#xe67d;" class="search-btn iconfont" /></form></div></div></div><div class="seckill"><div class="seckill-head"></div><div class="seckill-container"><div class="seckill-nav"><ul><li class="active1"><em>14:00</em> <span><em>抢购中距<br>结束 05:11:22</em></span></li><li> <em>20:00</em><span>即将开始</span></li><li> <em>22:00</em><span>即将开始</span></li><li> <em>00:00</em><span>明日开始</span></li><li> <em>10:00</em><span>明日开始</span></li></ul></div><div class="seckill-goods"><ul class="clearfix"><li><div class="bg"><img src="img/1.jpg" alt="" /></div><div class="info"><a href="#" class="name">米家无线除螨仪 白色</a><p class="tips">每个家庭都需要一台除螨仪</p><p class="price">499.00元 <del>549元</del></p><a href="#" class="btn">登录后抢购</a><p class="person">已有18人设置提醒</p></div></li><li><div class="bg"><img src="img/2.jpg" alt="" /></div><div class="info"><a href="#" class="name">小米有线耳机（K歌版） 白色 </a><p class="tips">我的私人KTV</p><p class="price">149.00元<del>169元</del></p><a href="#" class="btn">登录后抢购</a><p class="person">已有8人设置提醒</p></div></li><li><div class="bg"><img src="img/3.jpg" alt="" /></div><div class="info"><a href="#" class="name">小米移动电源3 10000mAh USB-C双向快充版 黑色</a><p class="tips">双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心</p><p class="price">99.00元 <del>129元</del></p><a href="#" class="btn">登录后抢购</a><p class="person">已有28人设置提醒</p></div></li><li><div class="bg"><img src="img/4.jpg" alt="" /></div><div class="info"><a href="#" class="name">自清洁 | 米家互联网空调 1.5匹 </a><p class="tips">变频，高效制冷热，自清洁</p><p class="price">1899.00元 <del>2399元</del></p><a href="#" class="btn">登录后抢购</a><p class="person">已有118人设置提醒</p></div></li><li><div class="bg"><img src="img/5.jpg" alt="" /></div><div class="info"><a href="#" class="name">米家空气净化器 2S </a><p class="tips">好空气看得见</p><p class="price">699.00元 <del>899元</del></p><a href="#" class="btn">登录后抢购</a><p class="person">已有18人设置提醒</p></div></li><li><div class="bg"><img src="img/6.jpg" alt="" /></div><div class="info"><a href="#" class="name">PINZTEA木柄陶瓷泡茶杯 茶水分离 380mL</a><p class="tips">尊贵高级黑/实木防烫柄/轻松清洗/精致礼盒装</p><p class="price">85.00元 <del>99元</del></p><a href="#" class="btn">登录后抢购</a><p class="person">已有28人设置提醒</p></div></li></ul></div><p class="seckill-notice">*小米秒杀活动规则：<br>1.秒杀商品是否参加活动、最终秒杀成功的商品，以订单结算页显示为准，活动包括但不限于优惠券、赠品、满减、满赠等；<br>2.秒杀商品数量有限，活动以下单支付成功为准，请加入购物车后尽快下单支付;<br>3.秒杀价不含运费，最终以订单结算页价格为准；<br>4.订单中商品的数量、颜色、型号等，以订单结算页为准。<br>温馨提示：因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，如您发现活动商品标价或促销信息有异常，请您立即联系小米客服，以便我们及时补正。</p></div></div><div class="navigation"><div class="navigation--head"><div class="seckill-container"><div class="navigation-nav clearfix"><ul class=""><li><a href="#">预约维修服务</a></li><li><a href="#">7天无理由退货</a></li><li><a href="#">15天免费换货</a></li><li><a href="#">满99元包邮</a></li><li><a href="#">520余家售后网点</a></li></ul><hr></div><!--关于我们--><div class="navigation-about clearfix"><ul class="navigation-sss"><bt>帮助中心</bt><li><a href="#">账户管理</a></li><li><a href="#">购物指南</a></li><li><a href="#">订单操作</a></li></ul><ul class="navigation-sss"><bt>服务支持</bt><li><a href="#">售后政策</a></li><li><a href="#">自助服务</a></li><li><a href="#">相关下载</a></li></ul><ul class="navigation-sss"><bt>线下门店</bt><li><a href="#">小米之家</a></li><li><a href="#">服务网点</a></li><li><a href="#">授权体验店</a></li></ul><ul class="navigation-sss"><bt>关于小米</bt><li><a href="#">了解小米</a></li><li><a href="#">加入小米</a></li><li><a href="#">投资者关系</a></li><li><a href="#">廉洁举报</a></li></ul><ul class="navigation-sss"><bt>关注我们</bt><li><a href="#">新浪微博</a></li><li><a href="#">官方微信</a></li><li><a href="#">联系我们</a></li></ul><ul class="navigation-sss"><bt>特色服务</bt><li><a href="#">F 码通道</a></li><li><a href="#">礼物码</a></li><li><a href="#">防伪 查询</a></li></ul><ul class="navigation-omn"><li><span class="dh">400-100-5678</span><br /><span class="time">8:00-18:00（仅收市话费)</span><a href="#">人工客服</a><br /><div class="xm">关注小米:</div></li></ul></div></div></div></div><div class="seckill-container"></div><div class="xo seckill-container clearfix"><div class="Xiaomi clearfix"><div class="logo rl">小米官网</div></div><div class="infomm"><p class="set"><a href="#">小米商城</a><span>|</span><a href="#">MIUI</a><span>|</span><a href="#">米家</a><span>|</span><a href="#">米聊</a><span>|</span><a href="#">多看</a><span>|</span> <a href="#">游戏</a><span>|</span><a href="#">路由器</a><span>|</span><a href="#">米粉卡</a><span>|</span><a href="#">政企服务</a><span>|</span><a href="#">小米天猫店</a><span>|</span><a href="#">小米集团隐私政策</a><span>|</span><a href="#">小米商城隐私政策</a><span>|</span><a href="#">小米商城用户协议</a><span>|</span><a href="#">问题反馈</a><span>|</span></p>
</div><p class="Xiaomi-moc seckill-container"><a href="#">© mi.com </a><a href="#">京ICP证110507号</a><a href="#">京ICP备10046444号</a><a href="#">京公网安备11010802020134号 </a><a href="#">京网文[2020]0276-042号</a><br /><a href="#">（京）网械平台备字（2018）第00005号</a><a href="#">互联网药品信息服务资格证 (京) -非经营性-2014-0090 </a><a href="#">营业执照 </a><a href="#">医疗器械公告</a> <br /><a href="#">增值电信业务许可证</a><span> 网络食品经营备案 京食药网食备202010048   食品经营许可证<br />违法和不良信息举报电话：171-5104-4404 </span><a href="#">知识产权侵权投诉 </a><span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span></p></div><div class="xo-img seckill-container "><a href="#"><img src="img/truste.png"/></a><a href="#"><img src="img/v-logo-1.png"/></a><a href="#"><img src="img/v-logo-2.png"/></a><a href="#"><img src="img/v-logo-3.png"/></a><a href="#"></a></div><div class="sol seckill-container"> <img src="img/slogan2020.png"/></div></body>
</html>

2.CSS代码：

这里只展示了顶部分类代码

iconfont的使用可以查看我的文章

body,
ul,
li {margin: 0;padding: 0;
}body {height: 100%;font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;}ul {list-style-type: none;
}a {text-decoration: none;
}.topbar {/* border: 1px solid black; */background-color: #333;height: 40px;
}.topbar a {color: #b0b0b0;font-size: 12px;
}.topbar a:hover {color: #fff;
}.container {/* border: 1px solid black; */margin: 0 auto;width: 1226px;
}.topbar-nav {float: left;height: 40px;line-height: 40px;font-size: 0;}.topbar-nav span {font-size: 12px;color: #424242;font-family: sans-serif;margin: 0.5em;
}.container::before,
.container::after,
.clearfix::before,
.clearfix::after {content: "";display: table;
}.container::after,
.clearfix::after {clear: both;
}.topbar-info,
.topbar-cart {float: right;
}.topbar-cart a {display: block;height: 40px;line-height: 40px;text-align: center;width: 120px;background-color: #424242;
}.topbar-cart a:hover {background-color: #fff;color: #ff6700;
}.topbar-cart span {margin-left: -4px;font-size: 12px;
}.topbar-cart i {font-size: 20px;line-height: 20px;margin-top: 4px;vertical-align: -4px;
}.topbar-info {margin-right: 15px;
}.topbar-info a {float: left;padding: 0 5px;height: 40px;line-height: 40px;
}.topbar-info span {float: left;font: sans-serif;font-size: 12px;color: #424242;line-height: 40px;height: 40px;
}.topbar-info .sep {padding: 0 10px;
}.header {height: 100px;}.header-container {/* border: 1px solid black;background-color: #333;height: 40px; */margin: 0 auto;width: 1226px;
}.header-logo a {display: block;width: 55px;height: 55px;background: #FF6700 url(../favicon.ico) no-repeat 50% 50%;}.header-logo {float: left;width: 62px;margin-top: 22px;height: 55px;
}.header-nav {float: left;width: 820px;height: 100px;
}.header-search {float: right;height: 50px;margin-top: 25px;width: 296px;
}.header-logo .lr {text-align: left;text-indent: -99992em;}.header-nav .nav-list .nav-category {float: left;width: 127px;padding: 0 15px 0 0;
}.header-nav .nav-list .nav-category a {display: block;text-align: right;padding: 26px 0 38px;color: #333;
}