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

使用技术:

HTML, CSS , Javascript

项目亮点:

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

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

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

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

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

html 复制代码
  <!--导航栏开始-->
    <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>
  

相关推荐
雯0609~9 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ13 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z18 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜42 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40443 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish43 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省1 小时前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript