前端demo之仿小米首页

仿小米主页demo

前几天自己借助chrome开发工具仿了一个小米官网首页，有一些基本的动态效果，用了html,css,html5,css3的知识，如下图.总结一下自己在过程中遇到的一些问题及心得体会

（1）打开浏览器乱码问题

1.chrome浏览器:下载了一个charset插件，并设置编码格式为：Unicode(utf-8)，打开chorme,右上角点击 更多工具–》扩展程序 --》开发者程序 --》加载已解压的扩展程序，然后把下载的charset插件拖进来即可。
charset下载链接:https://github.com/Shanika-hua/Chrome-Charset
2.firefox浏览器：右上角点击–》更多–》文字编码–》选择Unicode即可
3.ie浏览器：右键点击 --》编码 --》Unicode(utf-8)

（2）字体图标问题
自己常用字体图标网站有：https://icomoon.io 和 https://www.iconfont.cn/, 这次demo我用的是icomoon里的字体图标.
打开https://icomoon.io –》点击icomoon app–》点击你需要的图标–》点击Generate Font --》点击Download，这时会下载一个压缩包 解压后如图：
把fonts文件复制一份到项目里，打开demo.html.里面有下载的图标，粘贴图标下方的“小框”放到对应的html标签里。接下来在demo对应的css里添加字体声明（注意src里的路径）：
@font-face {
font-family: ‘icomoon’;
src: url(’…/fonts/icomoon.eot’);
src: url(’…/fonts/icomoon.eot?#iefix’) format(‘ ded-opentype’),
url(’…/fonts/icomoon.woff’) format(‘woff’),
url(’…/fonts/icomoon.ttf’) format(‘truetype’),
url(’…/fonts/icomoon.svg#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
注意别忘了在对应的样式里添加font-family:“icomoon”；

（3）网页 里的图标获取：通过对应的官网后输入/favicon.ico皆可获得
例如：https://www.mi.com/favicon.ico

心得：没有实现高内聚，低耦合，大量冗余的代码，和重复的代码，认识到初始化很有必要，也认识到一些demo封装的必要性。以后会慢慢的完善