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

最新推荐文章于 2024-08-17 18:47:23 发布

LSYHhhhh

最新推荐文章于 2024-08-17 18:47:23 发布

阅读量1.5w

点赞数 23

分类专栏：项目学习

本文链接：https://blog.csdn.net/qq_33961117/article/details/82997480

版权

本文主要介绍了在搭建小米商城首页时的一些关键技巧，包括第三方字体库如fontawesome和iconfont的使用，字段间分割线的样式实现，网站reset操作，鼠标悬浮效果的创建，以及块元素的颜色和位置调整等。特别强调了悬浮效果中利用相对和绝对定位进行布局的方法，并提示可以添加过渡动画增强用户体验。

摘要由CSDN通过智能技术生成

目录

第三方字体样式

字段间分割线的样式实现

搭建网站前的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