好几天没写js和css了，昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错，思来想去觉得自己做一个会比较好，毕竟，本来就是一个学习的过程！ 效果： ? 我们今天做一个这样的按钮！...我首先说一下我的思路，我刚开时看到的时候在想，无非就是画一个背景阴影，然后利用js改变阴影的宽度，但是这样有一个问题就是上面的字体不会改变，我开始是做成了这样的： ?...这里很明显就看出来了是有问题的，上面的字体没有改变位置，说明我的思路是不对的，然后我在想，那么既然不改变阴影的宽度，只能是改变按钮本身的位置了，但是他在页面上怎么改变按钮的位置呢？...给他一个相对固定的位置不就行了吗？于是就想到最外侧加一个div就可以了！ 源码： 的没有什么新技术，只是一些不是很常用的css，加阴影的关键字： box-shadow 这个关键字可以直接打扫W3Cschool里面看详解，这里就不班门弄斧了！
默认 是根据css选择器的权重，按权重进行叠加，权重值大的css 覆盖 权重小的css。 基本规则 选择器{ 属性：值; 属性：值; } * 选择器作用：用来匹配html元素。...(.body div .hello) -> (.hello, div, .body) 先找到.hello, 再去验证'.hello'有没有祖先叫'div'，再去验证div有没有祖先'.body'...从右向左解析css选择器，这样做的目的是：为了加快 浏览器对css选择器的解析速度。...after。...比如 鼠标 停留在 按钮上，该按钮就处于hover的状态 选择器权重 选择器的分类，也为选择器设置权重 带来了便捷。
也许最广为人知的是 :hover，它在光标移到一个元素上时应用样式，所以它被用来高亮可点击的链接和按钮。...:checked：匹配已勾选的复选框或单选按钮 :blank：选择用户输入为空的输入框 :enabled：匹配一个被启用的输入框。...MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同的样式。...任何选择器的语法错误都会破坏所有元素的样式。 像Sass这样的CSS预处理器允许嵌套（这也将出现在原生CSS[6]中）。...但是： 在原生嵌套到来之前，你仍需要一个CSS构建工具。你可能想使用像Sass这样的方案，但这可能给一些开发团队引入复杂性。 嵌套可能会导致其他问题。
CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。...[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串 CSS 属性选择器的最基本用法...譬如下面这个选择器，就可以选取所有没有 [href] 属性的 a 标签，添加一个红色边框。...:before, [desc2]:hover::after{ opacity: 1; } 看看效果： 属性选择器配合伪元素实现下载提示 我们知道，HTML5 对标签新增了一个 download...; position: absolute; ... } 当我们 hover 到这个链接的时候，就会这样，提示用户，这是一个可以下载的按钮： 属性选择器配合伪元素对链接的协议进行提示(http
CSS 的玩法可与 SKetch 或者 Photoshop 的玩法不一样。 在本文中，我将向你展示如何以统筹全局的思维实现 CSS 布局，根治布局难产的顽疾。...布局小例子 在本文中，我们要比照 Twitter 的推文组件自己仿写一个： ? 不论是一个像这样的草图，还是一个细节精美的原型图，“有章可循” 总是个好主意。...此空间的大小也由默认样式控制：p 标签的顶部和底部都有 margin。 你也会注意到按钮列表的圆点，以及列表的缩进行为。这些也都是默认样式。我们马上就要修改这些默认样式了。...在 .tweet 选择器上设置的 CSS 效果，其所有子元素都会继承。 （除了按钮。....handle::after { content: " b7"; } ::after 创建了一个伪元素，它位于 .handle 元素内部的最后方（“落后” 于元素的内容）。
$("#test li").css("border", "2px solid red"); 子代选择器 $("选择器1>选择器2>...")...注意：$(A).prepend(B)的操作，不是将B前置到A中，而是将A前置到B中 after() 在每个匹配的元素之后插入内容 insertAfter() 将所有匹配的元素插入另一个指定的元素集合的后面...注意：$(A).after(B)的操作，不是将B插入到A后面，而是将A插入到B的后面 before() 在每个匹配的元素之前插入内容 insertBefore() 将所有匹配的元素插入另一个指定的元素集合的前面...}, function(){ $('#p1").css("background","pink"); } } }); keydown()键盘或按钮被按下时，发生keydown事件，keyup...窗口事件： scroll()当用户滚动指定的元素时，会触发scroll事件。scroll事件适用于所有可滚动的元素和window对象。
序言：你有没有想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决？这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。...可惜没有选择前一个的兄弟选择器，这不是 CSS 选择器的工作方式。我不得不拒绝这个想法。 实际上，一个 checkbox 本身可以有三个状态，可以使用 indeterminate 状态。...最初，红色的按钮被覆盖在黄色的按钮上，然后容器的宽度变化会导致红色的按钮“消失”，显示黄色的按钮。可以将其比作现实中有两个窗格的滑动窗口，一个窗格是固定的（黄色按钮），另一个是可滑动的（红色按钮）。...在许多编程语言中，这是一个非常简单的任务，但是在纯 CSS 世界中，这是一个巨大的挑战。将它分解成子任务是系统地处理这个问题的方法。 我使用一个 flex 容器作为 radio 按钮和圆盘的父类。...在最终的代码中，选择器的数量非常庞大，如果使用 CSS 预处理器则可以显著减少声明长度。
神器的选择器 很多CSS编码习惯都是清一色的类而无相应的选择器，层层嵌套的标签都包含至少一个类。...选择器和类对比起来性能上确实没后者那么好，但如今浏览器对于CSS的解析速度已得到大大的提升，完全可忽略选择器那丁点的性能问题。 可是CSS模块众多，依次推出的选择器也很多。...HTML和CSS的一致而导致样式失效 剔除累赘：减少无实质性使用的类，例如很多层嵌套的标签，这些标签可能只使用到一个属性，就没必要新建类关联 高效流畅：使用选择器可实现一些看似只能由JS才能实现的效果，...变量除了具备简洁性和复用性，在重构组件样式时能让代码更易控制，同时还隐藏了一个强大的技巧，那就是与calc()结合使用。 看看一个简单的例子。...另外声明::after的margin-bottom稍微比::before高一点，这样在旋转过程中能让波浪产生动态的立体效果。
滚动特性 在能用CSS实现的就不用麻烦JavaScript文章提及到滚动捕捉的特性，更多有关于容器滚动方面的CSS新特性其实还有有很多个，比如： 自定义滚动条的外观 scroll-behavior指容容器滚动行为...：当同时有垂直和水平滚动条时交汇的部分 ::-webkit-resizer：某些元素的交汇部分的部分样式（类似textarea的可拖动按钮） html { --maxWidth:1284px;...浏览器在处理像 color 、position 这样的属性时，需要接收特定的属性值，而自定义属性，在开发者赋予它属性值之前，它是没有意义的。所以要怎么给 CSS 自定义属性赋值呢？...这例子看起来自定义属性也没什么了不起的嘛，但这是一个硬编码的情况。你有没有意识到，--theme-color 的属性值是可以用在任意选择器和属性上的呢？这可就厉害了。...一般情况都是配合CSS的伪元素::before和::after的content一起使用。
：当同时有垂直和水平滚动条时交汇的部分 ::-webkit-resizer：某些元素的交汇部分的部分样式（类似textarea的可拖动按钮） html { --maxWidth:1284px;...CSS变得可维护，目前Edge最新版都已经支持这个特性了，这说明现在 CSS 自定义属性已经能用在实际项目中了，相信不久以后开发者们将大大依赖这个特性。...浏览器在处理像 color 、position 这样的属性时，需要接收特定的属性值，而自定义属性，在开发者赋予它属性值之前，它是没有意义的。所以要怎么给 CSS 自定义属性赋值呢？...这例子看起来自定义属性也没什么了不起的嘛，但这是一个硬编码的情况。你有没有意识到，--theme-color 的属性值是可以用在任意选择器和属性上的呢？这可就厉害了。...一般情况都是配合CSS的伪元素::before和::after的content一起使用。
神器的选择器 很多CSS编码习惯都是清一色的类而无相应的选择器，层层嵌套的标签都包含至少一个类。...选择器和类对比起来性能上确实没后者那么好，但如今浏览器对于CSS的解析速度已得到大大的提升，完全可忽略选择器那丁点的性能问题。 可是CSS模块众多，依次推出的选择器也很多。...有时修改类但未确保HTML和CSS的一致而导致样式失效 「剔除累赘」：减少无实质性使用的类，例如很多层嵌套的标签，这些标签可能只使用到一个属性，就没必要新建类关联 「高效流畅」：使用选择器可实现一些看似只能由...变量除了具备简洁性和复用性，在重构组件样式时能让代码更易控制，同时还隐藏了一个强大的技巧，那就是与calc()结合使用。 看看一个简单的例子。...另外声明::after的margin-bottom稍微比::before高一点，这样在旋转过程中能让波浪产生动态的立体效果。
我提出了另一种方案：“我们能不能仅用CSS来实现这个效果？” 他迟疑了一下：“但是CSS怎么能识别输入框是否聚焦呢？” 我提醒他：“你有没有试过使用伪类选择器？” “伪类？我通常只用类选择器。”...五、关键是理解而不是记忆 也许会有人觉得我要求的太苛刻，也许这位同事只是忘记了有这几个CSS选择器。的确，CSS选择器的种类众多，达到60多种，可能会让人难以记住每一个。...这些都是基于用户行为的动态变化，通过CSS直接实现，无需JavaScript介入，提高了网页的交互性和用户体验。...例如，:checked伪类选择器可以选择所有选中的复选框和单选按钮，这对于创建自定义表单控件的样式非常有用。 4、增强可访问性 伪类选择器还可以增强网页的可访问性。...3、创建视觉效果 伪元素选择器也常被用于创建特殊的视觉效果，比如自定义的清除浮动方法（使用 ::after 清除浮动），或者是设计复杂的背景装饰和形状。
position的值里，relative和absolute定位原点是？ display的值： block 像块类型元素一样显示。none 缺省值。像行内元素类型一样显示。...还有一种解决方法，给当前层加上一个伪类。#test:after { content: "....::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 伪元素由双冒号和伪元素名称组成。...双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。...现在HTML5中css3可以写出一个旋转的立方体，请写出要用到的CSS属性。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，...SVG可缩放矢量图形（ Scalable Vector Graphics ）是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。...c、表单按钮：包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。...，写在中的样式 外联样式表：单独存在一个css文件中，通过link引入或import导入的样式 (6)、!...缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
:first 匹配第一个元素 例:$("p:first") :last 匹配最后一个元素 例:$("p:last") :odd 匹配奇数下标对应的元素 :even 匹配偶数下标对应的元素...注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked...)//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加 操作行内样式 css("属性名","属性值") //设置行内样式 css(JavaScriptON对象)...作为兄弟元素添加 $obj.after(newObj); //在$obj的后面添加兄弟元素 $obj.before(newObj); //在$obj的前面添加兄弟元素 移除元素 $obj.remove...index - 选择器的 index 位置 element - 当前的元素 $.each () 函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理 $.each(Object
属性用于改变标签的样式或行为，一个标签可以设置多个属性。...比如有两个框，怎么让它们一个白色一个红色，或者都变成红色呢？ 选择器是CSS核心概念，定义了一套选择标签的语法，可以给指定的标签应用指定的样式。...color: red; } 运行效果如下： [image-20200530192620946.png] id选择器 上面讲到，同一个页面中，id值必须唯一（像身份证），可以用id...JS用于定义网站的交互行为，文件名后缀为.js。 交互行为有很多种，比如点击按钮弹窗、填写提交表单、动态更新页面内容等。JS能极大地增强网站的功能和趣味性。...HTML：结构层， 定义网页结构和内容 CSS：表现层，定义网站的样式和动画 JS：行为层，定义网站的交互行为 开发网站时，三层通常按照顺序开发，必须先有html，定义好网站的结构和内容，再用CSS美化网站
添加新属性 你可以在样式面板中添加新的 CSS 属性。点击“+”按钮或在现有规则下添加新的属性。这使得你可以即时查看新样式的效果并做出调整。 二、理解盒模型 盒模型是 CSS 布局的核心概念。...虽然它们可能会生成比你单独为每个选择器制定规则时多出一些冗余代码，但从长远来看，它们能让你的代码更加有序。...OOCSS 的核心思想是将 CSS 分解成可重用的对象，这样你就能在网站的任何地方灵活使用这些对象。...一个经典的 OOCSS 示例就是“媒体对象”布局，它既能让图片、视频或其他元素保持固定的尺寸，又能让其他内容随意伸缩。我们在评论、列表等网站布局中常常见到这样的设计。...在 BEM 中，一个“块”指的是独立的组件，比如按钮、菜单或徽标。一个“元素”则是属于某个块的子组件，例如列表项或标题。修饰符用于标识块或元素的不同状态或变体，从而改变它们的样式或行为。
无论你是指向一个、.class还是#id，选择器都是你的样式声明的信使，确保正确的元素被"标记"。让我带你回到CSS的早期时代。那是一个网页设计新鲜、原始，而且在很多方面都有限制的时代。...最后还有一个提到的选择器是:where，它与:is类似。然而，关键的区别在于:where的特异性始终为0。 选择器为我们提供了在代码中表达创意愿景的工具。...代码难以维护，可访问性受到了影响，响应式设计也只是一个遥远的梦想。我们需要一种改变，而CSS就是那个改变！ 浮动布局的时代以及clearfix的黑科技 啊，浮动布局的时代。...它们在正常的文档流中被部分移除，这意味着在标记中跟随它们的元素会像浮动元素不存在一样行为。 为了解决这个问题，我们不得不求助于我们现在亲切（或不太亲切）称之为"clearfix黑科技"的方法。...子网格是完善网格布局的一部分，可以将网格布局应用于网格项的子元素，从而实现更一致和可维护的布局。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
