米家商城主题 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>