本文展示了如何使用HTML5和CSS构建小米商城的静态界面，虽然没有使用JavaScript，但通过CSS实现了基本的样式和布局。内容包括HTML结构和CSS代码，适合初学者学习。
这是小米商城的无JS版本（纯静态页面）——如下：
<!DOCTYP1E html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/xiaomi.css">
<style type="text/css"></style>
</head>
<body>
<!--主体部分-->
<div class="app">
<!-- 回到顶部的锚-->
<div id="toAnchor"></div>
<div class="header">
<!-- 顶部栏-->
<div class="site-topbar">
<div class="container">
<div class="site-topbar-nav">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">MIUI</a>
<span class="sep">|</span>
<a href="#">IoT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">天星数科</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
<a href="#">小爱开放平台</a>
<span class="sep">|</span>
<a href="#">企业团购</a>
<span class="sep">|</span>
<a href="#">资质证照</a>
<span class="sep">|</span>
<a href="#">协议规则</a>
<span class="sep">|</span>
<a href="#">下载app</a>
<span class="sep">|</span>
<a href="#">智能生活</a>
<span class="sep">|</span>
<a href="#">Select Location</a>
</div>
<div class="J_miniCartTrigger">
<a href="#">购物车</a>
</div>
<div class="J_siteUserInfo">
<a href="#">登录</a>
<span class="sep">|</span>
<a href="#">注册</a>
<span class="sep">|</span>
<span class="message"><a href="#">消息通知</a></span>
</div>
</div>
</div>
<div class="site-header">
<div class="container">
<div class="header-logo">
<a href="#">
<img src="img/xiaomi_logo.PNG">
</a>
</div>
<div class="header-nav">
<ul class="nav-list J_navMainList clearfix">
<li id="J_navCategory">
</li>
<li>
<a href="#"><span>小米手机</span></a>
</li>
<li>
<a href="#"><span>Redmi红米</span></a>
</li>
<li>
<a href="#"><span>电视</span></a>
</li>
<li>
<a href="#"><span>笔记本</span></a>
</li>
<li>
<a href="#"><span>家电</span></a>
</li>
<li>
<a href="#"><span>路由器</span></a>
</li>
<li>
<a href="#"><span>智能硬件</span></a>
</li>
<li>
<a href="#"><span>服务</span></a>
</li>
<li>
<a href="#"><span>社区</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="header-search">
<form>
<input type="text" name="" class="content">
<input type="submit" name="" value="搜索" class="search">
</form>
</div>
</div>
<!-- 首页中间那块-->
<div class="home-hero">
<div class="swiper-wrapper">
<div class="site-category">
<div class="site-category-padding">
<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>
<li>
<a href="">健康 儿童</a>
</li>
<li>
<a href="">耳机 音箱</a>
</li>
<li>
<a href="">生活 箱包</a>
</li>
</div>
</div>
<div class="site-category-bigimg">
<a href=""><img src="img/big-img.jpg"></a>
</div>
</div>
<div class="home-hero-sub-row">
<div class="span4">
<ul>
<li><a><img src="img/小米秒杀.png"><span>小米秒杀</span></a></li>
<li><a><img src="img/企业团购.png"><span>企业团购</span></a></li>
<li><a><img src="img/F码通道.png"><span>F码通道</span></a></li>
<li><a><img src="img/米粉卡.png"><span>米粉卡</span></a></li>
<li><a><img src="img/以旧换新.png"><span>以旧换新</span></a></li>
<li><a><img src="img/话费充值.png"><span>话费充值</span></a></li>
</ul>
</div>
<div class="span16">
<ul>
<li><a href="#"><img src="img/Redmi.jpg"></a></li>
<li><a href="#"><img src="img/小米11.jpg"></a></li>
<li><a href="#"><img src="img/xiaomi-switch.jpg"></a></li>
</ul>
</div>
</div>
</div>
<!-- 小米秒杀 类似模块-->
<div class="page-main-home-main">
<div class="home-flashsale-xm-plain-box">
<div class="box-hd">
<h2>小米秒杀</h2>
</div>
<div class="row">
<div class="row-finish">
<div class="round">10:00场</div>
<img src="img/闪电.PNG">
<div class="desc">距离结束还有</div>
<div class="countdown">
<span>02</span>
<i>:</i>
<span>23</span>
<i>:</i>
<span>45</span>
</div>
</div>
<div class="row-img">
<li><a href="#"><img src="img/秒杀牙刷.PNG"></a></li>
<li><a href="#"><img src="img/秒杀划船机.PNG"></a></li>
<li><a href="#"><img src="img/秒杀枕头.PNG"></a></li>
<li><a href="#"><img src="img/秒杀积木.PNG"></a></li>
</div>
</div>
</div>
<div class="home-banner-box">
<a href="#"><img src="img/小米长图.PNG"></a>
</div>
<div class="home-brick-box">
<div class="box-hd">
<h2>手机</h2>
<div class="more">
<a href="#">查看更多</a>
</div>
</div>
<div class="row">
<div class="span4">
<a href="#"><img src="img/小米折叠屏手机.webp"></a>
</div>
<div class="span16">
<ul class="rick-list">
<li>
<a href="#">
<div class="figure">
<img src="img/小米MIXFOLD.webp">
</div>
<h3>小米MIX FOLD</h3>
<p>折叠大屏 | 自研芯片</p>
<p class="price"><span>9999</span>元<span>起</span></p>
</a>
</li>
<li>
<a href="#">
<div class="figure">
<img src="img/小米11Ultra.webp">
</div>
<h3>小米11 Ultra</h3>
<p>1.12''GN2｜2K四微曲屏</p>
<p class="price"><span>5999</span>元<span>起</span></p>
</a>
</li>
<li>
<a href="#">
<div class="figure">
<img src="img/小米11Pro.webp">
</div>
<h3>小米11 Pro</h3>
<p>1.12''GN2｜骁龙888</p>
<p class="price"><span>4999</span>元<span>起</span></p>
</a>
</li>
<li>
<a href="#">
<div class="figure">
<img src="img/小米11青春版.webp">
</div>
<h3>小米11 青春版</h3>
<p>小米11 青春版 轻薄</p>
<p class="price"><span>2299</span>元<span>起</span></p>
</a>
</li>
<li>
<a href="#">
<div class="figure">
<img src="img/黑鲨4Pro.webp">
</div>
<h3>黑鲨4 Pro</h3>
<p>黑鲨4 Pro</p>
<p class="price"><span>3999</span>元<span>起</span></p>
</a>
</li>
<li>
<a href="#">
<div class="figure">
<img src="img/黑鲨4.webp">
</div>
<h3>黑鲨4</h3>
<p>黑鲨4 磁动力升降肩键</p>
<p class="price"><span>2499</span>元<span>起</span></p>
</a>
</li>
<li>
<a href="#">
<div class="figure">
<img src="img/小米10S.webp">
</div>
<h3>小米10S</h3>
<p>骁龙870 | 对称式双扬立体声</p>
<p class="price"><span>3299</span>元<span>起</span></p>
</a>
</li
最低0.47元/天 解锁文章
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
