我的按钮有了不想要的样式，但我似乎找不到改变它的方法 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

从0开始编写一个开关组件

开关按钮似乎是开发人员和设计师最喜欢的展示他们的动画、设计和双关语技能的方式。甚至还有一个专门用于开关按钮的Codepen集合。...一如果CSS文件不加载，按照我“从0开始编写自定义单选按钮和复选框”一文中的方法，你也可以得到一个可以运行的持续增强的复选框。...我通过清除背景、亮化边框和文本来实现变灰显示方法。虽然一个禁用的控件无法接收焦点，但我们可以悬停在该控件上，以便我们想要撤消这些样式。 ? 不确定的状态复选框有第三种状态(开关控件没有)。...与我交互的大多数开发人员似乎并不知道这一点，当他们选择的框架偶尔返回一个不确定的复选框时，他们会感到吃惊(假设他们只能看到不包含这一点的样式)。...绿色仍然有好的对比度(6.2:1)，但是我需要改变获得焦点/悬停文本的蓝色，我把边框和背景颜色调亮一点(#808080)，以获得4.8:1的对比度。

2.4K2 0

按钮样式的正确方式

这种方法的缺点是，现在我们必须对所有按钮进行样式设置，否则用户将无法识别它们。...这是我们想要做的事情：可应用于链接或按钮的“按钮”样式; 我们希望有选择地应用它，因为我们的页面中会有其他链接和按钮样式。这需要一个CSS组件。...悬停(hover)，焦点(focus)和活动(active)样式很酷，你的按钮看起来不错，但是...用户将与它进行交互，并且当按钮的状态改变时，他们需要视觉反馈。...浏览器为“focus”和“active”（即按下）状态设置了默认样式，但通过重置按钮样式我们已经删除了其中的一些。我们还希望为鼠标悬停设置样式，总体而言，我们希望可见的样式与我们的设计相匹配。...对于其他人来说，使用鼠标或触摸指针是不可能的或困难的。他们依靠使用键盘或专用设备访问网站。在我见过的大多数Web项目中，设计师都指定了预期的鼠标移过样式，但未指定焦点样式。我们应该做什么？

3.7K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

「译」如何编写 React 应用程序的样式

当我将CSS重用为一个按钮时，我不会把它放在任何其他元素上，而是把它放在一个按钮上。输入字段、布局和我构建的任何自定义组件也是如此。我正在重用组件，而不是class。但这有什么不同呢？...它的存在反映了需要传递给组件的道具。这是样式和标记耦合的另一个例子。但是，如果我们滥用组件的 API，我们得到报错。当我开始考虑组件而不是标记和样式时，我开始将它们的分离视为不必要的摩擦。...虽然我与 Tailwind 没有任何关系，但我认为使用实用程序类的样式方法是最具可扩展性的。在 CSS 的上下文中，可扩展性意味着能够在不成比例增加样式工作的情况下向页面添加更多内容。...这是以一种有助于我在未来使用它的方式设计产品。有一天，在我编写.card-header 类之后，我将不知道它的确切样式，只是通过查看代码。...但更重要的是，从现在起一个月或一年后，当我必须对项目进行快速更改时，我将能够理解它们。进行 CSS 更改我们编写CSS的方式和我们改变它的方式有很大不同。

1011 0

探索 Android Design Support Library v28 新增内容

在这篇文章中, 我想要看看以 Material 视图组件形式添加进入 Support Library 的新增部分....这个类从你可能已经使用的 AppCompatButton 类继承而来. 它们之间有什么不同呢? 这个按钮开箱即用, 它被设计成具有物质本质外观和质感, 而无需使用样式标志定义....app:rippleColor: 使用此颜色定义按钮的水波纹效果的颜色 app:backgroundTint: 用于给按钮的背景着色.如果你想要改变按钮的背景颜色, 使用这个属性而不是 background...以避免破坏按钮的样式 app:backgroundTintMode: 用于定义背景色的着色样式 ?...我也很高兴能够找到一个可以使用底部应用栏的用例, 但我确信在 Support Library 版本稳定之前还有一段时间才能实现. 按照惯例, 我很乐意听到您对这些新组件的想法或评论!

1.9K2 0

JavaScript——DOM基础

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。文档：一个页面就是一个文档，DOM中使用document表示。...注册事件--div.onclick //3.添加事件处理程序 div.onclick = function() { console.log('我被点击了...结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。...核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密... 修改样式属性我们可以通过JS修改元素的大小、颜色、位置等样式。...操作元素总结排他思想如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：所有元素全部清除样式（干掉其他人）给当前元素设置样式（留下自己）注意顺序不能颠倒，先干掉别人

6.6K2 0

那些你从不使用的 HTML 属性，背后竟然大有文章，赶快了来了解下

样式表上的title属性在为本文进行研究时，这对我来说是全新的，可能是此列表中最有趣的一个。作为一些背景知识，如果您不知道，Firefox 有一个选项可让您选择查看页面时要使用的样式表。...您可以通过使用 Firefox 或其他兼容浏览器访问以下 CodePen 来尝试上述示例：下面的屏幕截图显示了 Firefox 中的样式表选项：如前所述，此功能在 Firefox 中有效，但我无法让它在任何基于...MDN关于备用样式表的文章说它可以在其他浏览器中使用扩展启用，但我找不到可以执行此操作的活动扩展。和元素的cite属性我敢肯定你经常使用这个元素。...元素的decoding属性在研究这篇文章时，这对我来说是另一篇全新的文章——而且在规范中似乎相当新。将decoding属性添加到图像元素可为浏览器提供图像解码提示。...async 异步解码图像以避免延迟其他内容的呈现。 auto 默认允许浏览器使用自己的内置解码方法。如果您对解码图像的概念感到好奇，该规范有[一个很好的解释]，并不难理解。

1.5K3 0

CSS通用类和“结构与样式分离”

这种方法的典范是禅意花园。如果使用“结构与样式分离”原则，那么想要改变一个网站的样式只需要更换样式表就可以了。...我认为这很有道理，所以很长一段时间都是这么写HTML和CSS的。但后来，我感觉有点儿不对劲。虽然我将“结构与样式分离”了，但HTML和CSS还是有很明显的耦合。...大多数时候我的CSS看起来就像是HTML标签的镜子，嵌套的CSS选择器将HTML结构完全映射出来了。我的标签确实与样式分离了，但我的CSS却与HTML结构有很强的联系。...那如果我们想改变作者简介卡的样式，而不改变文章预览的，那该怎么办呢？之前，我们只需要打开样式表，给需要改变的组件随便添加样式就可以了。但现在我们需要编辑HTML！这很糟！......但是先要用通用类构建样式我的方法需要先使用通用类给标签添加样式的原因是，我希望使用通用类来构建网站样式（译者：言外之意，不添加任何新样式）。而且只有当他们出现时才会精确的复用重复的部分。

3.3K2 1

Java模板生成word文档POI生成Excel【面试+工作】

5.将文件已utf-8编码保存，另存为为.ftl，找不到该格式直接改文件后缀名就行，这样得到test.ftl 6.前台触发事件我的项目是基于SpringMVC的，所以前台触发只需要在view层的文件里加个按钮事件即可...有朋友可能想用什么Ajax来发送请求，我反正是没搞出来，挺麻烦的，网上找的相关解决方案也都比较蛋疼，因此不传什么复杂的敏感的参数，就这么写就可以。...ExcelUtils里面除了一些既定的方法外，还有就是你具体怎么去操作模板的方法了。...最后调用ExcelUtils里的相关导出方法，这个方法是自定义的，它定义的是怎样去操作模板自定义的方法: ? ExcelUtils: ? ? ? ? step4:启动项目，然后测试一下，看！...有图为证 ? 嗯嗯，文章写到这里就结束啦，Apache poi还提供了很多API在本例中为得到展示，比如能够指定样式等等。希望大家进一步学习。

3.9K2 0

你不知道的HTML

样式表上的title属性在为本文进行研究时，这对我来说是全新的，可能是此列表中最有趣的一个。作为一些背景知识，如果您不知道，Firefox 有一个选项可让您选择查看页面时要使用的样式表。...下面的屏幕截图显示了 Firefox 中的样式表选项： [Firefox 菜单样式]（大图预览）如前所述，此功能在 Firefox 中有效，但我无法让它在任何基于 Chromium 的浏览器中工作。...MDN关于备用样式表的文章说它可以在其他浏览器中使用扩展启用，但我找不到可以执行此操作的活动扩展。...元素的decoding属性在研究这篇文章时，这对我来说是另一篇全新的文章——而且在规范中似乎相当新。将decoding属性添加到图像元素可为浏览器提供图像解码提示。...async 异步解码图像以避免延迟其他内容的呈现。 auto 默认允许浏览器使用自己的内置解码方法。如果您对解码图像的概念感到好奇，该规范有一个很好的解释，并不难理解。

4.2K16 4

Android 9 Pie新版本入门

新的导航栏用一个更有适应性的系统和home按钮取代了几乎总是在屏幕上的三个图标(back, home, overview)， home按钮现在可以让你在应用之间切换(而不是点击overview按钮)。...我确信谷歌使用某种机器学习来支持这些建议，但我宁愿把这个区域作为扩展的最爱栏，在那里我可以锁定一些额外的应用。...这并不是说Android的建议一定是错的，也不是我想要使用的那些应用，主要是因为它建议的那些应用已经在我的主屏幕上了。我不认为我在使用最后两个betas的时候就已经启动了一个应用程序。...谷歌也爱谈论其自适应亮度功能，也学习如何根据你的环境,设置你喜欢的屏幕的亮度。但实际上对我来说不同的是,谷歌现在混合整个设置，当你改变设置时你可以看到有什么不同变化。...但在这里,也真正在日常使用真正的区别是，文本选择放大镜显示了一个更大、更清晰的图片让你选择(它位于你的右上方选择)，这使得你更容易选择正确的文本(是的,iOS已经有类似的功能)。

1.1K3 0

更换一次 UI 组件库才知道的事

一: 属性的变化属性被删除 (ts可标红) 比如 button组件之前有一个 textType用来设置按钮的定制样式, 但是在新的组件库中被删掉了, 这些旧的特殊样式需要找ui同学确认是否保留。...八: css属性的错乱 & 样式的差异元素css属性被改变比如table表格组件每个td的差异, 旧版组件里面没有为td设置特殊的属性, 但是新版的表格组件为tb设置了display: flex属性...image.png 这类问题不好解决, 因为新的ui库的同学也不愿意改这种底层设计,而且新版的ui库已经有其他团队在使用了, 此时就需要我们自己写全局的css样式把它顶掉了。...十: 组件标签嵌套的改变比如说弹出框组件, 原本弹出框组件有两层div包裹, 当我想要获取最外层的div时就需要当前元素.parentNode?....这个标签里面, 也就是说如果我们想让input框出现错误提示就要, 包一层再包一层 , 但我们实际有很多地方并不适合这样做。

2.7K2 0

消失的中国互联网元老陈天桥：为神经科学捐助10亿，不担心机器人崛起

我想我有一些精神障碍，而且我真的相信一定有什么不对劲。例如，当我乘坐飞机时，我是一个非常理性的人，我知道这是最安全的交通工具，但我仍然害怕。但是在服用药后，它突然消失了。...当我看到你时，它应该只是细胞中的原子，我可以在空中看到有多少水分子，这里和那里有多少氧原子漂浮在周围。但我们所看到的是我们的肉眼感知之后给予的内容。...我认为现在所谓的人工智能并不是一种真正的智能。 Q：反思人工智能，似乎当前的处理方法都是基于收集并且挖掘尽可能多的数据。...有大量信息涌入你的大脑，你的大脑必须去判断它们的是非对错，因为随着技术的发展，越来越多的人拥有了发言权。你的大脑中有太多不同的观点，你必须判断什么是你喜欢的，什么是你想要的。我认为你跑得太快了。...我认为如果（技术）更加鲜活，这个趋势将会加强。你总会发现有些人沉迷于它。这就像兴奋剂。它可以控制你的大脑，并让你感到快乐。但是即使它与兴奋剂有相同的效应，我们的政府也已经有了相关规定。

4460 0

CSS规范--BEM入门

，但我们也无需担心文件体积的问题，由于服务端有gzip压缩，BEM命名相同的部分多，压缩下来的体积不会太大。...BEM最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用（不使用）它。随着接触的多了，有了经验积累，你慢慢就会知道怎么用，这些问题也不再是问题。 4 你是不是用错BEM了？...当我们遵循了这个规定，无论父元素名发生改变，或是模块构造发生的改变，还是元素之间层级关系互相变动，这些都不会影响元素的名字。...试想一下维护这类代码有多么痛苦，我们要一边检查该元素的上下文DOM结构，一边对照着css文件，一一对比，找到该元素对应的样式，也就是说我为了改一个元素的代码，需要不断翻阅HTML文件和CSS文件，可维护性非常之差...如果我们用的是BEM，要覆盖样式很简单：找到要覆盖样式的元素，得知它的类名，在媒体查询中，用它的类名作为选择器，写下覆盖样式，样式就覆盖成功了，不需要担心前面样式的权重过大。

1.2K2 0

Web页面组成

登录的判断涉及后台数据校验，需校验账号密码在我当前的数据库当中是否存在的。如果存在，全部匹配，才会给你返回。 12）鼠标悬浮，通过js可以实现。鼠标悬浮，对html页面上的元素做了样式的改变。...DOM对象可以改变网页的任何内容，可以访问它的页面属性，页面元素，也可以改变页面元素，页面元素的属性，页面元素的样式。...拿到一个页面，不需要去研究它的层级关系。提出要查找的条件是什么，然后根据这个条件将所有不符合的过滤掉，层级筛选，最后找到想要的东西。每一个元素都是有自己的属性和文本方式。...4）元素的Name属性也是不唯一的。有的时候，页面元素比较复杂，光靠以上4种方法不能找到它，可以用css选择器。 css选择器是元素定位的一种。...它加载到onload后就去加载脚本了，就会提示找不到元素，因为元素还没有加载出来呢，它还不认识呢，在后面。

2K2 0

打造一套安全的UI组件库！

影子DOM：子树隔离影子DOM是Web组件的核心功能，便于理解可以叫它子DOM或者子树。有了子树就实现了一定程度的封装，至少外面的CSS样式进不来了，下图是本文使用的例子。 ?...但注意有一些默认样式找不到的时候会继承外界的样式。...此外，从外面用css选择器也找不到： document.querySelector("p") // null HTMLElement.prototype.attachShadow这个方法有closed和...准则一：用户与组件的责任分离上述所有的安全措施都防止了外界对组件内部的入侵，但想要开发一套安全组件库，还需要阻止内部对外部的恶意输出，为此我制定了一套用户和组件的责任分割线：对用户来说，用户可以修改组件...但是无论你搭配多少套餐总是不可能满足所有用户的需求，万一用户想要一个会闪烁的按钮怎么办？不如提供一个可以覆盖内部css样式的接口让用户可以完全定制，从根源上解决极端需求： <!

1.3K4 1

我是如何成为一个JavaWeb开发者的

也许有一天，你前一秒还在jQuery调试，接下来就去性能调优Oracle数据库查询了。但是，成为一个全栈Java开发人员是需要时间和经验的。　　从哪里开始？　　...你需要对HTML有一个深入的了解。在万维网初期，HTML习惯上是一个由网页服务器向浏览器提供的文件。它对静态内容非常有效。不会改变内容。但是，现在人们越来越倾向于动态的内容。...CSS 　　CSS——层叠样式表。这是用来显示页面样式的。它控制字体、颜色和布局。与HTML定义的是网页的内容不同，CSS定义的是当在浏览器中呈现时网页的外观。...虽然没有精确的统计数据，但我看到有文章估算已有超过60％基于Java的web应用程序使用Spring。这其实也不奇怪。SpringCore有IoC容器和依赖注入。...Grails的优势之一就是其出色的社区支持。　　SpringRoo 　　SpringRoo是一个纯Java框架，这似乎和Grails的作用相同，不过它没有Groovy。

9631 0

我是如何成为一个JavaWeb开发者的

也许有一天，你前一秒还在jQuery调试，接下来就去性能调优Oracle数据库查询了。但是，成为一个全栈Java开发人员是需要时间和经验的。　　从哪里开始？　　...你需要对HTML有一个深入的了解。在万维网初期，HTML习惯上是一个由网页服务器向浏览器提供的文件。它对静态内容非常有效。不会改变内容。但是，现在人们越来越倾向于动态的内容。...CSS 　　CSS——层叠样式表。这是用来显示页面样式的。它控制字体、颜色和布局。与HTML定义的是网页的内容不同，CSS定义的是当在浏览器中呈现时网页的外观。...虽然没有精确的统计数据，但我看到有文章估算已有超过60％基于Java的web应用程序使用Spring。这其实也不奇怪。SpringCore有IoC容器和依赖注入。...Grails的优势之一就是其出色的社区支持。　　SpringRoo 　　SpringRoo是一个纯Java框架，这似乎和Grails的作用相同，不过它没有Groovy。

8881 0

用小程序·云开发轻松构建二手书商城小程序丨实战

本文将带大家使用云开发快速开发完整的校园二手书商城“ 导语很多大学有个普遍现象，毕业或者搬校区的时候，成堆成堆的书都被随便处理掉，作为过来人，每每想到都十分痛心可惜，而导致这种情况发生的原因，我认为主要还是归结学校原因...undefined 我常用的解决办法，通过动态改变textarea的聚焦状况，当点击该区域时，设置聚焦显示真实textarea，当失焦之后，展示为view层，代码如下：的动态页面，关于页面的样式布局方面，使用flex可以轻松搞定，我们重点说下面这点：监控屏幕滚动实现动态响应在上图第二张示例图中，随着页面下滑，顶部分类栏也随之置顶，下方也出现了一个返回顶部按钮...说一点题外话：小程序有一个自带的模板通知，在用户主动触发后7天内能推送模板信息，之前写这个程序的时候慎重考虑过，最后还是舍弃了，毕竟七天时间，不是每本书都那么畅销的。...总结纸上得来终觉浅，绝知此事要躬行，以上总结的是开发此程序中我认为遇到的典型问题，实践过程中肯定会有更多有意思的问题的出现，“面向百度”编程是一个方面，但我更建议“面向官方文档”，很多问题其实官方文档中都有很详细的说明和代码示例

1.8K6 4

5个改变你编写CSS方式的新功能

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。...从技术上讲，一个空表单是无效的表单 3. 级联层这个有点独特，虽然我从未见过它的实际用途，但肯定有一个。... 选择标签： p { font-size: 18px } 但是如果我们想要添加更多的样式呢？好吧，CSS是向下级联的，所以我们只需要在它之后添加一些样式即可。...再见 Transforms 我记得当 transforms 首次推出时，它们真是太棒了。你可以缩放元素、旋转它们、扭曲它们，甚至可以将它们变成3D形状。但是他们总是有一个问题。...它们可以用来防止PWA覆盖最小化、最大化和关闭按钮。嗯，我想不出其他情况下用户代理可以与样式表进行通信以确定显示方式的例子。

2442 0

是时候学习PostCSS了

针对于那些忧虑，我有两点要讲：您不必害怕。实际上，处理样式代码工具的数量是非常小的（在同时写JavaScript的我看来）。增加更多的可能性不会伤害任何人或任何事。...传递AST的每个函数都可以改变它；生成的sourcemaps会跟踪所有的变化。 AST提供了一个直接的API，开发人员可以使用它来编写插件。...如果您找不到您想要的插件，您想做什么… ☞ 您总是可以创建自己的插件来满足自己的需求。这是最重要的一点。值得重复… ☞ 您总是可以创建自己的插件来满足自己的需求。...我从来没有真正同意过（也或许是因为我从来不介意在构建过程中增加一点复杂性）；但我确实承认了这一批评，并承认如果您不觉得问题被一个工具解决了，您也没必要非使用这个工具。...这就足够了本来我还想要写另外一章，叫做“现在，为了好玩，让我们解决一些针对PostCSS的拙劣批评”。但我认为这篇文章已经够长了。我相信，聪明的读者已经明白我大多数的反驳是什么样子。

5922 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭