文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

动手练一练，做一个响应式的后台管理面板

媒介查询等响应式相关的知识点；菜单折叠的问题，这里需要通过JS脚本来触发菜单文本和logo的隐藏；小屏设备菜单的按钮，我们默认隐藏在左边的菜单里，通过媒介查询器触发显示，并需要在按钮上添加JS事件，触发菜单的打开与隐藏...4、接下来编写 Section 的 HTML 结构 这里包含两个Section区域 Section #1 这部分包含两块，一个 搜索区域的表单 和 管理员头像 部分，下图为 screens (>767px...这个界面只会在大屏的状态下可见，当菜单折叠时，菜单的宽度将由 220px 变成 40px，菜单的名称将会隐藏，右边的 .page-content 区域面积将会变大，我们将其宽度变成 calc(100%...的菜单会隐藏，如下图所示，通过点击按钮的形式打开菜单： ?...元素则设置成隐藏状态 .search-and-user 搜索表单和用户头像区域则使用绝对定位的方式放置在 mobile 菜单按钮的右侧 相关的CSS代码如下所示： @media screen and (

1.3K10

动手练一练，做一个现代化、响应式的后台管理首页

2、当屏幕宽度 < 767px 时，界面交互如下视频所示： 由于界面有限，菜单被隐藏，通过点击按钮展开或隐藏菜单。...关于响应式需要用到 flexbox 、 grid 布局，rem单位、vw和vh视口单位、媒介选择器等；菜单折叠的问题，这里需要通过JS脚本来触发菜单文本和logo的隐藏；小屏设备菜单的按钮，我们默认隐藏在左边的菜单里...4、接下来编写 Section 的 HTML 结构 这里包含两个Section区域 Section #1 这部分包含两块，一个 搜索区域的表单 和 管理员头像 部分，下图为 screens (>767px...当我们每次点击菜单的 折叠/展开 按钮时，菜单将会折叠, 如下图所示： 这个界面只会在大屏的状态下可见，当菜单折叠时，菜单的宽度将由 220px 变成 40px，菜单的名称将会隐藏，右边的 .page-content...元素则设置成隐藏状态 .search-and-user 搜索表单和用户头像区域则使用绝对定位的方式放置在 mobile 菜单按钮的右侧 相关的CSS代码如下所示： @media screen and (

1.1K00
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    超全面的 UI 工作流程指南（三）：设计规范

    例如是 750*1334，还是 375*667，每个公司设计的基准都不一样，所以设计尺寸并没有规定只能用某一个尺寸，我们在设计时，使用的 1 倍图为基准进行设计的，基准尺寸为 375*667。...常用的 UI 控件（Control）：按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。 以下列举一些我们在 APP 设计规范中整理的内容。...输入框 用于单行信息录入文字上下居中显示，支持键盘录入和剪切板输入文本，对特定格式的文本进行处理：密码隐藏显示、身份证、卡号分段显示，标注宽高。 3....当然，Figma 也同样具备这样的能力，你所创建的组件都存在于 Assets 中。 缺省页面 空状态页面：显示对应的页面空状态的图标，增加相应的引导按钮。...但值得注意的是，设计规范并不是「圣经」，不要因为规范而限制了自己的思维，当发现规范有问题的时候，要及时去修正，而不是做了一次之后，一直沿用，永不修改。

    1.8K40

    一张图解析 FastAdmin 中的表格列表

    通用搜索 4. 工具栏按钮 5. 动态渲染统计信息 6. 快速搜索 7. 浏览模式、显示隐藏列、导出、通用搜索 9. 复选框 10. 分类名称(关联查询) 11. 标志 12. 图片和图片组 13....动态渲染统计信息 ---- 有些时候需要在页面额外显示服务端传回的动态数据，比如: 数据合计。...快速搜索 ---- 快速搜索查询条件: where 字段 like '%关键词%' 快速搜索在键入关键词时将实时从服务端搜索数据，当数据表数据较大时，建议关闭此功能（在表格初始化时关闭） 默认只会搜索主键...浏览模式、显示隐藏列、导出、通用搜索 ---- 浏览模式可以切换卡片视图和表格视图两种模式，关闭此功能使用: showToggle: false 显示隐藏列可以快速切换字段列的显示和隐藏，关闭此功能使用...: showColumns: false 导出按钮默认将导出整个表的所有行，关闭导出功能使用: showExport: false 通用搜索指表格上方的搜索，关闭此功能使用: commonSearch:

    5.1K10

    终于等到你，新的虚拟键盘API 即将到来，快来先睹为快吧！

    在技术术语中，可见部分被称为视口，而隐藏部分以及当前可见的部分则是布局视口。 主要问题是当虚拟键盘激活时，可视视口的大小会缩小。...使用虚拟键盘API修复键盘下隐藏的内容 由于虚拟键盘API的存在，我们可以定义视觉和布局视口相等。...当输入框处于活动状态时，结账按钮将位于虚拟键盘下方，因此被隐藏起来。 我们可以轻松地通过虚拟键盘API来解决这个问题。...为桌面使用不同的值 假设我们想在桌面浏览器上进一步调整浮动按钮的位置，我们该如何做呢？嗯，我考虑使用 max() 比较函数，结果行得通。...： 明智地使用虚拟键盘API 只有在需要的时候才应该使用虚拟键盘。

    37020

    iPad Safari多窗口视图分析和实现思路

    2019年苹果更新了 iPad mini 和 Air 的产品线，iPad 算是个相当好用的产品，比起 iPhone ，部分型号允许你外接键盘、使用触控笔等硬件来提升生产力，那么我们从软件应用开发角度可以如何帮助用户提升生产力呢...在手机上，由于屏幕空间有限，点击窗口管理的按钮可以看到手机上采用了一种视图层叠的效果，有点模拟从一个实体文件夹中翻查文件的感觉。...另外我们可以看到缩略图的顶部有一个标题栏和一个关闭按钮，在双指缩放放大的过程中我们可以看到一个临界点，超过这个临界点的时候标题栏会渐隐，露出原本页面截图顶部的搜索栏和标签栏。...来使得新 vc 的 view 正好充满整个视口。...当从大纲视图回到具体页面，同样可以通过操作 zoomScale和 contentOffset 来使得截图铺满视口，完成后再操作实际 ViewController 的 view 带到视图顶层，再把截图卸载

    4.1K30

    dataTable参数说明

    无 searching 控制控件的搜索功能,如果为false,控件的搜索功能被完全禁用,而且默认搜索组件会被隐藏....Boolean true serverSide 当设为true时,列表的过滤,搜索和排序信息会传递到Server端进行处理,实现真翻页方案的必需属性.反之,所有的列表功能都在客户端计算并执行...参数作用类似,但效果有所不同.仅当 serverSide参数为true的时候,参数属性才有意义,当serverSide开启,DataTables组件会自行封装一个信息类发送给服务 端,而ajax.data...,注意在默认设置下,所有列的数据都会参与过滤.比如当这个属性为”a”的时候,任何一个列只要包含”a”的行就会被显示.为空表示全部 String 无 search.caseInsensitive...search.smart 禁用获取启用DataTables控件内置的只能过滤算法,这个算法会把搜索字符串进行分割并只能搜索,关闭这个算法仅仅实现简单的字符串查找,false为关闭 Boolean

    4.6K20

    超全面的 UI 工作流程指南（三）：设计规范

    例如是 750*1334，还是 375*667，每个公司设计的基准都不一样，所以设计尺寸并没有规定只能用某一个尺寸，我们在设计时，使用的 1 倍图为基准进行设计的，基准尺寸为 375*667。...常用的 UI 控件（Control）：按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。 以下列举一些我们在 APP 设计规范中整理的内容。...输入框 用于单行信息录入文字上下居中显示，支持键盘录入和剪切板输入文本，对特定格式的文本进行处理：密码隐藏显示、身份证、卡号分段显示，标注宽高。 3....当然，Figma 也同样具备这样的能力，你所创建的组件都存在于 Assets 中。 缺省页面 空状态页面：显示对应的页面空状态的图标，增加相应的引导按钮。...但值得注意的是，设计规范并不是「圣经」，不要因为规范而限制了自己的思维，当发现规范有问题的时候，要及时去修正，而不是做了一次之后，一直沿用，永不修改。

    4.7K32

    Windows快捷键速查

    Alt + Tab 在打开的应用之间切换。 Alt + F4 关闭活动项，或者退出活动应用。 Windows 徽标键 + L 锁定你的电脑。 Windows 徽标键 + D 显示和隐藏桌面。...Windows 徽标键 + Shift + C 打开超级按钮菜单。 Windows 徽标键 + D 显示和隐藏桌面。 Windows 徽标键 + Alt + D 显示和隐藏桌面上的日期和时间。...Ctrl + Home（历史记录导航） 如果命令行为空，则将视区移动到缓冲区顶部。否则，请删除命令行中光标左侧的所有字符。...Ctrl + End（历史记录导航） 如果命令行为空，则将视区移动到命令行。 否则，请删除命令行中光标右侧的所有字符。 6. 对话框 快捷键 说明 F4 显示活动列表中的项目。...箭头键 如果活动选项是一组选项按钮，请选择一个按钮。 7. 文件资源管理器 快捷键 说明 Alt + D 选择地址栏。 Ctrl + E 选择搜索框。 Ctrl + F 选择搜索框。

    4.3K20

    Android 天气APP（二十八）地图搜索定位

    而我在开始动画的时候也加了一个对于定位按钮的判断，因为这个控件和定位按钮在同一水平线上，又因为底层的布局用的是FrameLayout,所以会出现覆盖的情况，这并不是我想要的，所以我加了一个控制，如果展开的时候处于手动定位则隐藏自动定位按钮...相信你已经知道了，好的，我在点击搜索的时候获取输入框的内容，为空则提示一下，不为空就获取内容，那么获取到的内容要怎么办呢？首先想一下获取到的是什么内容？当然是城市的名称了，可以是区/县、市。...OK，我们还需要与这个底部控件做协调，比如我们之前有过这样一个操作就是当手动定位时，拖动底部布局到顶部然后隐藏这个按钮，回到底部时显示这个按钮，那么同理我是不是也应该对这个搜索布局做同样的事呢？...展开这里稍微讲解一下，因为展开的时候我并不知道你的搜索布局是否展开，所以加了一个判断，如果你的搜索布局是展开的，那么先收缩的搜索布局，再隐藏的搜索布局，这里新开了一个延时线程，500毫秒后执行隐藏动画，...因为搜索布局收缩的过渡动画设置的时间就是500毫秒，这样就能做到无缝连接了，有没有恍然不明白的感觉啊？同样，如果底部布局展开时，搜索布局没有展开则直接隐藏即可。那么再来运行一下看看效果如何？

    97510

    干货：AutoHotkey电脑按键神器介绍，游戏玩家必备

    事实上任何的按键、按钮或组合键都可以被设置为热键;● 可以对Windows各类型窗口进行匹配以及相关属性调整(例如：透明、隐藏、置顶、改变大小等);● 当键入您自定义的缩写时可以 扩展缩写。...三、其他实用功能●  关闭或屏蔽Windows自有的快捷键，例如Win+E和Win+R；●  取替Alt-Tab(通过按键、鼠标滚轮或按钮)从而减轻RSI（肢体重复性劳损）；●  本机代码互操作：●  ...存在、隐藏等）； 可以获取窗口的标题、ahk_class、文字等相关信息方便鼠标等操作； 可以对窗口进行激活、隐藏、关闭、强制关闭、等待等相关操作；●  其他： 可以获取系统环境（如幕分辨率、多显示器信息...例如，当您不希望见到的窗口出现时自动关闭它们；●  可以设置定时器并启用、停用该项目；●  检测系统空闲时间。例如,在系统空闲的时候执行高CPU负荷的任务；●  你只要有想像力，它可以完成更多工作。...五、案例介绍5.1 热键Ctrl + Shift + C 可以用Bing搜索选中的文字; 热键Ctrl + Shift + C 可以用Bing搜索选中的文字^+c::{ Send, ^c Sleep 50

    41230

    使用Puppeteer爬取地图上的用户评价和评论

    有时候，我们需要从地图上爬取用户对某些地点或商家的评价和评论，这样我们就可以分析用户对不同地区或行业的态度和偏好。但是，如何从地图上爬取用户评价和评论呢？...我们以百度地图为例，我们可以使用以下代码来打开百度地图并搜索“北京饭店”：// 引入Puppeteer库const puppeteer = require('puppeteer');// 亿牛云 定义爬虫代理...('#sole-input'); // 输入要搜索的地点或商家名称 await page.type('#sole-input', '北京饭店'); // 点击搜索按钮 await page.click...', '北京饭店'); // 输入要搜索的地点或商家名称 await page.click('#search-button'); // 点击搜索按钮 await page.waitForSelector...('#sole-input'); // 输入要搜索的地点或商家名称 await page.type('#sole-input', '北京饭店'); // 点击搜索按钮 await page.click

    44020

    关于无障碍设计的七件事

    当页面有颜色以后，我们可以看到其实四个输入框全部出错了（前面三行都用了红色边框）。这对于视障用户来说，这个页面没有做到“无障碍”。...对于右下角“Price”的例子，我做了一个优化方案。即使用户填写了内容，也始终有标签提示用户。 ? 6. 避免组件识别障碍 问：什么时候菜单不再是菜单？ 答：当它是非模态弹窗的时候。...（这份指南讲了如何构建当今许多常见设计组件的无障碍版本，包括菜单、模态、搜索自动补全等） 译者注：非模态对话框，用户在打开此类对话框时，仍然可以操作其他窗口。 下面是一个搜索的自动补全的例子。 ?...自动补全功能中添加了隐藏的按钮，辅助功能无法识别 这会导致无障碍问题。部分原因是它打破了搜索自动补全的标准键盘模式。由于W3C尚未对这种模式形成规范，辅助功能无法识别这些添加的操作项。...与搜索的自动补全的例子不同，幸运的是，非模态对话框可以继续通过箭头键访问。 了解它们之间的区别以及它对用户体验的影响。 设计师需要了解细微的设计更改如何导致用户交互模型的更改。

    3K30

    还有这种操作？--掌握了这些小技巧，让你事半功倍（Unity3D）

    22/23.F与Shift+F 选择游戏对象，按下F键，可将Scene的视口中央移动到该游戏对象处；按下Shift+F，可将视口与该游戏对象锁定，即无论如何移动游戏对象，视口中央始终跟随此游戏对象。...隐藏和锁定层 在编辑器右上角的Layers下拉列表中，点击对应层右侧的眼睛按钮，可以隐藏或显示某个层上的对象；点击锁按钮，可对某个层进行锁定或解锁，当被锁定后，该层上的所有对象将不能被选择。...，如下图所示： 55.快速新建脚本并挂载到游戏对象上 选择游戏对象，在Inspector面板上点击Add Component按钮，在搜索框中输入新建的脚本名称并回车，可新建脚本并挂载到目标游戏对象上，...60/61.显示/隐藏Gizmo 点击Scene面板右上角的Gizmo下拉列表，可以选择显示或隐藏某类组件的图标和Gizmo标识；也可点击Game面板右上角的Gizmo按钮，显示或隐藏所有资源的图标和Gizmo...鼠标右键点击预览窗口顶部，可将该窗口弹出，作为独立窗口，放置在编辑器的任意位置。 96.测试游戏时静音 点击Game窗口右上角的Mute Audio按钮，可在编辑器播放时将所有声音关闭。

    2.3K30

    Excel表格的35招必学秘技

    2.执行“视图→视面管理器”命令，打开“视面管理器”对话框，单击“添加”按钮，弹出“添加视面”对话框，输入一个名称(如“上报表”)后，单击“确定”按钮。 　　...3.将隐藏的行(或列)显示出来，并重复上述操作，“添加”好其它的打印视面。 　　...4.以后需要打印某种表格时，打开“视面管理器”(如图4)，选中需要打印的表格名称，单击“显示”按钮，工作表即刻按事先设定好的界面显示出来，简单设置、排版一下，按下工具栏上的“打印”按钮，一切就OK了。...1.在D列后面插入两个空列(E、F列)，然后在D1单元格中输入公式：=B1&C1&D1。 　　...通过它你可以轻松看到工作表、单元格和公式函数在改动时是如何影响当前数据的。 　　在“工具”菜单中单击“公式审核”子菜单，然后单击“显示监视窗口”按钮。

    7.6K80
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券