CSS+HTML - 搭建小米商城首页 - 总结

目录

第三方字体样式

字段间分割线的样式实现

搭建网站前的reset操作

鼠标悬浮出现浮框

- 购物车部分例子

- 重点步骤总结

块与块之间的分割线

块颜色的根据位置不同而不同

悬浮上移+阴影

---

第三方字体样式

fontawesome - 字体库

iconfont - 字体库

在浏览器中按f12打开【开发人员工具】，找到【console(控制台)】
输入以下代码，再按回车，稍等片刻即可把全部图标加入购物车
var ll = document.getElementsByClassName('icon-gouwuche1'); for (var i=0; i<ll.length;i++){ ll[i].click(); }

字段间分割线的样式实现

<div class="topbar-nav">
	<a href="javascript:void(0)">小米商城</a>
	<span>|</span>
	<a href="javascript:void(0)">MIUI</a>
	<span>|</span>
	<a href="javascript:void(0)">IoT</a>
	<span>|</span>
	<a href="javascript:void(0)">云服务</a>
	<span>|</span>
	<a href="javascript:void(0)">金融</a>
	<span>|</span>
	<a href="javascript:void(0)">有品&l