前端700行代码项目练习--小米官网（仅html、css实现）

comegoing-归去兮来

已于 2023-12-06 15:50:54 修改

阅读量926

点赞数 1

分类专栏：前端项目文章标签：前端 css3 css html html5

于 2022-08-29 20:28:15 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/126579074

版权

前端项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、效果展示

二、准备工具

1、css重置样式

请自行查找，CSDN上一般是代码形式，可以自己写入css文件后引入

2、awesome图标字体

需要访问awesome官网下载包，请看这篇文章

https://blog.csdn.net/comegoing_xin_lv/article/details/126184726?spm=1001.2014.3001.5501

3、各图片

这些图片都可以在网上自行下载

4、title网站图标

通过在网站链接加后缀/favicon.ico查看到title图标

三、代码

注意：这里仅给出html参考

tips：这里我把网盘链接放这里，所有文件都在里面

链接：https://pan.baidu.com/s/1cCj3KgCJjXIhWufj-fdrHg?pwd=2022
提取码：2022

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米官网</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./src/base.min.css" />
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./src/reset.min.css" />
    <!-- 引入awesome-font -->
    <link rel="stylesheet" href="../mi/src/css/all.css" />
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="./index.min.css" />
    <!-- 引入网站title显示图标 -->
    <link rel="icon" href="./src/img/favicon.ico">
  </head>
  <body>
    <!-- 顶部导航 -->
    <div class="top">
      <!-- 顶部内容区域 -->
      <div class="top-background w">
        <!-- 左侧小米服务 -->
        <div class="service">
          <ul class="top-ul-left clearfix">
            <li><a href="javascript:;">小米官网</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">小米商城</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">MIUI</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">loT</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">云服务</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">天星数科</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">有品</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">小爱开放平台</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">企业团购</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">资质证照</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">协议规则</a></li>
            <span class="ver-line">|</span>
            <!-- 二维码链接 -->
            <li>
              <a href="javascript:;" class="download">下载app
                <div class="download-box">
                  <img src="./src/img/ma.png" alt="二维码" />小米官方APP
                </div>
              </a>
            </li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">Select Location</a></li>
          </ul>
        </div>

        <!-- 右侧购物车与用户相关 -->
        <div class="user-info">
          <!-- 右侧用户相关 -->
          <ul class="top-ul-right clearfix">
            <li><a href="javascript:;">登录</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">注册</a></li>
            <span class="ver-line">|</span>
            <li><a href="javascript:;">消息通知</a></li>
          </ul>

          <!-- 右侧购物车 -->
          <div class="shopping">
            <!-- 购物车按钮块 -->
            <a href="javascript:;" class="fa-shopping-cart fas">购物车( 0 )</a>

            <!-- 购物车下拉框 -->
            <div class="shopping-box">购物车中还没有商品，快去添加吧！</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 中间搜索层 -->
    <header>
      <!-- 中间搜索层背景 -->
      <div class="middle-background clearfix w">
      <!-- 左侧logo -->
        <div class="middle-left clearfix">
          <a href="javascript:;" class="none-light"></a>
          <a href="javascript::" class="light"></a>
        </div>

      <!-- 中间详细信息 -->
      <div class="middle-center">
        <ul class="goods-info">
          <li><a href="javascript:;">全部商品分类</a></li>
          <li class="show-goods"><a href="javascript:;">Xiaomi手机</a></li>
          <li class="show-goods"><a href="javascript:;">Redmi手机</a></li>
          <li class="show-goods"><a href="javascript:;">电视</a></li>
          <li class="show-goods"><a href="javascript:;">笔记本</a></li>
          <li class="show-goods"><a href="javascript:;">平板</a></li>
          <li class="show-goods"><a href="javascript:;">家电</a></li>
          <li class="show-goods"><a href="javascript:;">路由器</a></li>
          <li><a href="javascript:;">服务中心</a></li>
          <li><a href="javascript:;">社区</a></li>
          <div class="goods-box"></div>
        </ul>
      </div>

      <!-- 右侧搜索框 -->
      <div class="middle-right clearfix">
        <!-- 搜索框盒子 -->
        <div class="search-box">
          <!-- 搜索框主体 -->
          <form action="javascript:;">
            <!-- 搜索框 -->
            <input type="text" name="search" class="search" />

            <!-- 按钮 -->
            <button class="enter">
              <i class="fas fa-search"></i>
            </button>
          </form>
        </div>  
      </div>
    </header>
      
    <!--  主体内容区 -->
    <main>
      <!-- 主体背景区 -->
      <div class="body-background clearfix w">
        <!-- 左侧购物信息 -->
        <div class="body-info">
          <ul>
            <li><a href="javascript:;">手机<i class="fa-angle-right fas"></i></a></li>
            <li><a href="javascript:;">电视<i class="fa-angle-right fas"></i></a></li>
            <li><a href="javascript:;">笔记本 平板<i class="fa-angle-right fas"></i></a></li>
            <li><a href="javascript:;">出行 穿戴<i class="fa-angle-right fas"></i></a></li>
            <li><a href="javascript:;">耳机 音响<i class="fa-angle-right fas"></i></a></li>
            <li><a href="javascript:;">家电<i class="fa-angle-right fas"></i></a></li>
            <li><a href="javascript:;">智能 路由器<i class="fa-angle-right fas"></i></a></li>
            <li><a href="javascript:;">电源 配件<i class="fa-angle-right fas"></i></a></li>
            <li><a href="javascript:;">健康 儿童<i class="fa-angle-right fas"></i></a></li>
            <li><a href="javascript:;">生活 箱包<i class="fa-angle-right fas"></i></a></li>
          </ul>
        </div>
        <!-- 右侧图片区域 -->
        <div class="body-img">
          <ul class="content-img">
            <li class="photo1"><a href="javascript:;"><img src="./src/img/1.jpg" alt=""></a></li>
            <li class="photo2"><a href="javascript:;"><img src="./src/img/2.webp" alt=""></a></li>
            <li class="photo3"><a href="javascript:;"><img src="./src/img/3.webp" alt=""></a></li>
            <li class="photo4"><a href="javascript:;"><img src="./src/img/4.webp" alt=""></a></li>
          </ul>
          <ul class="point">
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
          </ul>
        </div>
      </div>
    </main>

    <footer>
      <div class="bottom-background w clearfix">
        <div class="small-info">
          <ul class="top-info">
            <li class="service-info"><a href=""><i class="fas fa-history"></i>保障服务</a></li>
            <li class="service-info"><a href=""><i class="fas fa-city"></i>企业团购</a></li>
            <li class="service-info"><a href=""><i class="fas fa-seedling"></i>慈善捐赠</a></li>
          </ul>
          <ul class="bottom-info">
            <li class="service-info"><a href=""><i class="fas fa-sd-card"></i>米粉卡</a></li>
            <li class="service-info"><a href=""><i class="fas fa-exchange-alt"></i>以旧换新</a></li>
            <li class="service-info"><a href=""><i class="fas fa-mobile-alt"></i>话费充值</a></li>
          </ul>
        </div>
        <div class="extra-goods">
          <ul>
            <li><a href=""><img src="./src/img/3.webp" alt=""></a></li>
            <li><a href=""><img src="./src/img/2.webp" alt=""></a></li>
            <li><a href=""><img src="./src/img/1.jpg" alt=""></a></li>
          </ul>
        </div>
      </div>
    </footer>

    <div class="txt-info">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>