一、效果展示

二、准备工具

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>

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

电商项目：仿小米官网纯HTML+css布局
前言时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
Web项目实战分享——小米官网
Web项目实战分享--小米官网大约每个学习过前端的学习者来说,都接触过web项目的实战,业内最真实的的,应该是自己独立编写一个网页项目,当然如果你是大佬的话,这只是小菜一碟,而如果你是小白或正在学习 ...
前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...
仿照小米官网项目具体操作与细节
本项目已上传github 有需要的可以下载点这里前往下载小米官网项目具体操作 1.gulp的搭建一 , 打开node控制台命令行输入 cd 加文件夹路径进入当前文件夹命令行输入 cnpm ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
项目一：《小米官网》
一.项目介绍 "小米旗舰商城".二十一世纪是网络休闲生活的时代,在这互联网时代, 网络销售已经变成了现在较大的-一个营销模式.如今信息网络的发展可以说是一日千里,透过网络的运用,可 ...
项目一：《小米官网》jQuery重构
小米官网项目的整体布局就不多说了,在项目一:<小米官网>中我就写过了,我就是直接复制粘贴的之前的 html 和 css,只是把JS部分用jQuery重新写了一遍,不想打字了,直接分享下我的 ...
小米官网首屏纯css代码
小米官网首屏代码(纯CSS编写) ** 1.html部分: ** 小米商城  <div class="top-bar w"> ...

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