米家商城主题 html 页面源码分享，可用于网页设计作业

使用技术：

HTML, CSS , Javascript

项目亮点：

1. 仿照米家商城页面布局所做的页面样式结构

2. 首页放置了可自动切换的轮播图

3. 登录页有表单结构，并且有切换的动画效果

4. 包含实时的动态时间，使用 js 实现

5. 页面布局清晰，结构简单，适合初学者

  <!--导航栏开始--><div class="logoNav"><div class="logo"><img src="images/1-top/logo.jpg" /></div><ul><li><a href="./index.html">智能硬件</a></li><li><a href="./page1.html">搭配</a></li><li><a href="./page2.html">配件</a></li><li><a href="./page3.html">周边</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 class="search"><div class="hotwords"><a href="#">小米MIX</a><a href="#">小米电视3s 48英寸</a></div><input type="search" /><input type="submit" value="&#xe605;" /></div></div><!--导航栏结束--><!--轮播图栏开始--><div class="banner"><ul class="bannerPic"><li><img src="images/2-轮播栏/banner1.jpg" alt="" /></li><li><img src="images/2-轮播栏/banner2.jpg" alt="" /></li><li><img src="images/2-轮播栏/banner3.jpg" alt="" /></li><li><img src="images/2-轮播栏/banner4.jpg" alt="" /></li><li><img src="images/2-轮播栏/banner5.jpg" alt="" /></li><li><img src="images/2-轮播栏/banner1.jpg" alt="" /></li></ul><div class="bannerDot"><span></span><span></span><span></span><span></span><span></span></div><div class="menu"><ul><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="#">线材 支架 存储卡</a><span>></span></li><li><a href="#">箱包 服饰</a><span>></span></li><li><a href="#">米兔 生活周边</a><span>></span></li></ul></div><span class="arrow leftArrow">&#xe66b;</span><span class="arrow rightArrow">&#xe601;</span></div><!--轮播图栏结束--><!--图片栏开始--><div class="suggest"><ul class="app"><li><i>&#xe602;</i>选购手机</li><li><i>&#xe653;</i>企业团购</li><li><i>&#xe610;</i>一元活动</li><li><i>&#xe85e;</i>小米移动</li><li><i>&#xe666;</i>以旧换新</li><li><i>&#xe6f0;</i>话费充值</li></ul><ul class="suggestImg"><li><img src="images/2-轮播栏/1.jpg" alt="" /></li><li><img src="images/2-轮播栏/2.jpg" alt="" /></li><li><img src="images/2-轮播栏/3.jpg" alt="" /></li></ul></div><!--图片栏结束--><!--明星单品开始--><div class="star"><div class="title"><h2>小米明星单品</h2><span class="miniArrow">&#xe601;</span><span class="miniArrow">&#xe66b;</span></div><ul><li><div><img src="images/3-明星单品/1.png" alt="" /></div><div class="description"><h3>小米手机5 64GB</h3><p>四轴防抖相机，能刷公交卡、银行卡</p><h4>1799元</h4></div></li><li><div><img src="images/3-明星单品/2.png" alt="" /></div><div class="description"><h3>小米电视3s 48英寸</h3><p>原装液晶屏，金属机身</p><h4>2599元</h4></div></li>