文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发（侧边栏菜单生成、标签栏开发）

    页面比较简单，主要分为左侧的菜单栏，顶部的导航栏（折叠左侧菜单，切换暗黑模式，员工账号名，退出登录），再下面的标签栏，之后就是主页面显示区域。...，之后会判断这是个菜单（一级菜单）还是个页面（二级菜单），同时也支持一些只有一个二级菜单的一级菜单直接显示二级菜单，这个是否直接显示根据我们在编辑菜单时配置的alwaysShow决定，后面也会简单的说一下菜单管理的配置项...菜单栏其实就这么多东西，这里写的比较粗糙，如果有问题欢迎评论区指出。...，由于el-scrollbar也不支持鼠标滚动的时候横向滚动，所以我们只能监听鼠标滚动事件，自己写一个横向滚动的方法。...下面附上过渡效果的css .fade-transform-enter-from { opacity: 0; transform: translateX(60px); } .fade-transform-leave-to

    6.1K31

    WEB入门.九 导航菜单

    水平导航菜单分为横向文本导航和tab导航两种风格。 5.1.1 横向文本导航 横向文本导航适用于页面频道丰富且风格多样的大型网站，如网易、腾讯、MSN等，图 5.1.1即为网易首页。...横向文本导航实现思路： 使用 div搭建导航框架。网易的导航菜单主要分为站标和内容两部分，站标区不覆盖其他文字，可直接使用 img标签插入网易站标。...:6px0 0;text-align:center;}/*导航内容部分*/.globalMenu .content{float:left;width:400px;margin:5px0 0;}/*定义菜单栏样式...globalMenu .content .menu{float:left;overflow:hidden;height:36px;width:150px;border-right:1pxsolid #ccc;/*定义菜单栏目的右边框...需求说明 完成淘宝商城二级菜单/b> Ø 使用background-repeat属性设置平铺效果 需求说明 双斜角横线菜单 提示： （1） 搭建二级菜单框架，代码如下： <

    5.1K10

    WEB入门.九 导航菜单

    水平导航菜单分为横向文本导航和tab导航两种风格。 5.1.1 横向文本导航 横向文本导航适用于页面频道丰富且风格多样的大型网站，如网易、腾讯、MSN等，图 5.1.1即为网易首页。...横向文本导航实现思路： 使用 div搭建导航框架。网易的导航菜单主要分为站标和内容两部分，站标区不覆盖其他文字，可直接使用 img标签插入网易站标。...center; } /*导航内容部分*/ .globalMenu .content{ float:left; width:400px; margin:5px0 0; } /*定义菜单栏样式...float:left; overflow:hidden; height:36px; width:150px; border-right:1pxsolid #ccc;/*定义菜单栏目的右边框...​需求说明​ 完成淘宝商城二级菜单/b> Ø 使用background-repeat属性设置平铺效果​​​ ​需求说明​ 双斜角横线菜单 提示： （1） 搭建二级菜单框架，代码如下

    4K10

    butterfly-heo主题反编译日记

    点击查看更新记录 更新记录 2021-07-28:菜单栏解析 将子菜单从纵向变成横向 添加内联样式，根据子菜单数量调整偏移量 菜单栏居中 点击查看参考教程 参考方向 教程原贴 hexo-theme-butterfly-heo...此处之所以是反向解析，是因为我想的是告诉各位洪哥的改动思路，而不是单纯叫你们去抄洪哥的css,本文的最终目的是让各位既知其然亦知其所以然，能够在掌握之后开发属于自己的个性化主题。...洪哥的细节美化样式都很贴心的写在了单独的css里，以供参考:zhheoblog.css，可以说，直接引用这个样式，对洪哥的主题模拟就完成了一大半。 下文会重点解析的也是各种dom结构的更改。...顶栏菜单 洪哥的顶栏菜单，子菜单是横向排布的，且子菜单居中。 解析过程 最终改动 子菜单横向排布很好解决。...在中添加以下样式 改成横向之后，会出现一个现象，因为子菜单的显隐是由父元素的hover属性控制的，所以当我们改动UI以后，为了按子菜单，鼠标势必会有一瞬间离开父菜单。

    1.1K10

    VUE滚动条插件——vue-happy-scroll

    先张贴一张效果图： 1.jpg 说明：这里会出现横向滚动条，是因为默认是开启横向滚动条的，并且内容区域高度超出了外层盒子的宽度 下面介绍使用方法： 1、安装vue-happy-scroll 推荐使用npm...-- 引入css，该链接始终为最新版的资源 --> css...import { HappyScroll } from 'vue-happy-scroll' //自定义组件名 Vue.component('happy-scroll', HappyScroll) // 引入css...import 'vue-happy-scroll/docs/happy-scroll.css' 3、vue组件中使用  在这里就以我的小项目为例，在dashboard.vue文件中写入如下代码，使用happy-scrool...（当然如果当内部盒子宽度超出外层盒子，就会出现横向滚动条了），效果图如下： 2.jpg 4、常用属性说明 该插件可以配置常用的滚动条颜色、粗细、竖向滚动条是左还是右边显示、横向滚动条是上还是下边显示、滚动条是否开启监听容器大小变化等属性

    4.1K40

    Dash应用页面整体布局技巧

    示例1：简单的页首+内容布局 下面的例子中展示了最基础的页面布局方案，由页首及其下方的内容区域构成： 其中页首左侧部分我们可以用来放置应用的logo图片、应用名称等信息，右侧部分则可以放置一级导航菜单栏等内容...justify='space-between'实现两侧内容的左右对齐效果： 完成页首部分后，下方的内容区域则更简单了，值得注意的是，其中为了确保带有背景色的内容区容器至少充满页首之外的剩余高度，可以利用css...示例3：固定的侧边菜单栏+粘性页首+内容布局 在前面的两个例子中，我们的页面中充当导航作用的只有位于页首右侧的一级导航菜单栏，如果我们的应用功能进一步复杂起来，需要在当前一级菜单栏对应页面下再设立二级导航菜单...，经典的方式是像下面的例子那样，在原本的内容区中分出一部分宽度放置侧边菜单栏： 且为了更现代化的交互效果，新加入的侧边菜单栏是处于固定状态的，与内容区域相互独立： 要实现这样的经典页面布局效果，我们只需要在前面示例...2的基础上，将下方内容区域改造成基于fac网格系统的新布局即可： 其中涉及到固定侧边菜单栏的部分，重点在于为菜单栏容器基于calc()动态计算高度值，即扣除页首高度之后的剩余部分，并通过overflowY

    2.2K20

    CSS尺寸单位介绍

    css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。...user-scalable:是否可对页面进行缩放，no 禁止缩放 但是在pc端就麻烦了 windows： ctrl + +/- ctrl + 滚轮 浏览器菜单栏 mac： cammond + +/- 浏览器菜单栏...由于浏览器菜单栏属于系统软件权限，没发控制，我们可以通过js控制ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况 em 本人在实际开发过程中并没有使用过em...span class="child-font">我是子级文字 html代码中， 第一级，html的 font-size: 50px; 第二级...，第三级继承第二级，第四级继承第三级，以此类推 每一级都继承自它的父级，也就是说每一级的em所代表的px大小都不是固定的，因为他们的父级不是同一个，所以em的应用场景并不多。

    2.5K30

    CSS尺寸单位介绍

    user-scalable:是否可对页面进行缩放，no 禁止缩放 但是在pc端就麻烦了 windows： ctrl + +/-ctrl + 滚轮浏览器菜单栏 mac： cammond + +/-浏览器菜单栏...由于浏览器菜单栏属于系统软件权限，没发控制，我们可以通过js控制ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况 em 本人在实际开发过程中并没有使用过em...我是子级文字 html代码中， 第一级，html的 font-size: 50px; 第二级...当父级的字体大小为20px，子级的1em就是20px 当父级的字体大小为30px，子级的1em就是30px 那么说font-size存在着继承父级的特点 我们在第一级html中设置font-size，第二级继承第一级...，第三级继承第二级，第四级继承第三级，以此类推 每一级都继承自它的父级，也就是说每一级的em所代表的px大小都不是固定的，因为他们的父级不是同一个，所以em的应用场景并不多。

    2.5K20

    用Axure画出Web后台产品的菜单栏组件

    由于菜单栏比较常用并且画起来比较麻烦，建议产品经理根据本文的原型步骤制作一份菜单栏rp源文件，方便后续多个项目使用。...菜单栏通常有2级结构，第一级菜单是分类，第二级菜单是页面。一般位于页面左侧，并且是每个页面都有它。01 画出无交互原型1、先画首页文字。...6、再画二级页面。方法步骤同1和3，除了字号保持默认。根据需要复制多份二级页面。7、复制多份一级分类和二级页面。8、在左侧页面区域，添加文件夹来作为一级分类，添加页面来作为二级页面。...9、同时选择所有的菜单栏元件和顶部导航组件，然后右键点击“转换为母版”，然后命名为“菜单栏”。...总结如果页面特别多，可以采用三级菜单栏，即第一级菜单是分类，第二级菜单是分类，第三级菜单是页面。另外Axure左侧页面结构中也需要以相应的分类名称页面名称进行使用，方便开发和测试理解。

    4.1K20

    博客顶栏菜单重写

    不可思议的CSS之clip-path 本站的iconfont引入教程 iconfont inject 本站之前针对顶栏菜单做的部分魔改微调 糖果屋微调合集 复用洪哥的鼠标滚轮控制横向滚动代码 Butterfly...这回的设计灵感来源于手机端的状态栏，我想着把菜单栏选项隐藏，通过下拉拖动之类的操作来处理交互逻辑，在效果上应该会很惊艳。...我不是没想过就像以往一样只修改css样式，但是那样的工作量还不如直接重写。而且凭啥只准jerry对布局id和class动刀子？ 所以这次的魔改将是目前最劝退的教程。...另外，因为以前在微调合集里就已经改动过顶栏标题和菜单栏图标，所以这次我也保持着勤俭节约的优良传统，硬是把它们弄进来了。...重写，为避免被原生菜单栏的样式影响，class和id都换为了全新的。倒数几行的搜索图标和手机端展开图标是用的我自己的图标库，记得换成你的图标。

    1.6K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券