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

相关推荐
GIS程序媛—椰子1 分钟前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山24 分钟前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享1 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf3 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨3 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL3 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1114 小时前
css实现div被图片撑开
前端·css
薛一半4 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾4 小时前
CSS综合练习——懒羊羊网页设计
前端·css
MarcoPage4 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js