首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【译】W3C WAI-ARIA最佳实践 -- 控件

Home (可选地): 当焦点在手风琴的标题,将焦点移到手风琴的第一个标题 End (可选地): 当焦点在手风琴的标题,将焦点移动到手风琴最后一个标题 Control + Page Down (可选地)...: 如果焦点在手风琴面板内,将焦点移动到面板标题上。...Control + Page Up (可选地): 如果焦点在手风琴面板内,将焦点移动到该面板的标题。如果焦点在手风琴标题,将焦点移动到手风琴前一个标题。...使用声明属性的文件目录树视图示例: 文件选择树,示范如何明确地定义 aria-level, aria-posinset 和 aria-setsize 的值。...使用声明属性的导航树视图示例: 一个树结构,提供一组网页的导航并示范如何明确地定义 aria-level, aria-posinset 和 aria-setsize 的值。

4.6K30

如何为WordPress网站添加双因素身份验证

如何为WordPress网站添加双因素身份验证   不管你是使用 WordPress建站, Magento 建站,在网站上线后,都不可避免的会受到各种恶意软件来登录你的网站后台,是不是有些提心吊胆呢...在手机上下载Google Authenticator应用程序并扫描二维码,将生成的代码插入您手机上的“Authenticator Code验证器代码”字段中并进行验证。   就是这样!...您已成功为您的站点启用 WordPress 双重身份验证。下次登录 WordPress 网站时,系统会要求您在手机上提供代码。...现在,即使有人掌握了您的密码,您也无需担心。   有很多不同的地方可以提高站点的安全性,这是一种使您的 WordPress 登录更安全并保护其免受暴力攻击的简单方法。.../ 相关文章 WordPress网站如何删除渲染阻止资源提高网站速度 WordPress网站如何使用WP Rocket删除未使用的CSS 如何将自定义CSS添加到WordPress网站

2.6K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    在CentOS 7上安装Magento(Install Magento on CentOS 7 译文)

    为了进行更多内存密集型的Magento设置,我们建议使用high memory Linode。 注意本教程介绍了如何在刚发布时安装最新的Magento发行版。...对于4GB Linode,建议使用此值,但对于较大的服务器,可以选择增加此值。 注意date.timezone的值将根据系统的时区而有所不同。...有几种方法可以做到这一点,但在这里我们将介绍最简单的方法。 1 在您的本地计算机上,从他们的官方网站下载Magento的副本。有几个版本可用,但我们建议您下载最新版本。...在我们的示例中,我们将它命名为magento,但如果您选择了不同的值,请在此处替换它。 - db-host - 如果您在与其数据库相同的服务器上运行Magento,请在此处使用localhost。...有关如何在商店中使用SSL证书的说明,请参阅有关获取商业签名SSL证书和使用Apache 证书的教程。 注意许多需要SSL的支付供应商不支持自签名证书。

    9.4K50

    在CentOS 7上安装Magento

    为了进行更多内存密集型的Magento设置,我们建议使用high memory Linode。 注意本教程介绍了如何在刚发布时安装最新的Magento发行版。...对于4GB Linode,建议使用此值,但对于较大的服务器,可以选择增加此值。 注意date.timezone的值将根据系统的时区而有所不同。...有几种方法可以做到这一点,但在这里我们将介绍最简单的方法。 1 在您的本地计算机上,从他们的官方网站下载Magento的副本。有几个版本可用,但我们建议您下载最新版本。...在我们的示例中,我们将它命名为magento,但如果您选择了不同的值,请在此处替换它。 db-host - 如果您在与其数据库相同的服务器上运行Magento,请在此处使用localhost。...有关如何在商店中使用SSL证书的说明,请参阅有关获取商业签名SSL证书和使用Apache 证书的教程。 注意许多需要SSL的支付供应商不支持自签名证书。

    14K60

    腾讯面试官:如何从0到1实现一个高性能Collapse折叠组件,直到现在我还实现不出来

    ,该如何处理,这个我到时候解决了,提前渲染隐藏就行,但是重排的问题直到现在我都没有解决,发出来问问大家,如果是你们,你们会如何思考 jcode 我们先从最基本的实现开始,然后逐步添加更多的功能,如手风琴模式...active: boolean) => React.ReactNode) - defaultActiveKey 默认展开面板的 key 手风琴模式:string | null 非手风琴模式:string...当一个新的面板被展开时,之前展开的面板将被关闭。 activeKey:当前展开面板的key。如果我们处于手风琴模式,这将是一个字符串或null。如果我们不在手风琴模式,这将是一个字符串数组。...完整效果: jcode 其它方式 上面手风琴效果是利用height的实现,这种实现会触发重排,所以感兴趣的同学可以考虑其它方式优化一下 基于scaleY?...感觉不现实 使用FLIP技术添加动画优化? 搜了一圈,更难实现?

    52620

    使用这些 CSS 属性选择器来提高前端开发效率!

    在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。...现在我们已经看到了如何使用属性选择器进行选择,让我们看看一些用例。 我将它们分为两类:一般用途和诊断。 一般用途 输入类型样式的设置 你可以对输入类型使用不同的样式,例如电子邮件和电话。...,以便在手机上轻松拨打电话。...file types: " attr(accept); } html 手风琴菜单 details和summary标签是一种只用HTML做扩展/手风琴菜单的方法,details 包括了summary标签和手风琴打开时要展示的内容...你现在应该知道如何自己构建它, 你只需选择带有href的所有标签,添加伪元素,然后使用attr()和content打印它们。

    2.2K50

    前端开发需要知道的一些 CSS 属性选择器!

    在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。...现在我们已经看到了如何使用属性选择器进行选择,让我们看看一些用例。 我将它们分为两类:一般用途和诊断。 一般用途 输入类型样式的设置 你可以对输入类型使用不同的样式,例如电子邮件和电话。...,以便在手机上轻松拨打电话。...file types: " attr(accept); } html 手风琴菜单 details和summary标签是一种只用HTML做扩展/手风琴菜单的方法,details 包括了summary标签和手风琴打开时要展示的内容...你现在应该知道如何自己构建它, 你只需选择带有href的所有标签,添加伪元素,然后使用attr()和content打印它们。

    1.8K20

    给单元素艺术添加动画

    在继续阅读本文之前,可以先看看 Lynn Fisher 的这篇文章 她为什么以及如何制作单元素艺术 。 很少使用单个 div 元素做动画。...风箱的运动需要设置不同的 scaleX 值而另外两个部分则设置跟随风箱运动的 translateX 值。这样,一个简易的手风琴就诞生了。...如果跨浏览器支持的话,这是改变状态最快的方法。如果你正在使用 Chrome 和 Opera 浏览,可以使用此方法给手风琴的左侧按键及右侧按钮添加动画。...如果你希望某些按钮保持默认状态不变,它们可以在不同的 background-position 上使用默认的 --button 属性。...在手风琴的例子中, --button4-color 或者 --button4-dim 在 CSS 中没有明确定义。所以当加载时它们会使用 --color1 和 --button-dim 的默认值。

    1.5K50

    要提升前端布局能力,这些 CSS 属性需要学习下!

    在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。...现在我们已经看到了如何使用属性选择器进行选择,让我们看看一些用例。 我将它们分为两类:一般用途和诊断。 一般用途 输入类型样式的设置 你可以对输入类型使用不同的样式,例如电子邮件和电话。...,以便在手机上轻松拨打电话。...file types: " attr(accept); } html 手风琴菜单 details和summary标签是一种只用HTML做扩展/手风琴菜单的方法,details 包括了summary标签和手风琴打开时要展示的内容...你现在应该知道如何自己构建它, 你只需选择带有href的所有标签,添加伪元素,然后使用attr()和content打印它们。

    1.5K30

    你每天要花多少时间在手机上?

    这也与以往的研究更接近,从而表明我们每天在手机上花约 4 小时40 分钟。 很难推测出 2017 年我们将在手机上花费的确切时间,但简单的说是“每天超过 4 小时”。 ? 我们用手机做什么?...eMarketer 的移动设备使用情况报告(2015年11月上旬)提供了更明晰的时间细分详情,与前两者的数据更为不同。...根据前文的结论我们每天在手机上花费超过 4 小时,而应用程式使用率占90%,那么我们实际上每天约花 3 小时 40 分钟使用应用程式。 众所周知,年轻的成年人比老年人花更多的时间在应用程序上。...人们在手机上花费的大量时间,与其说这是种科技上瘾行为,不如说这代表着大规模的文化转变。 数据说明,我们的生活变得更加科技一体化。同时伴随这变化,也带来了一系列挑战。 我们将如何处理这些挑战?...结语 2017 年人们在手机上会花多少时间?相当多。 在手机上每天花超过 4 小时,意味着每天我们花超过 1/6 的时间在手机上!这并不意味着是件坏事。

    2.1K90

    WEB入门之十九 UI

    jQuery UI是在jQuery的基础上,利用jQuery的扩展性而设计的针对UI的插件。它提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等。...前四个文件几乎是在使用jQueryUI微件时都需要导入的文件。 上述代码使用accordion函数使一个id是acc的div元素初始化成了手风琴组件,见斜体部分。...Ø event:用来设置使用哪个事件来触发手风琴组件中每组的展开,默认值是click。...>上述代码给Button组件设置了几种不同的图标 上述代码使用dialog函数使一个id是dt的div元素初始化成了对话框组件,见斜体部分。...>上述代码给Button组件设置了几种不同的图标 上述代码使用tabs函数使一个id是t的div元素初始化成了选项卡组件,见斜体部分。

    7310

    10 个不错的 CSS 小技巧

    一些用户案例,包括比较两个不同的照片,你无需在视图窗口渲染这些照片。比如:cursor 属性可以用在你的设计中,节省空间。...使用关键帧实现手风琴下拉效果 JavaScript 库,比如 jQuery, Cash 等,即使你想使用一个简单的缩放功能,你都要整个引入。幸运的是,很多 CSS 技巧能够避免这种引入。...比如下面的手风琴片段代码。 如果你认真看下当下 web 设计的趋势,你会发现在登陆页面就会发现手风琴这种设计效果。这是一种简缩内容的方式,以节省设计空间。...常见问题解答,产品功能,使用提示等功能,都可以放在手风琴内实现。下面是纯 CSS 代码片段对其的实践。 代码片段 8....代码片段 最重要的一点,这些 CSS 技巧凸显了不使用 JavaScript 来实现功能的潜力。你可以使用上面这些小技巧,应用在你的设计上。事实上,很多这样的例子可以混合使用,以创作自由风格的设计。

    1K10

    如何设计下拉菜单(技巧+实例)

    然而与之同时,下拉菜单又是最容易被错误使用的表单组件。这篇文章就来告诉大家下拉菜单的适用场景、设计技巧以及一些漂亮的实例。...纯数值 通常来说,在手机上使用数字键盘输入纯数值会比在菜单中选择数值更加快一些。 ? 精确数值 对于精确数值(如购物车里的商品数量),可以使用计数器来让用户快速对数字进行增减。 ?...不精确数值 对于不精确的数值,可以使用滑块。 ? 设计下拉菜单时需注意: 尽量不要使用交互式下拉菜单 交互式下拉菜单指在同一页面内,用户选中某一菜单中的选项后,另一菜单的选项也会跟着变化。...需要注意的一点是,弹出面板的定位策略应设置为“相对于原组件”,否则点击后弹出面板会从别处而不是从下拉选择组件底部弹出。 ? 当然,以上只是简单地介绍了如何用Mockplus做出简单的下拉菜单。...用Mockplus还可以做出复杂一些的下拉菜单,如手风琴菜单,详细教程见:http://doc.mockplus.cn/?p=3078 ?

    3K84

    全渠道客服体验:Rocket.Chat 的无缝互动 | 开源日报 No.41

    团队协作:安全内部和跨公司合作的单一点 全渠道客服:与顾客进行无缝互动,无论他们如何连接到你 聊天引擎:在移动应用程序或 Web 应用程序中创建自定义消息体验 市场:选择各种帮助企业更有效地沟通的 app...imthenachoman/How-To-Secure-A-Linux-Server[3] Stars: 14.0k License: CC-BY-SA-4.0 这个项目是一个逐渐更新和完善的指南,可以帮助你了解如何保护一台...涵盖了大量不同方面(例如:网络、文件权限等)对于那些想要深入研究 Linux 服务器安全的技术专业人员非常有用。 可以节省时间,在单篇文章中找到所有必需信息并进行参考。...总之,“How To Secure A Linux Server” 是一份实用又简洁明了的开源项目资源,值得每位使用Linux操作系统管理自己设备或者企业服务端管理员们认真阅读和借鉴。...magento/magento2[4] Stars: 10.9k License: OSL-3.0 Magento Open Source 是一个开源项目,它提供基本的电子商务功能,可以从零开始构建独特的在线商店

    54030

    如何在 Ubuntu 20.04 上安装 Memcached

    如果连接服务器的客户端和服务器在同一个主机上,你不需要修改默认的配置文件。 默认的配置文件对大部分用户来说都足够了。...2.1 远程访问 如果连接 memcached 的客户端和 memcached 运行在同一个主机上,你不应该允许远程访问。...sudo ufw allow from 192.168.100.30 to any port 11211 三、连接 Memcached 有很多不同的 memcached 客户端,适用于不同的编程语言。...3.1 PHP 想要使用 Memcached 作为你的PHP应用例如 Wordpress,Drupal,Joomla或者Magento 的缓存数据库,你需要安装php-memcached扩展: sudo...你可以使用pip安装你喜欢的类库: pip install pymemcache pip install python-memcached 四、总结 我们已经向你展示如何在 Ubuntu 20.04 上安装

    1.6K30

    使用 CSS Checkbox Hack 技术制作一个手风琴组件

    在本篇文章里,我们一起学习下如何使用 CSS checkbox hack 技巧制作一个响应式的手风琴组件,这个组件完全基于CSS,没有JavaScript脚本,基于窗口大小进行水平和垂直之间进行切换。...这是我的最爱,不仅可以完成本文的例子,还会制作一些更有趣例子,稍后会介绍到。 1、创建 HTML 标记结构 在本练习中,我们从维基百科找一些四种不同类型的内容介绍:动物、植物、空间和河流。...(accessibility) 以下是完成后的CSS代码内容: 4、响应式处理 接下来我们来处理下,在小屏或可视窗口低于 650px 的情况,幸亏我们使用了弹性盒子布局,在这种情况下,我们让手风琴垂直显示...示意图效果如下: 对应的代码如何实现呢?...,代码如下: CSS部分修部分的代码如下: 最终完成的代码 1、HTML代码部分: 2、CSS代码部分: 小节 今天的案例就和大家聊到这里,通过本文,我们一起学习了如何使用 CSS checkbox

    5.4K30

    前端-10款web动画插件

    2.基于Layui的可自定义添加删除数据的表格处理插件 如何在网页上编辑表格数据,这通过自己编写JS和CSS实现都是比较麻烦的,jQuery有很多插件可以完成这种功能,比如这款jQuery简易版的Excel...今天我们给大家带来另外一款基于HTML5 Canvas的飞机航班线路模拟动画,它模拟了许多航班在不同目的地的起飞降落数量。 ?...类似的菜单插件还有CSS3侧边栏单页切换小图标菜单和CSS3侧边栏手风琴菜单,都非常实用。这种菜单非常适合在网站的后台管理页面中使用。 ?...10.CSS3深色背景的垂直手风琴菜单 手风琴菜单我们已经分享过很多了,特别是垂直手风琴菜单更为常见,比如这款jQuery手风琴样式的多级下拉菜单和这款CSS3带小图标的手风琴下拉菜单都非常不错。...这次要分享的也是一款基于CSS3的深色背景的垂直手风琴菜单,实现原理与之前的比较类似,但是菜单展示形式略有不同,这个手风琴菜单当展开时子菜单会有水平飞入的动画效果。 ?

    5.9K50

    手把手教你给偶像刷票。Charles实战

    OK,我们可能不懂追星的那份乐趣,但是如果能够让你们开心。那我们也愿意。 接下来,就实战演示一下,如何讨好你的追星另一半。...(虽然我只在安卓手机上测试过,iphone应该同理) 首先,你需要一部手机,装一个你想要投票的APP/网页/小程序。 电脑上安装一个抓包软件,这里我使用的是Charles。...Postman等,能模拟网络请求的工具。 在手机上抓包数据 打开Charles,用手机连接它。...就会发现,之前unknown的API变的可见啦! 之后你在手机上的每一步操作,都会在这里得到提示。 模拟请求 得到了我们想要的数据之后,我们该怎么做呢?...这个时候,我们需要的是在手机上先进行一次投票操作,就可以在charles的左边菜单栏获取到对应的请求。 这个时候,我们需要对想要模拟的请求点击右键,选择repeat。就可以进行重复投票了。

    1.1K30

    黑客可以利用传感器数据来破解手机密码

    在南大Temasek实验室的高级研究员Shivam Bhasin博士的领导下,研究人员使用智能手机中的传感器来模拟用户按下哪个号码,是基于手机是如何倾斜的,以及有多少光线被拇指或手指挡住了。...研究人员认为,他们的工作突显了智能手机安全方面的一个重大缺陷,因为在手机中使用传感器不需要电话用户授予的权限,并且公开可供所有应用程序访问。...分类算法是用从三个人收集的数据训练的,他们每个人在手机上随机输入一组70个四位数的PIN码。同时记录了相关的传感器反应。...虽然每个人都以不同的方式输入手机上的安全密码,但科学家们表示,随着时间的推移,越来越多的人的数据被输入到算法中,成功率也有所提高。...因此,当一个恶意应用程序可能无法在安装后立即使用机器学习正确猜测PIN码,但它可以从成千上万的用户的手机上收集数据,以了解他们的PIN输入模式,然后发动攻击,成功率要高得多。

    89670
    领券