模拟静态小米官网html+css

Posted 2021-06-01 kai-z

静态仿小米官网（html+css）

目录

1. 项目结构
2. 页面截图
3. 部分功能
4. 完整代码下载
   

---

项目结构

mi.html 小米官网的首页
mi.css 小米官网首页样式表
base.css 公共样式表（存放如clearfix，默认字体，和页面大小等代码）
fa 字体图标文件夹
img 网页图片文件夹

---

页面截图

---

部分功能

一、网页title小图标设置方式：

1.网站图标一般存在网站的根目录下
名字一般叫favicon.ico,在浏览器输入
www.mi.com/favicon.ico即可下载到图标存在本地
2.在本地项目的mi.html里用link标签去引入图标，打开浏览器，标题上就有了小图标

效果图：

二、顶部导航栏下载App超链接hover时弹出二维码：
1.html代码：

css代码：



效果图：

对于我们这种新手来说难点应该就是在于图片上小三角的设置，对此我也单独写了实现三角的代码:

同理在后面的购物车下拉栏也是通过这种方式去实现。

三、轮播图下的链接模块：
难点应该只存在于第一个小模块，其他都是图片

html代码：

css代码：




四、首页左上角小米图标hover时左滑的效果

html代码：

css代码：


五.家电模块最后一栏上下两个模块实现代码

html:

css：



六.页脚

html:






css：

完整代码下载

百度网盘链接