小米商城-主页面(静态页面)
非常适合在学习前端知识的同学们的知识巩固和细节的一个项目，由于CSS代码有点多不好展示可以下载我的CSS源代码https://blog.csdn.net/wjfckx/article/details/109114052.
如果有问题可以查看我的空间里面的资源
话不多说先上效果图
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"></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="" 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;
}
后面我会把js代码写完大家可以实时关注我的动态
~~如果对本代码有任何意义可以联系作者~~