模拟静态小米官网html+css

静态仿小米官网(html+css)

目录

  1. 项目结构
  2. 页面截图
  3. 部分功能
  4. 完整代码下载
    在这里插入图片描述

项目结构

模拟静态小米官网html+css_第1张图片
mi.html 小米官网的首页
mi.css 小米官网首页样式表
base.css 公共样式表(存放如clearfix,默认字体,和页面大小等代码)
fa 字体图标文件夹
img 网页图片文件夹


页面截图

模拟静态小米官网html+css_第2张图片
模拟静态小米官网html+css_第3张图片
模拟静态小米官网html+css_第4张图片
模拟静态小米官网html+css_第5张图片
模拟静态小米官网html+css_第6张图片
模拟静态小米官网html+css_第7张图片
模拟静态小米官网html+css_第8张图片


部分功能

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

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

在这里插入图片描述
效果图:
在这里插入图片描述
二、顶部导航栏下载App超链接hover时弹出二维码:
1.html代码:
模拟静态小米官网html+css_第10张图片
css代码:
模拟静态小米官网html+css_第11张图片
模拟静态小米官网html+css_第12张图片
模拟静态小米官网html+css_第13张图片
效果图:
模拟静态小米官网html+css_第14张图片

对于我们这种新手来说难点应该就是在于图片上小三角的设置,对此我也单独写了实现三角的代码:
模拟静态小米官网html+css_第15张图片
同理在后面的购物车下拉栏也是通过这种方式去实现。

三、轮播图下的链接模块:
难点应该只存在于第一个小模块,其他都是图片
模拟静态小米官网html+css_第16张图片
html代码:
模拟静态小米官网html+css_第17张图片
css代码:
模拟静态小米官网html+css_第18张图片
模拟静态小米官网html+css_第19张图片
模拟静态小米官网html+css_第20张图片
在这里插入图片描述
四、首页左上角小米图标hover时左滑的效果
模拟静态小米官网html+css_第21张图片
html代码:
模拟静态小米官网html+css_第22张图片
css代码:
模拟静态小米官网html+css_第23张图片
模拟静态小米官网html+css_第24张图片
五.家电模块最后一栏上下两个模块实现代码
模拟静态小米官网html+css_第25张图片
html:
模拟静态小米官网html+css_第26张图片
css:
模拟静态小米官网html+css_第27张图片
模拟静态小米官网html+css_第28张图片
模拟静态小米官网html+css_第29张图片
六.页脚

模拟静态小米官网html+css_第30张图片
html:
模拟静态小米官网html+css_第31张图片
模拟静态小米官网html+css_第32张图片
模拟静态小米官网html+css_第33张图片
模拟静态小米官网html+css_第34张图片
模拟静态小米官网html+css_第35张图片
模拟静态小米官网html+css_第36张图片
css:
模拟静态小米官网html+css_第37张图片
模拟静态小米官网html+css_第38张图片
模拟静态小米官网html+css_第39张图片
模拟静态小米官网html+css_第40张图片
模拟静态小米官网html+css_第41张图片
模拟静态小米官网html+css_第42张图片
模拟静态小米官网html+css_第43张图片
模拟静态小米官网html+css_第44张图片

完整代码下载

百度网盘链接

你可能感兴趣的:(html,css,html5)