侧边工具条实现 scss+requirejs（1）

最新推荐文章于 2023-06-07 14:26:06 发布

Lalala这是我的小马甲哦

最新推荐文章于 2023-06-07 14:26:06 发布

阅读量536

点赞数

分类专栏： SASS requirejs

本文链接：https://blog.csdn.net/realDE/article/details/55808146

版权

本文介绍了如何使用SCSS编写CSS样式，并结合RequireJS和jQuery实现页面的返回顶部功能。作者通过一个慕课案例复习了SCSS，并分享了三种HTML布局的优缺点。

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

慕课上的一个案例，刚刚学完scss然后找到了这个课程复习一下。顺便老师教了一下requirejs的使用。这可是我的第一个组件啊，拖了好久好久哦。

实现的效果大概是这样

三种html的布局以及优缺点：

+ 第一种是用雪碧图，通过改变hover的定位来改变图片背景。缺点是如果要更改图标需要同时更改一整张图。
+ 第二种是通过使用图标字体的方式，优点是可以随时更改图片以及颜色。布局稍微复杂一点点。
+ 第三种是通过before和after的方法，布局更简单，但是css代码更加复杂。

*下面是第一种和第二种的布局方式*

<aside class="toolbar">
        <!-- a[href="javascript:;"].toolbar-item.toolbar-item-weixin*4 -->
        <a href="javascript:;" class="toolbar-item toolbar-item-weixin">
            <span class="toolbar-layer"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a>
        <a href="javascript:;" class="toolbar-item toolbar-item-app">
            <span class="toolbar-layer"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-top" id="backTop"></a>
    </aside>

<aside class="toolbar">
    <!-- a[href="javascript:;"].toolbar-item.toolbar-item-weixin*4 -->
    <a href="javascript:;" class="toolbar-item">
        <span class="toolbar-btn">
            <i class="toolbar-icon"></